Merge branch 'main' into stale

.changeset/stupid-months-know.md

@@ -1,5 +0,0 @@
----
-"@primer/css": patch
----
-
-Moving the /fonts/ folder to /src/fonts/

.changeset/twelve-taxis-press.md

@@ -1,5 +0,0 @@
----
-'@primer/css': minor
----
-
-Adding a min-height to input-sm

.github/dependabot.yml

@@ -22,4 +22,4 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"

.github/release_template.md

@@ -0,0 +1,13 @@
+Preparing for a release.
+
+### Checklist
+
+Make sure these items are checked before merging.
+
+- [ ] Preview the docs change.
+- [ ] Preview npm release candidate.
+- [ ] CI passes on the release PR.
+
+<!-- diff_report --><!-- /diff_report -->
+
+<!-- bundle_table --><!-- /bundle_table -->

.github/workflows/bundle_report.yml

@@ -1,21 +0,0 @@
-name: Bundle report
-on:
-  pull_request_target:
-    paths:
-      - 'src/**'
-      - '.github/workflows/bundle_report.yml'
-jobs:
-  bundle:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 12
-      - run: yarn
-      - run: yarn dist
-      - name: Reporting bundle sizes
-        run: script/bundle-size-report.js --all
-
-      - name: Reporting selector diffs
-        run: script/selector-diff-report

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ on:
   push:
     branches:
       - main
-  pull_request_target:
+  pull_request:
 jobs:
   stylelint:
     runs-on: ubuntu-latest
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
       - run: yarn
       - run: yarn dist
       - name: Lint source files
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
       - run: yarn
       - name: Lint workflow files
         run: yarn eslint
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
       - run: yarn
       - name: Jest
         run: yarn test

.github/workflows/deploy_preview.yml

@@ -1,8 +1,9 @@
 name: Deploy
 on:
-  pull_request_target:
+  push:
     branches-ignore:
-      - main
+      - 'main'
+      - 'dependabot/**'
     paths:
       - 'src/**'
       - 'docs/**'

.github/workflows/deploy_production.yml

@@ -2,7 +2,7 @@ name: Deploy
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
       - 'src/**'
       - 'docs/**'

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Install dependencies
         run: yarn

.github/workflows/release_canary.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Install dependencies
         run: yarn
@@ -56,7 +56,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output canary version number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v4.0.2
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)

.github/workflows/release_candidate.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Install dependencies
         run: yarn
@@ -42,7 +42,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output candidate version number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v4.0.2
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)

.github/workflows/triage.yml

@@ -1,55 +0,0 @@
-name: Triage
-on:
-  pull_request_target:
-    branches-ignore:
-      - 'dependabot/**'
-
-jobs:
-  label-release:
-    name: Semantic Version Label
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/github-script@v3
-        id: version-result
-        with:
-          github-token: "${{ secrets.GITHUB_TOKEN }}"
-          result-encoding: string
-          script: |
-            const diff_url = context.payload.pull_request.diff_url
-            const result = await github.request(diff_url)
-            const match = [...result.data.matchAll(/^\+['"]@primer\/css['"]:\s(patch|minor|major)/m)]
-            if (match && match[0]) {
-              return match[0][1]
-            }
-
-      - uses: actions/github-script@v3
-        env:
-          RELEASE: ${{ steps.version-result.outputs.result }}
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            if (process.env.RELEASE == 'undefined') { return }
-            const issue = await github.issues.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number
-            })
-            const currentLabels = issue.data.labels.map( l => l.name)
-            const newLabel = `${process.env.RELEASE} release`
-            if (!currentLabels.includes(newLabel)) {
-              const otherReleaseLabels = currentLabels.filter( l => l.endsWith(' release'))
-              if (otherReleaseLabels.length) {
-                github.issues.removeLabel({
-                  issue_number: context.issue.number,
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  name: [otherReleaseLabels]
-                })
-              }
-              github.issues.addLabels({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                labels: [newLabel]
-              })
-            }

.github/workflows/welcome.yml

@@ -0,0 +1,130 @@
+name: Welcome
+on:
+  pull_request:
+
+jobs:
+  release-template:
+    if: ${{ github.head_ref == 'changeset-release/main' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Get or Create Comment
+        uses: actions/github-script@v4.0.2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs')
+            const body = await fs.readFileSync('.github/release_template.md', 'utf8')
+            const result = await github.issues.listComments({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo
+            });
+            console.log(result.data)
+            const primerComments = result.data.filter(c => c.user.login == 'github-actions[bot]')
+            if (!primerComments.length) {
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: body.replace('{{PR_AUTHOR}}', context.payload.sender.login)
+              })
+            }
+
+  bundle-stats:
+    needs: release-template
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - run: yarn
+      - run: yarn pretest
+      - name: Reporting bundle sizes
+        uses: primer/comment-token-update@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_USER: github-actions[bot]
+        with:
+          comment-token: 'bundle_table'
+          script: |
+            bundles=$(script/bundle-size-report.js)
+            if [[ $bundles ]]; then
+              echo "### Bundles with a size change since [latest release](https://github.com/primer/css/releases/latest)"
+              echo ""
+              echo "$bundles"
+            fi
+
+      - name: Reporting selector diffs
+        uses: primer/comment-token-update@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_USER: github-actions[bot]
+        with:
+          comment-token: 'diff_report'
+          script: |
+            diff=$(script/selector-diff-report)
+            if [[ $diff ]]; then
+              echo "### Selectors added/removed since [latest release](https://github.com/primer/css/releases/latest)"
+              echo ""
+              echo "\`\`\`diff"
+              echo "$diff"
+              echo "\`\`\`"
+            fi
+
+  label-release:
+    name: Semantic Version Label
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v4.0.2
+        id: version-result
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+          result-encoding: string
+          script: |
+            const diff_url = context.payload.pull_request.diff_url
+            const result = await github.request(diff_url)
+            const match = [...result.data.matchAll(/^\+['"]@primer\/css['"]:\s(patch|minor|major)/m)]
+            if (match && match[0]) {
+              return match[0][1]
+            }
+
+      - uses: actions/github-script@v4.0.2
+        env:
+          RELEASE: ${{ steps.version-result.outputs.result }}
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            if (process.env.RELEASE == 'undefined') { return }
+            const issue = await github.issues.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number
+            })
+            const currentLabels = issue.data.labels.map( l => l.name)
+            const newLabel = `${process.env.RELEASE} release`
+            if (!currentLabels.includes(newLabel)) {
+              const otherReleaseLabels = currentLabels.filter( l => l.endsWith(' release'))
+              if (otherReleaseLabels.length) {
+                github.issues.removeLabel({
+                  issue_number: context.issue.number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  name: [otherReleaseLabels]
+                })
+              }
+              github.issues.addLabels({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                labels: [newLabel]
+              })
+            }

.node-version

@@ -0,0 +1 @@
+14.15.2

.nvmrc

@@ -0,0 +1 @@
+.node-version

CHANGELOG.md

@@ -1,5 +1,99 @@
 # @primer/css
 
+## 17.1.1
+
+### Patch Changes
+
+- [#1418](https://github.com/primer/css/pull/1418) [`a9a61ee6`](https://github.com/primer/css/commit/a9a61ee690f4fff3a7e2e932dc8da5e9cd6cf702) Thanks [@simurai](https://github.com/simurai)! - Undeprecate .css-truncate
+
+## 17.1.0
+
+### Minor Changes
+
+- [#1409](https://github.com/primer/css/pull/1409) [`49981dfc`](https://github.com/primer/css/commit/49981dfc29131e6ad25cef6538abd9308700b48a) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Adding new Layout component
+
+* [#1358](https://github.com/primer/css/pull/1358) [`6b51e877`](https://github.com/primer/css/commit/6b51e877bc3b1a1ae4925edc4fcb5d45907b110e) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding new .Truncate class and deprecating css-truncate
+
+### Patch Changes
+
+- [#1415](https://github.com/primer/css/pull/1415) [`fb6a7e3d`](https://github.com/primer/css/commit/fb6a7e3dc112fc637003ca13dca978e7d8a54d4c) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives@4.3.5
+
+## 17.0.3
+
+### Patch Changes
+
+- [#1410](https://github.com/primer/css/pull/1410) [`d5e425e4`](https://github.com/primer/css/commit/d5e425e40900102b5b728a516de71e4094b7e138) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives@4.3.4
+
+## 17.0.2
+
+### Patch Changes
+
+- [#1408](https://github.com/primer/css/pull/1408) [`1eea5575`](https://github.com/primer/css/commit/1eea557506241412de068c0f2570a0e9606fd6c2) Thanks [@colebemis](https://github.com/colebemis)! - Bump @primer/primitives version
+
+* [#1403](https://github.com/primer/css/pull/1403) [`5ef399cf`](https://github.com/primer/css/commit/5ef399cff004fc30d0b98750af889ffdc4bf8f3b) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Remove !important for base styles for body utilities
+
+## 17.0.1
+
+### Patch Changes
+
+- [#1391](https://github.com/primer/css/pull/1391) [`534c8f66`](https://github.com/primer/css/commit/534c8f66f5a433aaf6daa308e0354d8eeca25f3a) Thanks [@simurai](https://github.com/simurai)! - Improve focus state for .SideNav and .menu
+
+* [#1398](https://github.com/primer/css/pull/1398) [`5ef7bd6e`](https://github.com/primer/css/commit/5ef7bd6ef0eb43f2bb5765c0f3cfd30db3924ec4) Thanks [@colebemis](https://github.com/colebemis)! - Add experimental color variables. **Warning: Do not use these color variables**
+
+- [#1394](https://github.com/primer/css/pull/1394) [`42223f0b`](https://github.com/primer/css/commit/42223f0b219b6213e2d11f99988acdfd47ab9591) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Fix letter spacing for headers not being correctly overridden at break points
+
+## 17.0.0
+
+### Major Changes
+
+- [#1370](https://github.com/primer/css/pull/1370) [`cc0049c2`](https://github.com/primer/css/commit/cc0049c2ad1ad609dc672e12f751245fbecc5d65) Thanks [@simurai](https://github.com/simurai)! - Replace border-overlay with border-primary
+
+* [#1371](https://github.com/primer/css/pull/1371) [`0c6bfc22`](https://github.com/primer/css/commit/0c6bfc22b523545120bea39dc201760d8a9e8b01) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Deprecate bg-shade-gradient
+
+- [#1379](https://github.com/primer/css/pull/1379) [`22a98b5c`](https://github.com/primer/css/commit/22a98b5c87031584c5349f49835e013e8a7e460b) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Add new marketing type scale
+
+* [#1369](https://github.com/primer/css/pull/1369) [`2ae2ae57`](https://github.com/primer/css/commit/2ae2ae5795f68a6004fb4a14eb56bba41828173d) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Removing Inter font files and folder
+
+- [#1339](https://github.com/primer/css/pull/1339) [`0ca2648e`](https://github.com/primer/css/commit/0ca2648e5982f0d21137a556e083d77af33eee36) Thanks [@jonrohan](https://github.com/jonrohan)! - Changeset change supported browsers.
+
+* [#1373](https://github.com/primer/css/pull/1373) [`aeae963d`](https://github.com/primer/css/commit/aeae963d93e273f08fbf47d582316811bbd8eac5) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Remove redundant marketing layout selectors
+
+- [#1380](https://github.com/primer/css/pull/1380) [`4ac39740`](https://github.com/primer/css/commit/4ac39740f27842c625da084f1d03b8e2ec6084f8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: use size modifiers that don't look like breakpoints modifiers
+
+* [#1352](https://github.com/primer/css/pull/1352) [`b4950e39`](https://github.com/primer/css/commit/b4950e395867b558e63b5bb4d46d93f75f35e38e) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Update marketing button styles
+
+- [#1356](https://github.com/primer/css/pull/1356) [`3b7e5d8c`](https://github.com/primer/css/commit/3b7e5d8c0def7975cc6714abe4b60d8efc746f8f) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove dependency on primer/octicons and force overflow visible
+
+* [#1372](https://github.com/primer/css/pull/1372) [`e24b7cb0`](https://github.com/primer/css/commit/e24b7cb024ca2c6bb06cda92ccefa1aff3208131) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Merge overlapping marketing spacing utilities into primer core
+
+### Minor Changes
+
+- [#1357](https://github.com/primer/css/pull/1357) [`3dfb910f`](https://github.com/primer/css/commit/3dfb910fc39ae889fb4c2c3c783aead6ac768d0d) Thanks [@hpalacio](https://github.com/hpalacio)! - typography-base: process 'type' attribute of HTML <ol> tag
+
+### Patch Changes
+
+- [#1368](https://github.com/primer/css/pull/1368) [`95b9f0f0`](https://github.com/primer/css/commit/95b9f0f051bf34be5bcc60e2f2d29a262059c420) Thanks [@simurai](https://github.com/simurai)! - Use `--color-icon-secondary` for `.blankslate-icon`
+
+* [#1350](https://github.com/primer/css/pull/1350) [`2dbc6143`](https://github.com/primer/css/commit/2dbc6143a66b56b29e12d5ae3e7afeaed95373ab) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives
+
+- [#1385](https://github.com/primer/css/pull/1385) [`1cfff7a4`](https://github.com/primer/css/commit/1cfff7a4a39e5612c3f98357bfa2edc1460f2e04) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing typography: 64px → 68px for third size step
+
+* [#1382](https://github.com/primer/css/pull/1382) [`18bb377b`](https://github.com/primer/css/commit/18bb377bef8f65cc75cd1faea9b2264a4061cfd0) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: optimize body typography inheritance
+
+- [#1392](https://github.com/primer/css/pull/1392) [`0fea11a7`](https://github.com/primer/css/commit/0fea11a74b05196c17e2e300b66c93c24d6c9844) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Enable body content utilities to have their font-weight overwritten
+
+## 16.3.0
+
+### Minor Changes
+
+- [#1306](https://github.com/primer/css/pull/1306) [`5d42f1c5`](https://github.com/primer/css/commit/5d42f1c5c36d9732fd69541585a8d8ba4221b978) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding a min-height to input-sm
+
+### Patch Changes
+
+- [#1340](https://github.com/primer/css/pull/1340) [`8506c374`](https://github.com/primer/css/commit/8506c3747fc3d4bfa216e0fbb1d2835db4a9baf4) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives
+
+* [#1302](https://github.com/primer/css/pull/1302) [`90902e1a`](https://github.com/primer/css/commit/90902e1a6044f4b9fde049105f5aec7e09d52777) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving the /fonts/ folder to /src/fonts/
+
 ## 16.2.0
 
 ### Minor Changes

__tests__/css.test.js

@@ -9,6 +9,9 @@ const semver = require('semver')
 
 let selectorsDiff, variablesDiff, version
 
+// Because of a change in analyzer this was incorrectly in the list
+const variableAllowList = ['$marketing-all-spacers']
+
 beforeAll(async () => {
   selectorsDiff = getSelectorDiff()
   variablesDiff = getVariableDiff()
@@ -18,7 +21,7 @@ beforeAll(async () => {
 describe('deprecations', () => {
   it('A selector was marked as deprecated but not removed from the codebase', () => {
     const removed = selectorsDiff['removed']
-    const deprecations = getDeprecatedSelectors(version)
+    const deprecations = getDeprecatedSelectors(version.raw)
     if (deprecations.length) {
       // Selectors were marked to be deprecated in this version,
       // but were not removed from the codebase. Please remove these selectors.
@@ -28,16 +31,19 @@ describe('deprecations', () => {
 
   it('A selector was removed from the codebase but not added to upcoming major release deprecations file.', () => {
     const removedSelectors = selectorsDiff['removed']
-    const nextMajor = semver.inc(version, 'major')
+
+    if (version.minor !== 0 && version.patch !== 0) {
+      const nextMajor = semver.inc(version.raw, 'major')
       const deprecations = getDeprecatedSelectors(nextMajor)
       // Some classes were removed from the codebase, but not found
-    // in the next upcoming major release deprecation.json
+      // in the next upcoming major release deprecation.js
-    expect(deprecations).toEqual(expect.arrayContaining(removedSelectors))
+      expect(deprecations.sort()).toEqual(expect.arrayContaining(removedSelectors.sort())) // eslint-disable-line jest/no-conditional-expect
+    }
   })
 
   it('A variable was marked as deprecated but not removed from the codebase', () => {
     const removed = variablesDiff.removed
-    const deprecations = getDeprecatedVariables(version)
+    const deprecations = getDeprecatedVariables(version.raw)
     if (deprecations.length) {
       // Variables were marked to be deprecated in this version,
       // but were not removed from the codebase. Please remove these variables.
@@ -46,11 +52,13 @@ describe('deprecations', () => {
   })
 
   it('A variable was removed from the codebase and added to upcoming major release deprecations file.', () => {
-    const removed = variablesDiff.removed
+    const removed = variablesDiff.removed.filter(v => !variableAllowList.includes(v))
-    const nextMajor = semver.inc(version, 'major')
+    if (version.minor !== 0 && version.patch !== 0) {
+      const nextMajor = semver.inc(version.raw, 'major')
       const deprecations = getDeprecatedVariables(nextMajor)
       // Some variables were removed from the codebase, but not found
       // in the next upcoming major release deprecation.json
-    expect(deprecations).toEqual(expect.arrayContaining(removed))
+      expect(deprecations).toEqual(expect.arrayContaining(removed)) // eslint-disable-line jest/no-conditional-expect
+    }
   })
 })

__tests__/utils/css.js

@@ -1,10 +1,11 @@
 const {join} = require('path')
 const currentPath = join(__dirname, '../../')
 const lastPath = join(__dirname, '../../tmp/node_modules/@primer/css')
+const semver = require('semver')
 
 function diffLists(before, after) {
-  const added = after.filter(value => !before.includes(value))
+  const added = [...new Set(after.filter(value => !before.includes(value)))]
-  const removed = before.filter(value => !after.includes(value))
+  const removed = [...new Set(before.filter(value => !after.includes(value)))]
   return {
     changed: added.length + removed.length,
     added,
@@ -24,16 +25,18 @@ function getVariables(versionPath) {
 
 function getCurrentVersion() {
   const pkg = require(join(currentPath, './package.json'))
-  return pkg.version
+  return semver.parse(pkg.version)
 }
 
 function getDeprecatedSelectors(version) {
+  if (getCurrentVersion().raw === version) return []
   let deprecations = require(join(currentPath, './dist/deprecations.json'))
   deprecations = deprecations.versions[version] || []
   return deprecations.reduce((list, deprecation) => list.concat(deprecation.selectors), []).filter(v => v)
 }
 
 function getDeprecatedVariables(version) {
+  if (getCurrentVersion().raw === version) return []
   let deprecations = require(join(currentPath, './dist/deprecations.json'))
   deprecations = deprecations.versions[version] || []
   return deprecations.reduce((list, deprecation) => list.concat(deprecation.variables), []).filter(v => v)

deprecations.js

@@ -5,6 +5,84 @@
  */
 const versionDeprecations = {
   '17.0.0': [
+    {
+      variables: ['$h000-size', '$h000-size-mobile'],
+      message: `This variable is deprecated, please refer to the Marketing Typography documentation.`
+    },
+    {
+      selectors: ['.h000-mktg', '.h00-mktg', '.lead-mktg'],
+      message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
+    },
+    {
+      selectors: [
+        '.p-7',
+        '.p-8',
+        '.p-9',
+        '.p-10',
+        '.p-11',
+        '.p-12',
+        '.p-sm-7',
+        '.p-sm-8',
+        '.p-sm-9',
+        '.p-sm-10',
+        '.p-sm-11',
+        '.p-sm-12',
+        '.p-md-7',
+        '.p-md-8',
+        '.p-md-9',
+        '.p-md-10',
+        '.p-md-11',
+        '.p-md-12',
+        '.p-lg-7',
+        '.p-lg-8',
+        '.p-lg-9',
+        '.p-lg-10',
+        '.p-lg-11',
+        '.p-lg-12',
+        '.p-xl-7',
+        '.p-xl-8',
+        '.p-xl-9',
+        '.p-xl-10',
+        '.p-xl-11',
+        '.p-xl-12'
+      ],
+      message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
+    },
+    {
+      selectors: [
+        '.top-n0',
+        '.right-n0',
+        '.bottom-n0',
+        '.left-n0',
+        '.top-md-n0',
+        '.right-md-n0',
+        '.bottom-md-n0',
+        '.left-md-n0',
+        '.top-lg-n0',
+        '.right-lg-n0',
+        '.bottom-lg-n0',
+        '.left-lg-n0',
+        '.mt-n0',
+        '.mb-n0',
+        '.mt-sm-n0',
+        '.mb-sm-n0',
+        '.mt-md-n0',
+        '.mb-md-n0',
+        '.mt-lg-n0',
+        '.mb-lg-n0',
+        '.mt-xl-n0',
+        '.mb-xl-n0'
+      ],
+      message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
+    },
+    {
+      selectors: ['.bg-shade-gradient'],
+      message: `This selector is deprecated, please use "color-bg-secondary" instead of "bg-shade-gradient".`
+    },
+    {
+      selectors: ['.color-border-overlay'],
+      message: `Please use the ".color-border-primary" class instead of ".color-border-overlay".`
+    },
     {
       selectors: [':-ms-input-placeholder'],
       message: 'Browserslist update to match github has removed the need for this pseudoselector'

docs/content/components/buttons.md

@@ -105,7 +105,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 
 ```html live
 <div class="f3">
-  <button class="btn btn-large btn-outline-blue mr-2" type="button">Large button button</button>
+  <button class="btn btn-large btn-outline mr-2" type="button">Large button button</button>
   <a class="btn btn-large" href="#url" role="button">Large link button</a>
 </div>
 ```

docs/content/components/layout.md

@@ -0,0 +1,230 @@
+---
+title: Layout
+path: components/layout
+status: Experimental
+source: 'https://github.com/primer/css/tree/main/src/layout/layout.scss'
+bundle: layout
+---
+
+
+Build responsive-friendly page layouts with 2 columns.
+
+Use with .container-xx classes to limit the overall layout structure size.
+
+## Elements
+
+- `Layout-main`
+- `Layout-sidebar`
+- `Layout-divider`
+- `Layout-main-centered-md`
+- `Layout-main-centered-lg`
+- `Layout-main-centered-xl`
+
+Use `Layout-main-centered-xx` to wrap `container-xx` elements inside
+`Layout-main` so the content remains centered on the screen regardless
+of the sidebar position.
+
+## Default
+
+```html live
+<div class="Layout">
+  <div class="Layout-main border">
+    .Layout-main
+  </div>
+
+  <div class="Layout-sidebar border">
+    .Layout-sidebar
+  </div>
+</div>
+```
+
+### Dividers
+
+Add `Layout--divided` to the `Layout` to show the dividers.
+
+```html live
+<div class="Layout Layout--divided">
+  <div class="Layout-main border">main content</div>
+  <div class="Layout-divider"></div>
+  <div class="Layout-sidebar border">divider shown</div>
+</div>
+<div class="Layout">
+  <div class="Layout-main border">main content</div>
+  <div class="Layout-divider"></div>
+  <div class="Layout-sidebar border">divider hidden</div>
+</div>
+```
+
+### Centered content
+
+```html live
+<div class="Layout">
+  <div class="Layout-main border">
+    <div class="Layout-main-centered-md">
+      <div class="container-md border color-border-info">
+        centered md
+      </div>
+    </div>
+  </div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout">
+  <div class="Layout-main border">
+    <div class="Layout-main-centered-lg">
+      <div class="container-lg border color-border-info">
+        centered lg
+      </div>
+    </div>
+  </div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout">
+  <div class="Layout-main border">
+    <div class="Layout-main-centered-xl">
+      <div class="container-xl border color-border-info">
+        centered xl
+      </div>
+    </div>
+  </div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+```
+
+## Modifiers
+
+### Sidebar sizing
+
+- Default: [md: 256px, lg: 296px, xl: 320px]
+- `Layout--sidebar-narrow` [md: 240px, lg: 256px, xl: 296px]
+- `Layout--sidebar-wide` [md: 296px, lg: 320px, xl: 344px]
+
+```html live
+<div class="Layout Layout--sidebar-narrow">
+  <div class="Layout-main border">
+    Layout--sidebar-narrow
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+<div class="Layout Layout--sidebar-wide">
+  <div class="Layout-main border">
+    Layout--sidebar-wide
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+```
+
+### Column gutter
+
+- Default: [md: 16px, lg: 24px]
+- `Layout--gutter-none`: 0px
+- `Layout--gutter-condensed` 16px
+- `Layout--gutter-spacious` [md: 16px, lg: 32px, xl: 40px]
+
+```html live
+<div class="Layout Layout--gutter-none">
+  <div class="Layout-main border">
+    Layout--gutter-none
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+<div class="Layout Layout--gutter-condensed">
+  <div class="Layout-main border">
+    Layout--gutter-condensed
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+<div class="Layout">
+  <div class="Layout-main border">
+    Default
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+<div class="Layout Layout--gutter-spacious">
+  <div class="Layout-main border">
+    Layout--gutter-spacious
+  </div>
+
+  <div class="Layout-sidebar border">
+    sidebar
+  </div>
+</div>
+```
+
+### Sidebar positioning
+
+- `Layout--sidebarPosition-start` (default): sidebar to the left
+- `Layout--sidebarPosition-end`: sidebar to the right
+
+```html live
+<div class="Layout Layout--sidebarPosition-start">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout Layout--sidebarPosition-end">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+```
+
+### Layout stacking
+
+- Default: stacks when container is `sm`.
+- `Layout--flowRow-until-md`: stacks when container is `md`.
+- `Layout--flowRow-until-lg`: stacks when container is `lg`.
+
+```html live
+<div class="Layout Layout--flowRow-until-md">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout Layout--flowRow-until-lg">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+```
+
+### Nesting Layouts
+
+It is possible to nest `Layout` components to generate 3-column layouts.
+
+```html live
+<div class="Layout">
+  <div class="Layout-main ">
+    <div class="Layout Layout--sidebarPosition-end Layout--sidebar-narrow">
+      <div class="Layout-main border">main content</div>
+      <div class="Layout-sidebar border">metadata sidebar</div>
+    </div>
+  </div>
+  <div class="Layout-sidebar border">default sidebar</div>
+</div>
+<div class="Layout">
+  <div class="Layout-main ">
+    <div class="Layout Layout--sidebarPosition-end Layout--flowRow-until-lg Layout--sidebar-narrow">
+      <div class="Layout-main border">main content</div>
+      <div class="Layout-sidebar border">metadata sidebar</div>
+    </div>
+  </div>
+  <div class="Layout-sidebar border">default sidebar</div>
+</div>
+```
+
+## Accessibility and keyboard navigation
+
+Keyboard navigation follows the markup order. Decide carefully how the
+focus order should be be by deciding whether `Layout-main` or `Layout-sidebar`
+comes first in code. The code order won’t affect the visual position.

docs/content/components/links.md

@@ -10,32 +10,33 @@ bundle: links
   Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
 </Note>
 
-By default `<a>` elements already use the right link color and apply an underline on hover.
+By default `<a>` elements already use the right link color and apply an underline on hover. So in most cases the `.Link` class is not really needed.
 
 ```html live
-Some text with a default <a href="#url">link</a>
+Some text with a <a href="#url">link</a>
-```
+Some text with a <a href="#url" class="Link">link</a>
-
-If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class.
-
-```html live
-Some text with a <span class="Link">span that behaves like a link</span>
 ```
 
 If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
 
+## Primary link
+
 Use `.Link--primary` to turn the link color to blue only on hover.
 
 ```html live
 <p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
 ```
 
+## Secondary link
+
 Use `.Link--secondary` for a more subtle link color that turns blue on hover.
 
 ```html live
 Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
 ```
 
+## Muted link
+
 Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
 
 ```html live
@@ -43,6 +44,8 @@ Use `.Link--muted` also removes the underline on hover. Tip: You can also use th
 <p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
 ```
 
+## On hover link
+
 Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
 
 ```html live
@@ -51,6 +54,18 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove
 </a>
 ```
 
+## Nested link
+
+The `.Link` class can be nested inside an `<a>` element if only part of it should be styled like a link.
+
+```html live
+<a class="color-text-primary no-underline" href="#url">
+  A nested <span class="Link">Link</span>
+</a>
+```
+
+## Link and color utilities
+
 Link classes in combination with [color utilities](../utilities/colors) lets you colorize information separately inside of a link but have all of the link turn into one color on hover.
 
 ```html live

docs/content/components/marketing-buttons.md

@@ -17,6 +17,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
 ```html live
 <button class="btn-mktg mr-3" type="button">Learn more</button>
 <button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
 <button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
 <div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
   <button class="btn-mktg btn-transparent" type="button">Learn more</button>
@@ -25,14 +26,21 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
 
 ## Sizes
 
-Available in two sizes, marketing buttons have a default size and a large size.
+Available in three sizes, marketing buttons have a default size and a large size.
 
 ```html live
+<button class="btn-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-sm-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg btn-sm-mktg mr-3" type="button">Contact sales</button>
+<button class="btn-mktg btn-outline-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<hr>
 <button class="btn-mktg mr-2" type="button">Learn more</button>
 <button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
 <button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
 <hr>
-<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
-<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-primary-mktg btn-lg-mktg mr-2" type="button">Sign up</button>
-<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-enterprise-mktg btn-lg-mktg mr-3" type="button">Contact sales</button>
+<button class="btn-mktg btn-outline-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
 ```

docs/content/components/progress.md

@@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
 ```html live
 <span class="text-small text-gray mr-2">4 of 16</span>
 <span class="Progress d-inline-flex" style="width: 160px">
-  <div class="Progress-item color-bg-success-inverse" style="width: 25%"></div>
+  <span class="Progress-item color-bg-success-inverse" style="width: 25%"></span>
 </span>
 ```
 

docs/content/components/truncate.md

@@ -1,53 +1,87 @@
 ---
 title: Truncate
 path: components/truncate
-status: Stable
+status: Experimental
 source: 'https://github.com/primer/css/tree/main/src/truncate'
 bundle: truncate
 ---
 
-The `css-truncate` class will shorten text with an ellipsis.
+When text reaches lengths larger than existing container, shorten with ellipses.
 
-## Truncate overflow
+## Truncate
 
-Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text that overflows from wrapping.
+Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text.
 
 ```html live
-<div class="col-3">
+<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
-  <div class="css-truncate css-truncate-overflow border p-3">
+  <span class="Truncate">
-    branch-name-that-is-really-long
+    <span class="Truncate-text">branch-name-that-is-really-long</span>
-  </div>
+  </span>
-  <div class="border p-3 mt-3">
-    branch-name-that-is-really-long
-  </div>
 </div>
 ```
 
-## Truncate target
+## Truncate multiple items
 
-Combine the `css-truncate` and `css-truncate-target` classes for inline (or inline-block) elements with a fixed maximum width (default: `125px`).
+You can add multiple `.Truncate-text` items in the same row and they will truncate evenly. If you want to make one of the items the primary text that doesn't truncate first, add the class `.Truncate-text--primary` class.
 
 ```html live
-Some text with a
+<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
-<strong class="css-truncate css-truncate-target">
+  <span class="Truncate">
-  branch-name-that-is-really-long
+    <span class="Truncate-text">really-long-repository-owner-name</span>
-</strong>
+    <span class="Truncate-text Truncate-text--primary text-bold">
+      <span class="text-normal">/</span> really-long-repository-name
+    </span>
+  </span>
+</div>
 ```
 
-You can override the maximum width of the truncated text with an inline `style` attribute:
+`.Truncate-text--primary` doesn't need to be the last item in the list or only have one instance. Consider this breadcrumb example where we want to highlight the Repository name and the Issue title. The rest of the breadcrumb will truncate and leave the name and title untruncated until we run out of space.
 
 ```html live
-Some text with a
+<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
-<strong class="css-truncate css-truncate-target" style="max-width: 180px">
+  <span class="Truncate">
-  branch-name-that-is-really-long
+    <span class="Truncate-text">primer</span>
-</strong>
+    <span class="Truncate-text Truncate-text--primary">/ css</span>
+    <span class="Truncate-text">/ Issues</span>
+    <span class="Truncate-text">/ #123 —</span>
+    <span class="Truncate-text Truncate-text--primary">
+      Visual bug on primer.style found in lists
+    </span>
+  </span>
+</div>
 ```
 
-You can reveal the entire string on hover with the addition of `.expandable`.
+## Expand on hover or focus
+
+When there are multiple items in a list, you can add the `.Truncate-text--expandable` class to the `.Truncate-text` items and they will grow when `:hover` or `:focus` state is applied to them.
 
 ```html live
-Some text with a
+<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
-<strong class="css-truncate css-truncate-target expandable">
+  <span class="Truncate">
-  branch-name-that-is-really-long
+    <a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
-</strong>
+    <a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
+    <a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
+    <a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
+  </span>
+</div>
+```
+
+## Custom max widths
+
+It is recommended to use `max-width` as an inline style when you would like to have control over how far something can grow, even when there's enough space available.
+
+```html live
+<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
+  <div class="Truncate">
+    <span class="Truncate-text Truncate-text--expandable" style="max-width: 300px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
+  </div>
+  <br>
+  <div class="Truncate">
+    <span class="Truncate-text Truncate-text--expandable" style="max-width: 200px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
+  </div>
+  <br>
+  <div class="Truncate">
+    <span class="Truncate-text Truncate-text--expandable" style="max-width: 100px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
+  </div>
+</div>
 ```

docs/content/support/marketing-variables.md

@@ -1,24 +0,0 @@
----
-title: Marketing support
-path: support/marketing-variables
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/marketing/support'
-bundle: marketing-support
----
-
-
-### Extended spacing scale
-This module extends the `primer-core` spacing scale for marketing site needs. These are useful for achieving bigger vertical spacing between sections on marketing sites.
-
-Starting where the `primer-core` spacing scale ends at spacer 6, the marketing scale first steps up with `8px` for spacer 7 then steps in increments of `16px` from spacer 8 up to 12.
-
-| Scale | Value |
-|-------|-------|
-| 7     | 48    |
-| 8     | 64    |
-| 9     | 80    |
-| 10    | 96    |
-| 11    | 112   |
-| 12    | 128   |
-
-See [primer-marketing-support](https://npm.im/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).

docs/content/support/spacing.md

@@ -24,7 +24,20 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
 
 These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities.
 
-See [primer-marketing-support](/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
+### Extended spacing scale
+
+These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with `8px` for spacer 7, then steps in increments of `16px` from spacer 8 up to 12.
+
+| Variable     | Scale | Value |
+| ------------ |-------|-------|
+| `$spacer-7`  | 7     | 48px  |
+| `$spacer-8`  | 8     | 64px  |
+| `$spacer-9`  | 9     | 80px  |
+| `$spacer-10` | 10    | 96px  |
+| `$spacer-11` | 11    | 112px |
+| `$spacer-12` | 12    | 128px |
+
+The extended spacing scale is used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).
 
 ## Em-based spacing
 

docs/content/support/v16-migration.mdx

@@ -24,7 +24,7 @@ Most components don't need to be updated and should work without making changes.
 | `.Counter--gray`                                             | `.Counter--primary`   |
 | `.Counter--gray-light`                                       | `.Counter--secondary` |
 
-### Dropdwon
+### Dropdown
 
 | [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
 | ---------------------------------------------------------- | ----- |
@@ -100,7 +100,6 @@ See [color utility classes](/utilities/colors) for a list of all the functional
 | `.border-yellow`                                                           | `.color-border-warning`   |
 | `.border-red`                                                              | `.color-border-danger`    |
 | `.border-white`                                                            | `.color-border-inverse`   |
-| n/a                                                                        | `.color-border-overlay`   |
 | `.border-gray-darker`                                                      | n/a                       |
 | `.border-blue-light`                                                       | n/a                       |
 | `.border-red-light`                                                        | n/a                       |
@@ -217,7 +216,6 @@ See [color system](/support/color-system) for a list of all the functional CSS v
 | `$border-green` (`$green-400`)                        | `var(--color-border-success)`   |
 | `$border-red` (`$red-500`)                            | `var(--color-border-danger)`    |
 | `$border-yellow` (`$yellow-600`)                      | `var(--color-border-warning)`   |
-| n/a                                                   | `var(--color-border-overlay)`   |
 | `$border-gray-darker` (`$gray-700`)                   | n/a                             |
 | `$border-blue-light` (`$blue-200`)                    | n/a                             |
 | `$border-red-light` (`$red-300`)                      | n/a                             |

docs/content/utilities/margin.md

@@ -9,7 +9,6 @@ bundle: utilities
 Margin utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
 
 
-
 ## Naming convention
 
 Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
@@ -31,7 +30,12 @@ Since margin utilities have many variations and will be used in many places, we
 | 4   | 24px  |
 | 5   | 32px  |
 | 6   | 40px  |
-
+| 7   | 48px  |
+| 8   | 64px  |
+| 9   | 80px  |
+| 10  | 96px  |
+| 11  | 112px |
+| 12  | 128px |
 
 ## Uniform margins
 
@@ -39,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
 
 ```html live
 <div class="d-flex flex-items-baseline flex-justify-around">
-  <div class="bg-yellow"><div class="m-0 p-1 bg-gray">.m-0</div></div>
+  <div class="bg-yellow"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
-  <div class="bg-yellow"><div class="m-1 p-1 bg-gray">.m-1</div></div>
+  <div class="bg-yellow"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
-  <div class="bg-yellow"><div class="m-2 p-1 bg-gray">.m-2</div></div>
+  <div class="bg-yellow"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
-  <div class="bg-yellow"><div class="m-3 p-1 bg-gray">.m-3</div></div>
+  <div class="bg-yellow"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
-  <div class="bg-yellow"><div class="m-4 p-1 bg-gray">.m-4</div></div>
+  <div class="bg-yellow"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
-  <div class="bg-yellow"><div class="m-5 p-1 bg-gray">.m-5</div></div>
+  <div class="bg-yellow"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
-  <div class="bg-yellow"><div class="m-6 p-1 bg-gray">.m-6</div></div>
+  <div class="bg-yellow"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
 </div>
 ```
 
@@ -55,22 +59,35 @@ Use directional utilities to apply margin to an individual side, or the X and Y
 
 ```html live
 <div class="d-flex flex-items-baseline flex-justify-around">
-  <div class="bg-yellow"><div class="mt-3 p-1 bg-gray">.mt-3</div></div>
+  <div class="bg-yellow"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
-  <div class="bg-yellow"><div class="mr-3 p-1 bg-gray">.mr-3</div></div>
+  <div class="bg-yellow"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
-  <div class="bg-yellow"><div class="mb-3 p-1 bg-gray">.mb-3</div></div>
+  <div class="bg-yellow"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
-  <div class="bg-yellow"><div class="ml-3 p-1 bg-gray">.ml-3</div></div>
+  <div class="bg-yellow"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
-  <div class="bg-yellow"><div class="mx-3 p-1 bg-gray">.mx-3</div></div>
+  <div class="bg-yellow"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
-  <div class="bg-yellow"><div class="my-3 p-1 bg-gray">.my-3</div></div>
+  <div class="bg-yellow"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
 </div>
 ```
 
+## Extended vertical margins
+
+The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
+
+```html live
+<div class="bg-yellow d-inline-block"><div class="mt-7  p-1 color-bg-secondary">.mb-7</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-8  p-1 color-bg-secondary">.mb-8</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-9  p-1 color-bg-secondary">.mb-9</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
+```
+
 ## Center elements
 
 Use `mx-auto`to center block elements with a set width.
 
 ```html live
 <div class="bg-yellow">
-  <div class="mx-auto bg-gray text-center" style="max-width: 500px;">.mx-auto</div>
+  <div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
 </div>
 ```
 
@@ -78,8 +95,8 @@ Use `mx-auto`to center block elements with a set width.
 Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
 
 ```html live
-<div class="bg-yellow border">
+<div class="color-bg-warning border">
-  <p class="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
+  <p class="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
 </div>
 ```
 
@@ -88,8 +105,8 @@ Reset margins built into typography elements or other components with `m-0`, `mt
 All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html live
-<div class="bg-yellow d-inline-block">
+<div class="color-bg-warning d-inline-block">
-  <div class="mx-sm-2 mx-md-4 bg-gray p-1">
+  <div class="mx-sm-2 mx-md-4 color-bg-secondary p-1">
     .mx-sm-2 .mx-md-4
   </div>
 </div>
@@ -97,14 +114,28 @@ All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints)
 
 ## Negative margins
 
-You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
+You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
 
 ```html live
 <div class="d-flex flex-justify-center">
-  <div class="bg-yellow">
+  <div class="color-bg-warning">
-    <div class="m-3 ml-n4 ml-md-n6 border-left border-red bg-gray p-2">
+    <div class="m-3 ml-n4 ml-md-n6 border-left border-red color-bg-secondary p-2">
       .m-3 .ml-n4 .ml-md-n6
     </div>
   </div>
 </div>
 ```
+
+## Extended negative margins
+
+You can use the extended spacing scale for `top` and `bottom` margins, ranging from `1` to `12`.
+
+```html live
+<div class="d-flex flex-justify-center">
+  <div class="py-6 px-3 color-bg-warning">
+    <div class="mt-n8 border-left border-red color-bg-tertiary p-2">
+      .mt-n8
+    </div>
+  </div>
+</div>
+```

docs/content/utilities/marketing-layout.md

@@ -29,7 +29,7 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
 
 ## Negative offset columns
 
-Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
+Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/spacing/#extended-spacing-scale).
 
 ```html live
 <div class="mx-auto border" style="width: 300px">

docs/content/utilities/marketing-margin.md

@@ -1,22 +0,0 @@
----
-title: Marketing margin
-sort_title: Margin Marketing
-path: utilities/marketing-margin
-status: Stable
-status_issue: 'https://github.com/github/design-systems/issues/378'
-source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/margin.scss'
-bundle: marketing-utilities
----
-
-Marketing margin utilities extend [core margin utilities](/utilities/margin). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`.
-
-**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
-
-```html live
-  <div class="bg-yellow d-inline-block"><div class="mt-7  p-1 bg-gray">.mb-7</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-8  p-1 bg-gray">.mb-8</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-9  p-1 bg-gray">.mb-9</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-10 p-1 bg-gray">.mb-10</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-11 p-1 bg-gray">.mb-11</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-12 p-1 bg-gray">.mb-12</div></div>
-```

docs/content/utilities/marketing-padding.md

@@ -1,20 +0,0 @@
----
-title: Marketing padding
-sort_title: Padding Marketing
-path: utilities/marketing-padding
-status: Stable
-status_issue: 'https://github.com/github/design-systems/issues/378'
-source: 'https://github.com/primer/css/tree/main/src/marketing/utilities/padding.scss'
-bundle: marketing-utilities
----
-
-Marketing padding utilities extend [core padding utilities](/utilities/padding). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`. All directions and their responsive variants are supported, except for `px`.
-
-```html live
-<div class="pt-7  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
-<div class="pt-8  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
-<div class="pt-9  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
-<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
-<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
-<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
-```

docs/content/utilities/marketing-type.md

@@ -8,31 +8,45 @@ bundle: marketing-type
 
 The typography for our marketing pages differs from Primer CSS's core—it is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/main/src/marketing/support/variables.scss).
 
-## Heading Utilities
+## Heading utilities
 
-Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
+Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
 
 ```html live title="Heading Utilities"
-<p class="h000-mktg">Heading 000</p>
+<p class="h0-mktg">This is a heading 0</p>
-<p class="h00-mktg">Heading 00</p>
+<p class="h1-mktg">This is a heading 1</p>
-<p class="h0-mktg">Heading 0</p>
+<p class="h2-mktg">This is a heading 2</p>
-<p class="h1-mktg">Heading 1</p>
+<p class="h3-mktg">This is a heading 3</p>
-<p class="h2-mktg">Heading 2</p>
+<p class="h4-mktg">This is a heading 4</p>
-<p class="h3-mktg">Heading 3</p>
+<p class="h5-mktg">This is a heading 5</p>
-<p class="h4-mktg">Heading 4</p>
+<p class="h6-mktg">This is a heading 6</p>
-<p class="h5-mktg">Heading 5</p>
-<p class="h6-mktg">Heading 6</p>
 ```
 
-## Typographic Utilities
+## Body content utilities
+
+Use `.f0-mktg` – `.f6-mktg` to change an element's body font, size, and weight on marketing pages.
+
+```html live title="Heading Utilities"
+<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+
+<p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
+```
+
+
+## Typographic utilities
 
 These utilities are meant to be used in addition to Primer CSS's core utilities.
 
 ```html live title="Typographic Utilities"
-<p class="lead-mktg text-gray">
-  I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round
-  prosciutto hamburger porchetta sausage alcatra tail.
-</p>
-
 <p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
 ```

docs/content/utilities/padding.md

@@ -30,6 +30,12 @@ Since padding utilities have many variations and will be used in many places, we
 | 4 | 24px |
 | 5 | 32px |
 | 6 | 40px |
+| 7   | 48px  |
+| 8   | 64px  |
+| 9   | 80px  |
+| 10  | 96px  |
+| 11  | 112px |
+| 12  | 128px |
 
 _**Note:** The blue in the examples below represents the element, and the green represents the padding._
 
@@ -60,6 +66,20 @@ Use directional utilities to apply padding to an individual side, or the X and Y
 <div class="px-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.px-3</div></div>
 ```
 
+## Extended directional padding
+
+The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
+
+```html live
+<div class="pt-7  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
+<div class="pt-8  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
+<div class="pt-9  mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
+<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
+<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
+<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
+```
+
+
 ## Responsive padding
 
 All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.

docs/package.json

@@ -15,25 +15,31 @@
     "@primer/gatsby-theme-doctocat": "^1.6.0",
     "@primer/octicons": "^11.0.0",
     "@primer/octicons-react": "^11.0.0",
-    "@svgr/webpack": "^4.3.2",
+    "@primer/primitives": "4.2.0",
-    "autoprefixer": "^9.6.1",
+    "@svgr/webpack": "5.5.0",
-    "babel-preset-gatsby": "^0.5.10",
+    "autoprefixer": "10.2.5",
+    "babel-preset-gatsby": "^1.2.0",
     "chroma-js": "^2.0.6",
     "core-js": "^3.6.5",
-    "gatsby": "^2.24.62",
+    "gatsby": "2.32.12",
     "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-sass": "^2.3.13",
+    "gatsby-plugin-sass": "3.2.0",
-    "gatsby-plugin-svgr": "^2.0.2",
+    "gatsby-plugin-svgr": "2.1.0",
-    "postcss-loader": "^3.0.0",
+    "path": "0.12.7",
-    "postcss-node-sass": "^2.1.8",
+    "postcss": "8.2.10",
-    "postcss-scss": "^2.0.0",
+    "postcss-import": "14.0.1",
-    "primer-colors": "^1.0.1",
+    "postcss-load-config": "3.0.1",
+    "postcss-loader": "4.2.0",
+    "postcss-node-sass": "3.1.0",
+    "postcss-scss": "3.0.5",
+    "postcss-simple-vars": "6.0.3",
     "prop-types": "^15.7.2",
-    "raw-loader": "^3.1.0",
+    "raw-loader": "^4.0.2",
     "react": "^16.13.1",
     "react-bodymovin": "^2.0.0",
     "react-dom": "^16.13.1",
     "react-frame-component": "^4.1.1",
+    "sass-loader": "10.1.1",
     "styled-components": "^4.3.2",
     "title-case": "^2.1.1"
   },

docs/postcss.config.js

@@ -1,12 +1,14 @@
 // This config file is necessary to get postcss-loader to work in
 // ./src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js.
+const path = require('path')
+
 module.exports = {
   parser: 'postcss-scss',
-  plugins: {
+  plugins: [
-    'postcss-node-sass': {
+    require('postcss-node-sass')({
-      includePaths: ['node_modules'],
+      includePaths: [path.join(__dirname, 'node_modules')],
       outputStyle: 'compressed'
-    },
+    }),
-    autoprefixer: {}
+    require('autoprefixer')
-  }
+  ]
 }

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -16,8 +16,6 @@
       url: /support/spacing
     - title: Typography
       url: /support/typography
-    - title: Marketing support
-      url: /support/marketing-variables
     - title: Variables
       url: /support/variables
 - title: Utilities
@@ -41,14 +39,10 @@
       url: /utilities/marketing-layout
     - title: Margin
       url: /utilities/margin
-    - title: Marketing margin
-      url: /utilities/marketing-margin
     - title: Marketing filters
       url: /utilities/marketing-filters
     - title: Padding
       url: /utilities/padding
-    - title: Marketing padding
-      url: /utilities/marketing-padding
     - title: Typography
       url: /utilities/typography
     - title: Marketing typography
@@ -89,6 +83,8 @@
       url: /components/header
     - title: Labels
       url: /components/labels
+    - title: Layout
+      url: /components/layout
     - title: Links
       url: /components/links
     - title: Loaders

docs/src/variables.js

@@ -114,7 +114,6 @@ function VariablesDetails({variablesByFile, ...props}) {
           <tr>
             <th>Name</th>
             <th>Value</th>
-            <th>Aliases</th>
           </tr>
         </thead>
         <tbody>
@@ -139,9 +138,6 @@ function VariablesDetails({variablesByFile, ...props}) {
                 <Swatch value={computed} mr={2} />
                 <Mono nowrap>{computed}</Mono>
               </td>
-              <td>
-                <RefList refs={refs} />
-              </td>
             </tr>
           ))}
         </tbody>
@@ -172,16 +168,6 @@ Swatch.defaultProps = {
   size: '1em'
 }
 
-function RefList({refs}) {
-  const last = refs.length - 1
-  return refs.map((ref, i) => [
-    <Link href={`#${ref}`} key={ref}>
-      <Mono nowrap>{ref}</Mono>
-    </Link>,
-    i < last ? ', ' : ''
-  ])
-}
-
 function DeprecationFlag({variable, ...rest}) {
   const deprecations = useDeprecations()
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "16.2.0",
+  "version": "17.1.1",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -23,48 +23,43 @@
     "stylelint": "stylelint --quiet src",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
-    "start": "npm run dev",
+    "start": "yarn dev",
-    "dev": "cd docs && npm install && npm run develop",
+    "dev": "cd docs && yarn && yarn develop",
     "pretest": "yarn dist && script/pretest",
     "test": "jest",
     "release": "changeset publish"
   },
   "dependencies": {
-    "@primer/octicons": "13.0.0",
+    "@primer/primitives": "4.3.5"
-    "@primer/primitives": "4.2.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.3.0",
+    "@changesets/changelog-github": "0.4.0",
-    "@changesets/cli": "^2.14.1",
+    "@changesets/cli": "2.16.0",
-    "@github/prettier-config": "^0.0.4",
+    "@github/prettier-config": "0.0.4",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "10.2.5",
-    "colorette": "^1.2.1",
+    "cssstats": "4.0.2",
-    "cssstats": "^4.0.2",
+    "eslint": "7.27.0",
-    "eslint": "^7.23.0",
+    "eslint-plugin-github": "4.1.3",
-    "eslint-plugin-github": "^4.1.3",
+    "eslint-plugin-jest": "24.3.6",
-    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "filesize": "6.3.0",
-    "filesize": "^6.1.0",
+    "front-matter": "4.0.2",
-    "front-matter": "^4.0.2",
+    "fs-extra": "10.0.0",
-    "fs-extra": "^9.1.0",
+    "globby": "11.0.3",
-    "globby": "^11.0.3",
+    "jest": "26.6.3",
-    "jest": "^26.6.3",
+    "js-yaml": "4.1.0",
-    "js-yaml": "^4.0.0",
+    "postcss": "8.3.0",
-    "minimist": "^1.2.3",
+    "postcss-import": "14.0.2",
-    "node-fetch": "^2.6.1",
+    "postcss-load-config": "3.0.1",
-    "postcss": "^8.2.9",
+    "postcss-node-sass": "3.1.0",
-    "postcss-import": "^12.0.1",
+    "postcss-scss": "3.0.5",
-    "postcss-load-config": "^3.0.1",
+    "postcss-simple-vars": "6.0.3",
-    "postcss-loader": "^3.0.0",
+    "prettier": "2.3.0",
-    "postcss-node-sass": "^2.1.8",
+    "semver": "7.3.5",
-    "postcss-scss": "^3.0.5",
+    "stylelint": "13.13.1",
-    "postcss-value-parser": "^4.1.0",
+    "stylelint-config-primer": "11.0.1",
-    "prettier": "2.2.1",
+    "stylelint-scss": "3.19.0",
-    "semver": "^5.7.1",
+    "table": "6.7.1"
-    "stylelint": "^13.12.0",
-    "stylelint-config-primer": "^11.0.1",
-    "stylelint-scss": "^3.12.0",
-    "table": "^5.2.3"
   },
   "jest": {
     "testEnvironment": "node",
@@ -74,12 +69,13 @@
     ]
   },
   "browserslist": [
-    "> 5%",
+    "last 10 Chrome versions",
-    "last 2 firefox versions",
+    "last 4 Firefox versions",
-    "last 2 chrome versions",
+    "last 3 Safari versions",
-    "last 2 safari versions",
+    "not Safari 12",
-    "last 2 edge versions",
+    "last 4 Edge versions",
-    "ie 11"
+    "not Edge <= 18",
+    "Firefox ESR"
   ],
   "eslintConfig": {
     "extends": [

postcss.config.js

@@ -6,11 +6,11 @@ module.exports = {
     sourcesContent: true,
     annotation: true
   },
-  plugins: {
+  plugins: [
-    'postcss-node-sass': {
+    require('postcss-node-sass')({
       includePaths: [path.join(__dirname, 'node_modules')],
       outputStyle: 'compressed'
-    },
+    }),
-    'autoprefixer': {}
+    require('autoprefixer')
-  }
+  ]
 }

script/analyze-variables.js

@@ -1,126 +1,85 @@
 #!/usr/bin/env node
-/* eslint eslint-comments/no-use: off */
-/* eslint-disable github/no-then */
 const postcss = require('postcss')
+const {join} = require('path')
+const fs = require('fs')
 const atImport = require('postcss-import')
 const syntax = require('postcss-scss')
-const valueParser = require('postcss-value-parser')
+
-const {readFile} = require('fs-extra')
+const processor = postcss([
+  atImport({path: ['src']}),
+  collectVariables(),
+  require('postcss-simple-vars')({includePaths: [join(__dirname, '../src/support/variables')]})
+])
+
+async function analyzeVariables(fileName) {
+  const contents = await fs.readFileSync(fileName, 'utf8')
+
+  const result = await processor.process(contents, {from: fileName, map: false, syntax})
+  for (const message of result.messages) {
+    if (message.plugin === 'postcss-simple-vars' && message.type === 'variable') {
+      if (!result.variables[`$${message.name}`].values.includes(message.value)) {
+        result.variables[`$${message.name}`].values.push(message.value)
+      }
+      const computed = message.value
+      result.variables[`$${message.name}`].computed = computed
+    }
+  }
+  return result.variables
+}
+
+function checkNode(node) {
+  const allowedFuncts = ['var', 'round', 'cubic-bezier']
+  const functMatch = node.value.match(/([^\s]*)\(/)
+  let approvedMatch = true
+  if (functMatch && !allowedFuncts.includes(functMatch[1])) {
+    approvedMatch = false
+  }
+  return node.variable && approvedMatch
+}
+
+function collectVariables() {
+  return {
+    postcssPlugin: 'prepare-contents',
+    prepare(result) {
+      const variables = {}
+      return {
+        AtRule(atRule) {
+          atRule.remove()
+        },
+        Comment(comment) {
+          comment.remove()
+        },
+        Declaration(node) {
+          if (checkNode(node)) {
+            node.value = node.value.replace(' !default', '')
+            const fileName = node.source.input.file.replace(`${process.cwd()}/`, '')
+            variables[node.prop] = {
+              // computed: value,
+              values: [node.value],
+              source: {
+                path: fileName,
+                line: node.source.start.line
+              }
+            }
+          } else {
+            node.remove()
+          }
+        },
+        OnceExit() {
+          result.variables = variables
+        }
+      }
+    }
+  }
+}
 
 if (module.parent) {
   module.exports = analyzeVariables
 } else {
+  ;(async () => {
     const args = process.argv.slice(2)
     const file = args.length ? args.shift() : 'src/support/index.scss'
-  analyzeVariables(file).then(data => console.log(JSON.stringify(data, null, 2)))
+    const variables = await analyzeVariables(file)
-}
+    console.log(JSON.stringify(variables, null, 2))
-
+  })()
-function analyzeVariables(file) {
-  const variables = {}
-
-  const processor = postcss([
-    atImport({path: 'src'}),
-    variablePlugin(variables),
-    require('postcss-node-sass')({includePaths: ['src/support/variables']})
-  ])
-
-  return readFile(file, 'utf8')
-    .then(css => processor.process(css, {from: file, map: false, syntax}))
-    .then(({root}) => {
-      root.walkRules(':root', container => {
-        container.walkDecls(decl => {
-          const {prop, value} = decl
-          const actualProp = `$${prop.replace(/^--/, '')}`
-          const entry = variables[actualProp]
-          if (last(entry.values) !== value) {
-            entry.values.push(value)
-          }
-          if (value.match(/^var\(--.*\)/)) {
-            delete variables[actualProp]
-          } else {
-            variables[actualProp] = Object.assign(
-              {
-                computed: value
-              },
-              entry,
-              {refs: []}
-            )
-          }
-        })
-      })
-
-      for (const [prop, entry] of Object.entries(variables)) {
-        for (const value of entry.values) {
-          if (variables[value]) {
-            variables[value].refs.push(prop)
-          }
-        }
-      }
-
-      // sort it alphabetically by key
-      return sortObject(variables, ([ak], [bk]) => ak.localeCompare(bk))
-    })
-}
-
-function variablePlugin(variables) {
-  return postcss.plugin('analyze-variables', (options = {}) => {
-    const {cwd = process.cwd()} = options
-    return root => {
-      const decls = new Map()
-
-      root.walkDecls(/^\$/, decl => {
-        const {prop, value} = decl
-        if (decl.parent === root && !value.startsWith('(')) {
-          decl.value = value.replace(/ *!default$/, '')
-          decls.set(prop, decl)
-        }
-      })
-
-      for (const [prop, decl] of decls.entries()) {
-        const {nodes} = valueParser(decl.value)
-        const values = [valueParser.stringify(nodes)]
-        while (nodes.some(node => decls.has(node.value))) {
-          for (const node of nodes) {
-            const {value} = node
-            if (decls.has(value)) {
-              node.value = decls.get(value).value
-            }
-          }
-          values.push(valueParser.stringify(nodes))
-        }
-
-        const {source} = decl
-        variables[prop] = {
-          values,
-          source: {
-            path: source.input.file.replace(`${cwd}/`, ''),
-            line: source.start.line
-          }
-        }
-      }
-
-      const container = postcss.rule({selector: ':root'})
-      for (const [prop, decl] of decls.entries()) {
-        container.append(
-          postcss.decl({
-            prop: `--${prop.substr(1)}`,
-            value: `#{${decl.value}}`
-          })
-        )
-      }
-      root.append(container)
-    }
-  })
-}
-
-function sortObject(obj, cmp) {
-  const out = {}
-  for (const [key, value] of Object.entries(obj).sort(cmp)) {
-    out[key] = value
-  }
-  return out
-}
-
-function last(list) {
-  return list[list.length - 1]
 }

script/bundle-size-report.js

@@ -1,168 +1,113 @@
 #!/usr/bin/env node
-/* eslint eslint-comments/no-use: off */
+const {join} = require('path')
-/* eslint-disable github/no-then */
-const fetch = require('node-fetch')
 const filesize = require('filesize')
-const cssstats = require('cssstats')
+const {table} = require('table')
-const minimist = require('minimist')
-const {green, gray, yellow, red} = require('colorette')
-const {table, getBorderCharacters} = require('table')
-
-const options = minimist(process.argv.slice(2))
-
-const DELTA = '±'
-const VERSION = options.version || 'latest'
-const QUIET = options.quiet || options.q || 0
-const SORT = options.sort || options.s || 'gzip'
-// the default is descending
-const ASCENDING = options.asc || options.a
-const ONLY_BUNDLES = options.only
-const ALL_BUNDLES = !ONLY_BUNDLES && options.all
-const META_BUNDLES = options.all || options.meta || false
-
-const {name} = require('../package.json')
-const unpkgBaseURL = `https://unpkg.com/${name}@${VERSION}/`
 
 // ensure that K and B values line up vertically
 const filesizeConfig = {symbols: {KB: 'K'}}
 const prettySize = bytes => filesize(bytes, filesizeConfig)
-const meta = require('../dist/meta.json')
 
-let bundles = Object.values(meta.bundles)
+function getBundles(path) {
+  const meta = require(join(path, './dist/meta.json'))
+  let metaBundles = Object.values(meta.bundles)
 
   // fitler out support bundles, since they don't generate CSS
-bundles = bundles.filter(bundle => !isSupportBundleName(bundle.name))
+  metaBundles = metaBundles.filter(bundle => !isSupportBundleName(bundle.name))
-
+  const bundles = {}
-if (ONLY_BUNDLES) {
+  for (const bundle of metaBundles) {
-  const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/))
-  bundles = bundles.filter(bundle => only.has(bundle.name))
-} else if (!ALL_BUNDLES) {
-  bundles = META_BUNDLES ? bundles.filter(isMetaBundle) : bundles.filter(bundle => !isMetaBundle(bundle))
-}
-
-Promise.all(
-  bundles.map(bundle => {
     const entry = {
       name: bundle.name,
       path: bundle.css,
-      local: require(`../${bundle.stats}`),
+      stats: require(join(path, `./${bundle.stats}`))
-      remote: {}
     }
-    return fetch(unpkgBaseURL + bundle.stats)
+    bundles[bundle.name] = entry
-      .then(res => res.json())
-      .catch(() => {
-        console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
-        return cssstats('')
-      })
-      .then(stats => (entry.remote = stats))
-      .then(() => entry)
-  })
-).then(entries => {
-  const columns = [
-    {title: 'name', value: get(d => d.name), alignment: 'left'},
-
-    // CSS selector count
-    {title: 'selectors', value: get(d => d.local.selectors.total)},
-    {title: DELTA, value: delta(d => d.selectors.total), id: 'selector-delta'},
-
-    // gzipped size (bytes)
-    {title: 'gzip size', value: get(d => d.local.gzipSize, prettySize), id: 'gzip'},
-    {title: DELTA, value: delta(d => d.gzipSize, prettySize), id: 'gzip-delta'},
-
-    // raw size (bytes)
-    {title: 'raw size', value: get(d => d.local.size, prettySize), id: 'size'},
-    {title: DELTA, value: delta(d => d.size, prettySize), id: 'size-delta'},
-
-    // path goes last
-    {title: 'path', value: get(d => d.path), alignment: 'left'}
-  ]
-
-  for (const [index, column] of Object.entries(columns)) {
-    column.index = index
   }
 
-  const header = columns.map(c => c.title)
+  return bundles
-  let data = entries.map(entry => columns.map(c => c.value(entry)))
+}
 
-  if (SORT) {
+const tableOptions = {
-    const index = columns.findIndex(c => c.id === SORT || c.title === SORT)
+  singleLine: true,
-    if (index > -1) {
+  border: {
-      const compare = ASCENDING ? compareAscending : compareDescending
+    topBody: '',
-      data.sort((a, b) => compare(a[index].value, b[index].value))
+    topJoin: '',
-    } else {
+    topLeft: '',
-      console.warn(`No such sort column: "${SORT}"! Output will not be sorted.`)
+    topRight: '',
+
+    bottomBody: '',
+    bottomJoin: '',
+    bottomLeft: '',
+    bottomRight: '',
+
+    bodyLeft: '|',
+    bodyRight: '|',
+    bodyJoin: '|',
+
+    joinBody: '',
+    joinLeft: '',
+    joinRight: '',
+    joinJoin: ''
   }
 }
 
-  if (QUIET) {
+// const sortByName = (a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0)
-    data = data.filter(cells => {
+const sortByGZipSize = (a, b) => b[3] - a[3]
-      return cells.filter((cell, i) => columns[i].title === DELTA).every(cell => cell.value !== 0)
+// const sortByRawSize = (a, b) => b[5] - a[5]
-    })
+const posNeg = v => (v > 0 ? '+ ' : v < 0 ? '- ' : '')
+
+;(async () => {
+  const currentBundles = getBundles(join(__dirname, '../'))
+  const latestBundles = getBundles(join(__dirname, '../tmp/node_modules/@primer/css/'))
+
+  let data = []
+
+  // Build the rows
+  for (const name of Object.keys(currentBundles)) {
+    const current = currentBundles[name]
+    const latest = latestBundles[name]
+
+    const delta = [
+      current.stats.selectors.total - latest.stats.selectors.total,
+      current.stats.gzipSize - latest.stats.gzipSize,
+      current.stats.size - latest.stats.size
+    ].reduce((a, b) => a + b, 0)
+
+    if (delta !== 0) {
+      data.push([
+        current.name,
+        current.stats.selectors.total,
+        current.stats.selectors.total - latest.stats.selectors.total,
+        current.stats.gzipSize,
+        current.stats.gzipSize - latest.stats.gzipSize,
+        current.stats.size,
+        current.stats.size - latest.stats.size
+      ])
+    }
   }
 
-  const rows = data.map(cells => cells.map(String))
+  // Sort the data
+  data = data.sort(sortByGZipSize)
 
-  console.log(
+  // Beautify the data
-    table([header].concat(rows), {
+  data = data.map(row => {
-      columns,
+    row[2] = posNeg(row[2]) + `${row[2]}`.replace('-', '')
-      columnDefault: {
+    row[3] = prettySize(row[3])
-        alignment: 'right'
+    row[4] = posNeg(row[4]) + `${prettySize(row[4])}`.replace('-', '')
-      },
+    row[5] = prettySize(row[5])
-      border: getBorderCharacters('norc'),
+    row[6] = posNeg(row[6]) + `${prettySize(row[6])}`.replace('-', '')
-      drawHorizontalLine(index, size) {
+    return row
-        return index <= 1 || index === size
-      }
-    })
-  )
   })
 
-function get(getter, format = String) {
+  // Adding header
-  return entry => {
+  data = [
-    const value = getter(entry)
+    ['name', 'selectors', '±', 'gzip size', '±', 'raw size', '±'],
-    return {
+    [':-', '-:', '-:', '-:', '-:', '-:', '-:']
-      value,
+  ].concat(data)
-      toString: () => format(value)
-    }
-  }
-}
 
-function delta(getter, format = String) {
+  console.log(table(data, tableOptions))
-  const {moreIsGood = false, badThreshold = 1000} = options
+})()
-  return entry => {
-    const local = getter(entry.local)
-    const remote = getter(entry.remote)
-    const value = local - remote
-    if (value === 0) {
-      return {
-        value,
-        toString: () => `  ${gray(0)}`
-      }
-    } else {
-      const sign = value > 0 ? '+' : '-'
-      const num = Math.abs(value)
-      const good = moreIsGood ? value > 0 : value < 0
-      const color = good ? green : value >= badThreshold ? red : yellow
-      return {
-        value,
-        toString: () => color(`${sign} ${format(num)}`)
-      }
-    }
-  }
-}
-
-function isMetaBundle(bundle) {
-  return !bundle.imports.every(isSupportBundleName)
-}
 
 function isSupportBundleName(bundleName) {
   // "support", "marketing-support", and any future ones?
   return bundleName.endsWith('support')
 }
-
-function compareAscending(a, b) {
-  return a - b
-}
-
-function compareDescending(a, b) {
-  return b - a
-}

script/dist.js

@@ -107,14 +107,10 @@ if (require.main === module) {
   dist()
 }
 
-function writeVariableData() {
+async function writeVariableData() {
   const analyzeVariables = require('./analyze-variables')
-  return Promise.all([
+  const support = await analyzeVariables('src/support/index.scss')
-    analyzeVariables('src/support/index.scss'),
+  const marketing = await analyzeVariables('src/marketing/support/index.scss')
-    analyzeVariables('src/marketing/support/index.scss')
-    /* eslint-disable-next-line github/no-then */
-  ]).then(([support, marketing]) => {
   const data = Object.assign({}, support, marketing)
   writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
-  })
 }

script/prepublish

@@ -2,7 +2,7 @@
 set -e
 
 # generate the build directory
-npm run --silent dist
+yarn dist
 
 files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
 echo $files > publish-files.log

script/pretest

@@ -4,4 +4,4 @@ set -e
 mkdir -p tmp
 cd tmp
 echo "{\"package\":\"tmp\",\"version\":\"0.0.0\"}" > package.json
-yarn add @primer/css
+yarn add --force @primer/css@latest

script/selector-diff-report

@@ -11,16 +11,14 @@ function warn() {
 
 pkg="@primer/css"
 path="dist/stats/primer.json"
-warn "Pulling the old $path from unpkg.com..."
+cp "tmp/node_modules/@primer/css/dist/stats/primer.json" before.json
-curl -sL "https://unpkg.com/$pkg/$path" > before.json
 
-warn "Building the stats locally..."
 cp $path after.json
 
 key=".selectors.values[]"
-jq -r $key before.json > before.txt
+jq -r $key before.json | sort | uniq > before.txt
-jq -r $key after.json > after.txt
+jq -r $key after.json | sort | uniq > after.txt
 
-diff {before,after}.txt && echo 'no diff!'
+diff -U 1 {before,after}.txt
 
 rm {before,after}.{json,txt}

src/autocomplete/autocomplete.scss

@@ -9,7 +9,7 @@
   font-size: 13px;
   list-style: none;
   background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 }

src/autocomplete/suggester.scss

@@ -12,7 +12,7 @@
   list-style: none;
   cursor: pointer;
   background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 

src/base/index.scss

@@ -5,3 +5,4 @@
 @import "./base.scss";
 @import "./kbd.scss";
 @import "./typography-base.scss";
+@import "./octicons.scss";

src/base/modes-v2.scss

@@ -0,0 +1,27 @@
+// EXPERIMENTAL. DO NOT USE.
+
+@import '../support/mixins/color-modes.scss';
+
+@import '@primer/primitives/dist/scss/colors_v2/_light.scss';
+@import '@primer/primitives/dist/scss/colors_v2/_dark.scss';
+@import '@primer/primitives/dist/scss/colors_v2/_dark_dimmed.scss';
+@import '@primer/primitives/dist/scss/colors_v2/_dark_high_contrast.scss';
+
+// Outputs the CSS variables
+// Use :root (html element) to define a default
+
+@include color-mode-theme(light, true) {
+  @include primer-colors_v2-light;
+}
+
+@include color-mode-theme(dark) {
+  @include primer-colors_v2-dark;
+}
+
+@include color-mode-theme(dark_dimmed) {
+  @include primer-colors_v2-dark_dimmed;
+}
+
+@include color-mode-theme(dark_high_contrast) {
+  @include primer-colors_v2-dark_high_contrast;
+}

src/base/octicons.scss

@@ -0,0 +1,6 @@
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}

src/blankslate/blankslate.scss

@@ -28,7 +28,7 @@
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
   // stylelint-disable-next-line primer/colors
-  color: var(--color-blankslate-icon);
+  color: var(--color-icon-secondary);
 }
 
 .blankslate-capped {

src/core/index.scss

@@ -5,9 +5,6 @@
  * Released under MIT license. Copyright (c) 2019 GitHub Inc.
  */
 
-// Include .octicon base styles
-@import "@primer/octicons/index.scss";
-
 // Global requirements
 @import "../support/index.scss";
 

src/dropdown/dropdown.scss

@@ -32,7 +32,7 @@
   list-style: none;
   background-color: var(--color-bg-overlay);
   background-clip: padding-box;
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-dropdown-shadow);
 
@@ -47,7 +47,7 @@
   &::before {
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-overlay);
+    border-bottom-color: var(--color-border-primary);
   }
 
   // caret background (should match dropdown background)
@@ -113,7 +113,7 @@
   display: block;
   height: 0;
   margin: $spacer-2 0;
-  border-top: $border-width $border-style var(--color-border-overlay);
+  border-top: $border-width $border-style var(--color-border-primary);
 }
 
 .dropdown-header {
@@ -144,7 +144,7 @@
     right: -$spacer-3;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-border-overlay);
+    border-left-color: var(--color-border-primary);
   }
 
   &::after {
@@ -168,7 +168,7 @@
     top: 10px;
     left: -$spacer-3;
     border-color: transparent;
-    border-right-color: var(--color-border-overlay);
+    border-right-color: var(--color-border-primary);
   }
 
   &::after {
@@ -197,7 +197,7 @@
     bottom: -$spacer-2;
     left: 9px;
     // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style var(--color-border-overlay);
+    border-top: $spacer-2 $border-style var(--color-border-primary);
     // stylelint-disable-next-line primer/borders
     border-right: $spacer-2 $border-style transparent;
     border-bottom: 0;

src/fonts/LICENSE

@@ -1,94 +0,0 @@
-Copyright (c) 2016-2020 The Inter Project Authors.
-"Inter" is trademark of Rasmus Andersson.
-https://github.com/rsms/inter
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

src/layout/index.scss

@@ -2,3 +2,4 @@
 @import "./container.scss";
 @import "./grid.scss";
 @import "./grid-offset.scss";
+@import "./layout.scss";

src/layout/layout.scss

@@ -0,0 +1,199 @@
+// Layout component
+
+.Layout {
+  display: grid;
+  --Layout-sidebar-width: #{map-get($sidebar-width, "sm")};
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(#{$width-sm} - 1px)) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr !important;
+
+    .Layout-sidebar,
+    .Layout-divider,
+    .Layout-main {
+        width: 100% !important;
+        grid-column: 1 !important;
+      }
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(#{$width-md} - 1px)) {
+      grid-auto-flow: row;
+      grid-template-columns: 1fr !important;
+
+      .Layout-sidebar,
+      .Layout-divider,
+      .Layout-main {
+        width: 100% !important;
+        grid-column: 1 !important;
+      }
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(#{$width-lg} - 1px)) {
+      grid-auto-flow: row;
+      grid-template-columns: 1fr !important;
+
+      .Layout-sidebar,
+      .Layout-divider,
+      .Layout-main {
+        width: 100% !important;
+        grid-column: 1 !important;
+      }
+    }
+  }
+
+  // Flow as column
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
+  // stylelint-disable-next-line primer/no-undefined-vars
+  grid-gap: var(--Layout-gutter);
+
+  .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  .Layout-divider {
+    display: none;
+  }
+
+  .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  // Gutter spacing
+
+  @include breakpoint(lg) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    --Layout-gutter: 0;
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @include breakpoint(lg) {
+      --Layout-gutter: 32px;
+    }
+
+    @include breakpoint(xl) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  // Sidebar width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // Sidebar position
+
+  &.Layout--sidebarPosition-start {
+    .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: 1fr 0 auto;
+
+    .Layout-main {
+      grid-column: 1;
+    }
+
+    .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  // Sidebar divider
+
+  &.Layout--divided {
+    .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      // stylelint-disable-next-line primer/spacing
+      margin-right: -1px;
+      // stylelint-disable-next-line primer/colors
+      background: var(--color-border-primary);
+    }
+
+    .Layout-main {
+      grid-column: 3 / span 1;
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  // stylelint-disable-next-line primer/no-undefined-vars
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+
+  // Centered main column
+  // FIXME: right-aligned sidebar
+  .Layout-main-centered-md,
+  .Layout-main-centered-lg,
+  .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    > .container-md,
+    > .container-lg,
+    > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  .Layout-main-centered-md {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-lg {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-xl {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}

src/markdown/lists.scss

@@ -14,6 +14,18 @@
     }
   }
 
+  ol[type="1"] {
+    list-style-type: decimal;
+  }
+
+  ol[type="a"] {
+    list-style-type: lower-alpha;
+  }
+
+  ol[type="i"] {
+    list-style-type: lower-roman;
+  }
+
   // Did someone complain about list spacing? Encourage them
   // to create the spacing with their markdown formatting.
   // List behavior should be controled by the markup, not the css.

src/marketing/buttons/button.scss

@@ -1,117 +1,106 @@
 .btn-mktg {
+  position: relative;
+  z-index: 1;
   display: inline-block;
-  padding: $spacer-3 $spacer-4;
+  appearance: none !important;
-  font-size: $h5-size;
+  // stylelint-disable-next-line primer/spacing
-  font-weight: $font-weight-semibold;
+  padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1);
-  color: var(--color-mktg-btn-text);
+  // stylelint-disable-next-line primer/typography
+  font-size: 1rem;
+  font-weight: $font-weight-bold;
+  line-height: 1;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: pointer;
   user-select: none;
-  background-color: var(--color-mktg-btn-bg);
+  border: 0;
-  border: $border-width $border-style var(--color-mktg-btn-border);
+  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius;
+  border-radius: rem(6px);
-  transition-duration: $transition-time / 2;
+
-  transition-property: background-color, border-color, box-shadow;
+  @include btn-solid-mktg(
-  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+    var(--color-mktg-btn-text),
+    var(--color-mktg-btn-bg-top),
+    var(--color-mktg-btn-bg-bottom),
+    var(--color-mktg-btn-bg-overlay-top),
+    var(--color-mktg-btn-bg-overlay-bottom),
+  );
+
+  &::before {
+    background-blend-mode: overlay, normal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border-radius: rem(6px);
+    opacity: 0;
+    transition: opacity 0.4s;
+  }
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-mktg-btn-hover-bg);
-    border-color: var(--color-mktg-btn-hover-border);
-  }
 
-  &:focus {
+    &::before {
-    outline: 0;
+      opacity: 1;
-    box-shadow: var(--color-mktg-btn-focus-shadow);
+      transition: opacity 0.4s;
     }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: var(--color-mktg-btn-disabled-text);
-    pointer-events: none; // Disable hover styles
-    cursor: default;
-    background-color: var(--color-mktg-btn-disabled-bg);
-    border-color: var(--color-mktg-btn-disabled-border);
   }
 }
 
 .btn-primary-mktg {
-  color: var(--color-mktg-btn-primary-text);
+  @include btn-solid-mktg(
-  background-color: var(--color-mktg-btn-primary-bg);
+    var(--color-mktg-btn-primary-text),
-  border-color: var(--color-mktg-btn-primary-border);
+    var(--color-mktg-btn-primary-bg-top),
-
+    var(--color-mktg-btn-primary-bg-bottom),
-  &:hover {
+    var(--color-mktg-btn-primary-bg-overlay-top),
-    background-color: var(--color-mktg-btn-primary-hover-bg);
+    var(--color-mktg-btn-primary-bg-overlay-bottom),
-    border-color: var(--color-mktg-btn-primary-hover-border);
+  );
 }
 
-  &:focus {
+.btn-enterprise-mktg {
-    box-shadow: var(--color-mktg-btn-primary-focus-shadow);
+  @include btn-solid-mktg(
-  }
+    var(--color-mktg-btn-enterprise-text),
-
+    var(--color-mktg-btn-enterprise-bg-top),
-  &:disabled,
+    var(--color-mktg-btn-enterprise-bg-bottom),
-  &.disabled,
+    var(--color-mktg-btn-enterprise-bg-overlay-top),
-  &[aria-disabled=true] {
+    var(--color-mktg-btn-enterprise-bg-overlay-bottom),
-    color: var(--color-mktg-btn-primary-disabled-text);
+  );
-    background-color: var(--color-mktg-btn-primary-disabled-bg);
-    border-color: var(--color-mktg-btn-primary-disabled-border);
-  }
 }
 
 .btn-outline-mktg {
-  color: var(--color-mktg-btn-outline-text);
+  @include btn-outline-mktg(
-  background-color: var(--color-mktg-btn-outline-bg);
+    var(--color-mktg-btn-outline-text),
-  border-color: var(--color-mktg-btn-outline-border);
+    var(--color-mktg-btn-outline-hover-text),
-
+    var(--color-mktg-btn-outline-border),
-  &:hover {
+    var(--color-mktg-btn-outline-hover-border),
-    color: var(--color-mktg-btn-outline-hover-text);
+    var(--color-mktg-btn-outline-focus-border),
-    background-color: var(--color-mktg-btn-outline-hover-bg);
+    var(--color-mktg-btn-outline-focus-border-inset)
-    border-color: var(--color-mktg-btn-outline-hover-border);
+  );
-  }
+  transition: box-shadow 0.4s, color 0.4s;
-
-  &:focus {
-    box-shadow: var(--color-mktg-btn-outline-focus-shadow);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: var(--color-mktg-btn-outline-disabled-text);
-    background-color: var(--color-mktg-btn-outline-disabled-bg);
-    border-color: var(--color-mktg-btn-outline-disabled-border);
-  }
 }
 
 .btn-transparent {
-  color: var(--color-mktg-btn-dark-text);
+  @include btn-outline-mktg(
-  background-color: var(--color-mktg-btn-dark-bg);
+    var(--color-mktg-btn-dark-text),
-  border-color: var(--color-mktg-btn-dark-border);
+    var(--color-mktg-btn-dark-hover-text),
-
+    var(--color-mktg-btn-dark-border),
-  &:hover {
+    var(--color-mktg-btn-dark-hover-border),
-    color: var(--color-mktg-btn-dark-hover-text);
+    var(--color-mktg-btn-dark-focus-border),
-    background-color: var(--color-mktg-btn-dark-hover-bg);
+    var(--color-mktg-btn-dark-focus-border-inset)
-    border-color: var(--color-mktg-btn-dark-hover-border);
+  );
+  transition: box-shadow 0.4s, color 0.4s;
 }
 
-  &:focus {
+// Size modifiers
-    box-shadow: var(--color-mktg-btn-dark-focus-shadow);
-  }
 
-  &:disabled,
+.btn-small-mktg {
-  &.disabled,
+  // stylelint-disable-next-line primer/spacing
-  &[aria-disabled=true] {
+  padding: rem(10px) rem($spacer-3) rem(13px);
-    color: var(--color-mktg-btn-dark-disabled-text);
-    background-color: var(--color-mktg-btn-dark-disabled-bg);
-    border-color: var(--color-mktg-btn-dark-disabled-border);
 }
-}
-
-// Large
 
 .btn-large-mktg {
   // stylelint-disable-next-line primer/spacing
-  padding: 20px $spacer-5;
+  padding: 20px 30px 23px !important;
-  font-size: $h4-size;
 }

src/marketing/support/index.scss

@@ -1,2 +1,3 @@
 @import "../../support/index.scss";
+@import "./mixins.scss";
 @import "./variables.scss";

src/marketing/support/mixins.scss

@@ -0,0 +1,80 @@
+@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
+  color: $color;
+  background-color: $bg2;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
+
+  &::before {
+    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
+  }
+
+  &:hover,
+  &.hover,
+  &:active,
+  &.selected,
+  &[aria-selected=true],
+  [open] > & {
+    background-color: $bg2;
+    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
+  color: $color;
+  background: none;
+  box-shadow: 0 0 0 1px $border inset;
+
+  &::before {
+    display: none;
+  }
+
+  &:hover,
+  &.hover,
+  &:active,
+  &.selected,
+  &[aria-selected=true],
+  [open] > & {
+    color: $color2;
+    background: none;
+    box-shadow: 0 0 0 2px $borderHover inset;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    opacity: 0.5;
+  }
+}
+
+$browser-context: 16 !default;
+
+@function rem($pixels, $context: $browser-context) {
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
+
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1rem;
+}

src/marketing/support/variables.scss

@@ -1,47 +1,123 @@
+// stylelint-disable unit-no-unknown
+// Typography
 $marketing-font-path: "/fonts/" !default;
 
-$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-mktg: $body-font !default;
+$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
+$mktg-header-spacing-large: -0.03em !default;
+$mktg-header-spacing-default: -0.01em !default;
+$mktg-header-spacing-threshold: 48px !default;
+$mktg-header-weight-large: 800 !default;
+$mktg-header-weight-default: $font-weight-bold !default;
+$mktg-header-weight-threshold: 24px !default;
 
-// Builds upon @primer/css/support/variables/typography.scss
+// Header size steps
-$h000-size: 64px !default;
+$mktg-h-size-0:  96px !default;
-$h000-size-mobile: 48px !default;
+$mktg-h-size-1:  72px !default;
+$mktg-h-size-2:  64px !default;
+$mktg-h-size-3:  56px !default;
+$mktg-h-size-4:  48px !default;
+$mktg-h-size-5:  40px !default;
+$mktg-h-size-6:  32px !default;
+$mktg-h-size-7:  28px !default;
+$mktg-h-size-8:  24px !default;
+$mktg-h-size-9:  20px !default;
+$mktg-h-size-10: 16px !default;
+
+// Header Line-height steps
+$mktg-h-lh-0:  100px !default;
+$mktg-h-lh-1:  76px !default;
+$mktg-h-lh-2:  68px !default;
+$mktg-h-lh-3:  60px !default;
+$mktg-h-lh-4:  52px !default;
+$mktg-h-lh-5:  44px !default;
+$mktg-h-lh-6:  36px !default;
+$mktg-h-lh-7:  32px !default;
+$mktg-h-lh-8:  28px !default;
+$mktg-h-lh-9:  24px !default;
+$mktg-h-lh-10: 20px !default;
+
+$mktg-header-pairings: (
+  0:  (size: $mktg-h-size-0,  lh: $mktg-h-lh-0),
+  1:  (size: $mktg-h-size-1,  lh: $mktg-h-lh-1),
+  2:  (size: $mktg-h-size-2,  lh: $mktg-h-lh-2),
+  3:  (size: $mktg-h-size-3,  lh: $mktg-h-lh-3),
+  4:  (size: $mktg-h-size-4,  lh: $mktg-h-lh-4),
+  5:  (size: $mktg-h-size-5,  lh: $mktg-h-lh-5),
+  6:  (size: $mktg-h-size-6,  lh: $mktg-h-lh-6),
+  7:  (size: $mktg-h-size-7,  lh: $mktg-h-lh-7),
+  8:  (size: $mktg-h-size-8,  lh: $mktg-h-lh-8),
+  9:  (size: $mktg-h-size-9,  lh: $mktg-h-lh-9),
+  10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
+) !default;
+
+// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-headers: (
+  0: [4, 1, 0],
+  1: [5, 3, 1],
+  2: [6, 4, 2],
+  3: [7, 5, 4],
+  4: [8, 7, 6],
+  5: [9, 8, 8],
+  6: [10, 9, 9]
+) !default;
+
+// Body content
+$mktg-body-spacing-threshold: 28px !default;
+$mktg-body-weight-threshold: 24px !default;
+$mktg-body-spacing-large: -0.01em !default;
+
+// Body size steps
+$mktg-body-size-0:  48px !default;
+$mktg-body-size-1:  40px !default;
+$mktg-body-size-2:  32px !default;
+$mktg-body-size-3:  28px !default;
+$mktg-body-size-4:  24px !default;
+$mktg-body-size-5:  20px !default;
+$mktg-body-size-6:  16px !default;
+$mktg-body-size-7:  14px !default;
+$mktg-body-size-8:  12px !default;
+
+// Body line-height steps
+$mktg-body-lh-0:  64px !default;
+$mktg-body-lh-1:  52px !default;
+$mktg-body-lh-2:  44px !default;
+$mktg-body-lh-3:  40px !default;
+$mktg-body-lh-4:  32px !default;
+$mktg-body-lh-5:  28px !default;
+$mktg-body-lh-6:  24px !default;
+$mktg-body-lh-7:  20px !default;
+$mktg-body-lh-8:  20px !default;
+
+$mktg-body-pairings: (
+  0:  (size: $mktg-body-size-0,  lh: $mktg-body-lh-0),
+  1:  (size: $mktg-body-size-1,  lh: $mktg-body-lh-1),
+  2:  (size: $mktg-body-size-2,  lh: $mktg-body-lh-2),
+  3:  (size: $mktg-body-size-3,  lh: $mktg-body-lh-3),
+  4:  (size: $mktg-body-size-4,  lh: $mktg-body-lh-4),
+  5:  (size: $mktg-body-size-5,  lh: $mktg-body-lh-5),
+  6:  (size: $mktg-body-size-6,  lh: $mktg-body-lh-6),
+  7:  (size: $mktg-body-size-7,  lh: $mktg-body-lh-7),
+  8:  (size: $mktg-body-size-8,  lh: $mktg-body-lh-8)
+) !default;
+
+// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-body-spacing-large: -0.01em !default;
+
+$mktg-bodies: (
+  0: [3, 1, 0],
+  1: [4, 3, 2],
+  2: [5, 5, 4],
+  3: [6, 5, 5],
+  4: [6, 6, 6],
+  5: [7, 7, 7],
+  6: [8, 8, 8]
+) !default;
 
 // Animations
 $transition-time: 0.4s !default;
 $ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
 
-// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
-// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
-// 80, 96, etc.
-$spacer-7:  $spacer * 6 !default;  // 48px
-$spacer-8:  $spacer * 8 !default;  // 64px
-$spacer-9:  $spacer * 10 !default; // 80px
-$spacer-10: $spacer * 12 !default; // 96px
-$spacer-11: $spacer * 14 !default; // 112px
-$spacer-12: $spacer * 16 !default; // 128px
-
-$marketing-spacers: (
-  7: $spacer-7,
-  8: $spacer-8,
-  9: $spacer-9,
-  10: $spacer-10,
-  11: $spacer-11,
-  12: $spacer-12,
-) !default;
-
-$marketing-all-spacers: map-merge(
-  (
-    0: 0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-  ),
-  $marketing-spacers,
-) !default;
-
 $marketing-position-variants: (
   "": "",
   md: "-md",

src/marketing/type/typography.scss

@@ -1,104 +1,106 @@
-// Type
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-normal;
-  src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-semibold;
-  src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-bold;
-  src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff");
-  font-display: swap;
-}
-
 // Headings
-.h000-mktg,
-.h00-mktg,
 .h0-mktg,
 .h1-mktg,
 .h2-mktg,
 .h3-mktg,
 .h4-mktg,
 .h5-mktg,
-.h6-mktg,
-.lead-mktg {
-  font-family: $font-mktg;
-  font-weight: $font-weight-semibold;
-}
-
-@mixin h000-mktg {
-  font-size: $h000-size-mobile !important;
-  @include breakpoint(md) { font-size: $h000-size !important; }
-}
-
-.h000-mktg { @include h000-mktg; }
-
-@mixin h00-mktg {
-  font-size: $h00-size-mobile !important;
-  @include breakpoint(md) { font-size: $h00-size !important; }
-}
-
-.h00-mktg { @include h00-mktg; }
-
-@mixin h0-mktg {
-  font-size: $h0-size-mobile !important;
-  @include breakpoint(md) { font-size: $h0-size !important; }
-}
-
-.h0-mktg { @include h0-mktg; }
-
-@mixin h1-mktg {
-  font-size: $h1-size-mobile !important;
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-.h1-mktg { @include h1-mktg; }
-
-@mixin h2-mktg {
-  font-size: $h2-size-mobile !important;
-  @include breakpoint(md) { font-size: $h2-size !important; }
-}
-
-.h2-mktg { @include h2-mktg; }
-
-@mixin h3-mktg {
-  font-size: $h3-size-mobile !important;
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-.h3-mktg { @include h3-mktg; }
-
-.h4-mktg {
-  font-size: $h4-size !important;
-}
-
-.h5-mktg {
-  font-size: $h5-size !important;
-}
-
 .h6-mktg {
-  font-size: $h6-size !important;
+  font-family: $font-mktg;
+  font-feature-settings: $mktg-font-feature-settings;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $mktg-header-weight-default !important;
+  letter-spacing: $mktg-header-spacing-default !important;
 }
 
-// Big opening paragraphs
+@each $header, $sizes in $mktg-headers {
-@mixin lead-mktg {
+  .h#{$header}-mktg {
-  font-size: $h3-size;
+    $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+        @if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+        @if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+        @if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+        @if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+  }
+}
+
+.f0-mktg,
+.f1-mktg,
+.f2-mktg,
+.f3-mktg,
+.f4-mktg,
+.f5-mktg,
+.f6-mktg {
+  font-family: $font-mktg;
+  font-feature-settings: $mktg-font-feature-settings;
   font-weight: $font-weight-normal;
 }
 
-.lead-mktg { @include lead-mktg; }
+@each $body, $sizes in $mktg-bodies {
+  .f#{$body}-mktg {
+    $pairing: map-get($mktg-body-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; }
+    @if (map-get($pairing, "size") >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+        @if (map-get($pairing-md, "size") >= $mktg-body-spacing-threshold and map-get($pairing, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+        @if (map-get($pairing-md, "size") >= $mktg-body-weight-threshold and map-get($pairing, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-semibold;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+        @if (map-get($pairing-lg, "size") >= $mktg-body-spacing-threshold and map-get($pairing-md, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+        @if (map-get($pairing-lg, "size") >= $mktg-body-weight-threshold and map-get($pairing-md, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-semibold;
+        }
+      }
+    }
+  }
+}
 
 // Pullquote
 

src/marketing/utilities/index.scss

@@ -4,6 +4,3 @@
 @import "./borders.scss";
 @import "./filters.scss";
 @import "./layout.scss";
-@import "./margin.scss";
-@import "./misc.scss";
-@import "./padding.scss";

src/marketing/utilities/layout.scss

@@ -5,12 +5,15 @@
 // No utilities for sm and xl breakpoints
 @each $breakpoint, $variant in $marketing-position-variants {
   @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
+    @each $scale, $size in $spacer-map-extended {
+      @if ($size != 0 or $variant != "") {
         .top#{$variant}-#{$scale}     { top: $size !important; }
         .right#{$variant}-#{$scale}   { right: $size !important; }
         .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
         .left#{$variant}-#{$scale}    { left: $size !important; }
+      }
 
+      @if ($size != 0) {
         .top#{$variant}-n#{$scale}     { top: -$size !important; }
         .right#{$variant}-n#{$scale}   { right: -$size !important; }
         .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
@@ -18,6 +21,7 @@
       }
     }
   }
+}
 
 // Negative offset columns
 @each $breakpoint, $variant in $responsive-variants {

src/marketing/utilities/margin.scss

@@ -1,26 +0,0 @@
-// Margin spacer utilities for marketing
-// Utilities only added for y-direction margin (i.e. top & bottom)
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
-
-      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
-
-      .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
-      .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
-
-      .my#{$variant}-#{$scale} {
-        margin-top: $size !important;
-        margin-bottom: $size !important;
-      }
-    }
-  }
-}
-
-.mt-auto {
-  margin-top: auto !important;
-}
-
-.m-auto { margin: auto !important; }

src/marketing/utilities/misc.scss

@@ -1,5 +0,0 @@
-.bg-shade-gradient {
-  background-image: linear-gradient(180deg, var(--color-mktg-bg-shade-gradient-top), var(--color-mktg-bg-shade-gradient-bottom)) !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 200px !important;
-}

src/marketing/utilities/padding.scss

@@ -1,24 +0,0 @@
-// Padding spacer utilities for marketing
-// stylelint-disable block-opening-brace-space-before
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
-      // Set a #{$size} padding for all sides
-      .p#{$variant}-#{$scale}   { padding: #{$size} !important; }
-      // Set a #{$size} padding to the top
-      .pt#{$variant}-#{$scale}  { padding-top: #{$size} !important; }
-      // Set a #{$size} padding to the right
-      .pr#{$variant}-#{$scale}  { padding-right: #{$size} !important; }
-      // Set a #{$size} padding to the bottom
-      .pb#{$variant}-#{$scale}  { padding-bottom: #{$size} !important; }
-      // Set a #{$size} padding to the left
-      .pl#{$variant}-#{$scale}  { padding-left: #{$size} !important; }
-      // Set a #{$size} padding to the top & bottom
-      .py#{$variant}-#{$scale} {
-        padding-top: #{$size} !important;
-        padding-bottom: #{$size} !important;
-      }
-    }
-  }
-}

src/navigation/menu.scss

@@ -33,11 +33,15 @@
     &::before { border-bottom-left-radius: $border-radius; }
   }
 
-  &:focus,
+  &:focus {
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--color-state-focus-shadow);
+  }
+
   &:hover {
     text-decoration: none;
     background-color: var(--color-state-hover-secondary-bg);
-    outline: none;
   }
 
   &:active {

src/navigation/sidenav.scss

@@ -43,8 +43,13 @@
 
 // States
 
-.SideNav-item:hover,
 .SideNav-item:focus {
+  z-index: 1;
+  outline: none;
+  box-shadow: var(--color-state-focus-shadow);
+}
+
+.SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-state-hover-secondary-bg);
   outline: none;

src/popover/popover.scss

@@ -24,7 +24,7 @@
     margin-left: -9px;
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-overlay);
+    border-bottom-color: var(--color-border-primary);
   }
 
   &::after {
@@ -54,7 +54,7 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: var(--color-border-overlay);
+    border-top-color: var(--color-border-primary);
   }
 
   &::after {
@@ -133,7 +133,7 @@
 .Popover-message--right-bottom {
   &::before {
     right: -$spacer-3;
-    border-left-color: var(--color-border-overlay);
+    border-left-color: var(--color-border-primary);
   }
 
   &::after {
@@ -149,7 +149,7 @@
 .Popover-message--left-bottom {
   &::before {
     left: -$spacer-3;
-    border-right-color: var(--color-border-overlay);
+    border-right-color: var(--color-border-primary);
   }
 
   &::after {

src/select-menu/select-menu.scss

@@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-border-overlay);
+    border-color: var(--color-border-primary);
     border-radius: $border-radius;
     box-shadow: var(--color-shadow-large);
     animation-name: SelectMenu-modal-animation--sm;

src/support/variables/layout.scss

@@ -63,6 +63,38 @@ $spacer-map: (
   6: $spacer-6,
 ) !default;
 
+// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
+// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
+// 80, 96, etc.
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
+
+$spacers-large: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$spacer-map-extended: map-merge(
+  (
+    0: 0,
+    1: $spacer-1,
+    2: $spacer-2,
+    3: $spacer-3,
+    4: $spacer-4,
+    5: $spacer-5,
+    6: $spacer-6,
+  ),
+  $spacers-large,
+) !default;
+
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
 $em-spacer-2: 0.125em !default;  // 1/8
@@ -141,3 +173,40 @@ $responsive-positions: (
   fixed,
   sticky
 ) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px,
+  xl: 320px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px,
+  xl: 296px
+) !default;
+
+$sidebar-wide-width: (
+  md: 296px,
+  lg: 320px,
+  xl: 344px
+) !default;
+
+$gutter: (
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5
+) !default;
+
+$gutter-condensed: (
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4
+) !default;
+
+$gutter-spacious: (
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6
+) !default;

src/truncate/index.scss

@@ -1 +1,2 @@
+@import "../support/index.scss";
 @import "./truncate.scss";

src/truncate/truncate.scss

@@ -29,3 +29,33 @@
     max-width: 10000px !important;
   }
 }
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+
+  .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    + .Truncate-text {
+      margin-left: $spacer-1;
+    }
+
+    &.Truncate-text--primary {
+      flex-basis: 200%;
+    }
+
+    &.Truncate-text--expandable:hover,
+    &.Truncate-text--expandable:focus,
+    &.Truncate-text--expandable:active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+}

src/utilities/colors.scss

@@ -24,7 +24,6 @@
 .color-border-primary   { border-color: var(--color-border-primary) !important; }
 .color-border-secondary { border-color: var(--color-border-secondary) !important; }
 .color-border-tertiary  { border-color: var(--color-border-tertiary) !important; }
-.color-border-overlay   { border-color: var(--color-border-overlay) !important; }
 .color-border-inverse   { border-color: var(--color-border-inverse) !important; }
 .color-border-info      { border-color: var(--color-border-info) !important; }
 .color-border-success   { border-color: var(--color-border-success) !important; }

src/utilities/margin.scss

@@ -5,34 +5,45 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($spacer-map)) {
         /* Set a $size margin to all sides at $breakpoint */
         .m#{$variant}-#{$scale}  { margin: $size !important; }
+      }
+
       /* Set a $size margin on the top at $breakpoint */
       .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      /* Set a $size margin on the right at $breakpoint */
-      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
       /* Set a $size margin on the bottom at $breakpoint */
       .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
+
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size margin on the right at $breakpoint */
+        .mr#{$variant}-#{$scale} { margin-right: $size !important; }
         /* Set a $size margin on the left at $breakpoint */
         .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+      }
 
       @if ($size != 0) {
         /* Set a negative $size margin on top at $breakpoint */
         .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
-        /* Set a negative $size margin on the right at $breakpoint */
-        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
         /* Set a negative $size margin on the bottom at $breakpoint */
         .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
+
+        @if ($scale < length($spacer-map)) {
+          /* Set a negative $size margin on the right at $breakpoint */
+          .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
           /* Set a negative $size margin on the left at $breakpoint */
           .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
         }
+      }
 
+      @if ($scale < length($spacer-map)) {
         /* Set a $size margin on the left & right at $breakpoint */
         .mx#{$variant}-#{$scale} {
           margin-right: $size !important;
           margin-left: $size !important;
         }
+      }
 
       /* Set a $size margin on the top & bottom at $breakpoint */
       .my#{$variant}-#{$scale} {
@@ -48,3 +59,7 @@
     }
   }
 }
+
+.m-auto { margin: auto !important; }
+
+.mt-auto { margin-top: auto !important; }

src/utilities/padding.scss

@@ -5,9 +5,12 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($spacer-map)) {
         /* Set a $size padding to all sides at $breakpoint */
         .p#{$variant}-#{$scale}  { padding: $size !important; }
+      }
+
       /* Set a $size padding to the top at $breakpoint */
       .pt#{$variant}-#{$scale} { padding-top: $size !important; }
       /* Set a $size padding to the right at $breakpoint */
@@ -17,11 +20,13 @@
       /* Set a $size padding to the left at $breakpoint */
       .pl#{$variant}-#{$scale} { padding-left: $size !important; }
 
+      @if ($scale < length($spacer-map)) {
         /* Set a $size padding to the left & right at $breakpoint */
         .px#{$variant}-#{$scale} {
           padding-right: $size !important;
           padding-left: $size !important;
         }
+      }
 
       /* Set a $size padding to the top & bottom at $breakpoint */
       .py#{$variant}-#{$scale} {

vercel.json

@@ -1,7 +1,7 @@
 {
   "version": 2,
   "name": "primer-css",
-  "alias": "primer-css.now.sh",
+  "alias": "primer-css.vercel.app",
   "builds": [
     {
       "src": "docs/package.json",