Merge pull request #999 from primer/release-14.1.0

Primer CSS 14.1.0
2025-01-04 12:22:17 +03:00 · 2019-12-18 13:59:44 +09:00 · 2019-12-18 13:59:44 +09:00 · 3f72b945d6
commit 3f72b945d6
parent b1d37d1a28 3b34fb0280
20 changed files with 424 additions and 80 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,14 +1,15 @@
 *.log
 *.tgz
 .DS_Store
-.changelog
+.cache/
+.changelog/
 .next/
 .sass-cache
-.stylelintcache
 .storybuild/
+.stylelintcache
 _site
 dist/
+docs/dist
 node_modules/
-searchIndex.js
-.cache/
 public/
+searchIndex.js
--- a/.nowignore
+++ b/.nowignore
@ -0,0 +1,5 @@
+.*.sw?
+.changelog/
+dist/
+docs/dist
+docs/public/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,26 +1,46 @@
+### :rocket: Enhancements
+- [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities
+- [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables
+
+### :bug: Bug fixes
+- [#998](https://github.com/primer/css/pull/998) Use a gray background when hovering SelectMenu items
+
+### :memo: Documentation
+- [#989](https://github.com/primer/css/pull/989) Add link to the Stylelint guide
+- [#1000](https://github.com/primer/css/pull/1000) Update contributing guide for a general audience
+- [#972](https://github.com/primer/css/pull/972) Variables page
+
+### :house: Internal
+- [#997](https://github.com/primer/css/pull/997) Fix CHANGELOG links
+
+### Committers
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+- [@skullface](https://github.com/skullface)
+
 ## 14.0.0

 ### :boom: Breaking changes
- [#922](https://github.com/primer/css/922) More SelectMenu improvements
- [#966](https://github.com/primer/css/966) Rename `.flex-item-equal` to `.flex-1`
- [#973](https://github.com/primer/css/973) Deprecate variables in 14.0.0
+- [#922](https://github.com/primer/css/pull/922) More SelectMenu improvements
+- [#966](https://github.com/primer/css/pull/966) Rename `.flex-item-equal` to `.flex-1`
+- [#973](https://github.com/primer/css/pull/973) Deprecate variables in 14.0.0

 ### :rocket: Enhancements
- [#987](https://github.com/primer/css/987) Add .position-sticky utility
- [#979](https://github.com/primer/css/979) Add `.radio-group` component
- [#981](https://github.com/primer/css/981) Autocomplete + Suggester components
- [#978](https://github.com/primer/css/978) Add `.css-truncate-overflow`
- [#974](https://github.com/primer/css/974) Add Animated Ellipsis
- [#971](https://github.com/primer/css/971) Add variable deprecation data and tests
+- [#987](https://github.com/primer/css/pull/987) Add .position-sticky utility
+- [#979](https://github.com/primer/css/pull/979) Add `.radio-group` component
+- [#981](https://github.com/primer/css/pull/981) Autocomplete + Suggester components
+- [#978](https://github.com/primer/css/pull/978) Add `.css-truncate-overflow`
+- [#974](https://github.com/primer/css/pull/974) Add Animated Ellipsis
+- [#971](https://github.com/primer/css/pull/971) Add variable deprecation data and tests

 ### :memo: Documentation
- [#988](https://github.com/primer/css/988) Add docs for flexbug no. 9
- [#977](https://github.com/primer/css/977) Update spacing.md
+- [#988](https://github.com/primer/css/pull/988) Add docs for flexbug no. 9
+- [#977](https://github.com/primer/css/pull/977) Update spacing.md

 ### :house: Internal
- [#952](https://github.com/primer/css/952) Async/awaitify script/dist.js
- [#963](https://github.com/primer/css/963) Generate changelog with semantic-release
- [#968](https://github.com/primer/css/968) Stylelint update
+- [#952](https://github.com/primer/css/pull/952) Async/awaitify script/dist.js
+- [#963](https://github.com/primer/css/pull/963) Generate changelog with semantic-release
+- [#968](https://github.com/primer/css/pull/968) Stylelint update

 ### Committers
 - [@BinaryMuse](https://github.com/BinaryMuse)
@ -31,20 +51,20 @@
 # 13.2.0

 ### :rocket: Enhancements
- [#959](https://github.com/primer/css/959) More buttons
- [#950](https://github.com/primer/css/950) Add Diffstat component
- [#913](https://github.com/primer/css/913) Importing TimelineItem from .com and creating matching docs
- [#953](https://github.com/primer/css/953) Add IssueLabel component
+- [#959](https://github.com/primer/css/pull/959) More buttons
+- [#950](https://github.com/primer/css/pull/950) Add Diffstat component
+- [#913](https://github.com/primer/css/pull/913) Importing TimelineItem from .com and creating matching docs
+- [#953](https://github.com/primer/css/pull/953) Add IssueLabel component

 ### :bug: Bug fixes
- [#945](https://github.com/primer/css/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected`
+- [#945](https://github.com/primer/css/pull/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected`

 ### :memo: Documentation
- [#939](https://github.com/primer/css/939) Fix `Box--overlay` example
- [#943](https://github.com/primer/css/943) Fix broken links to typography utilities
+- [#939](https://github.com/primer/css/pull/939) Fix `Box--overlay` example
+- [#943](https://github.com/primer/css/pull/943) Fix broken links to typography utilities

 ### :house: Internal
- [#946](https://github.com/primer/css/946) Add `TODO@version` stylelint rule (local)
+- [#946](https://github.com/primer/css/pull/946) Add `TODO@version` stylelint rule (local)

 ### Committers
 - [@MohamedElidrissi](https://github.com/MohamedElidrissi)
--- a/docs/.eslintrc.json
+++ b/docs/.eslintrc.json
@ -13,5 +13,8 @@
    "react": {
      "version": "detect"
    }
+  },
+  "globals": {
+    "__DEV__": "readonly"
  }
 }
--- a/docs/content/components/select-menu.md
+++ b/docs/content/components/select-menu.md
@ -254,12 +254,48 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
 <div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
 ```

-## Additional filter and footer
+## Footer
+
+Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
+
+```html live
+<details class="details-reset details-overlay" open>
+  <summary class="btn" aria-haspopup="true">
+    Choose an item
+  </summary>
+  <div class="SelectMenu">
+    <div class="SelectMenu-modal">
+      <header class="SelectMenu-header">
+        <h3 class="SelectMenu-title">Title</h3>
+        <button class="SelectMenu-closeButton" type="button">
+          <!-- <%= octicon "x" %> -->
+          <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
+            <path fill-rule="evenodd"
+              d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
+            />
+          </svg>
+        </button>
+      </header>
+      <div class="SelectMenu-list">
+        <button class="SelectMenu-item" role="menuitem">Item 1</button>
+        <button class="SelectMenu-item" role="menuitem">Item 2</button>
+        <button class="SelectMenu-item" role="menuitem">Item 3</button>
+        <button class="SelectMenu-item" role="menuitem">Item 4</button>
+        <button class="SelectMenu-item" role="menuitem">Item 5</button>
+      </div>
+      <footer class="SelectMenu-footer">Footer</footer>
+    </div>
+  </div>
+</details>
+
+<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
+<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
+```
+
+## Filter

 If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing.

-Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
-
 ```html live
 <details class="details-reset details-overlay" open>
  <summary class="btn" aria-haspopup="true">
--- a/docs/content/getting-started/contributing.md
+++ b/docs/content/getting-started/contributing.md
@ -3,13 +3,15 @@ title: Contributing
 description: Guidelines for contributing to GitHub's CSS
 ---

+While this contributing guide is for GitHub employees, all contributions from the community are welcome.
+
 ## Decision process for adding new styles

 ### Components

 [Components](/css/components) are frequently used visual patterns we've abstracted into a set of convenient styles, that would be otherwise difficult to achieve with utilities and layout objects.

-Making a decision on whether new components should be added is done on a case by case basis. It's not always easy to make that decision but here are some questions you should ask yourself before moving forward with a pull request. The design systems team will help you make this decision.
+Decisions to add new components are made on a case-by-case basis, with help from the GitHub Design Systems team. Some questions that we use to guide these decisions include:

 - How often is this pattern used across the site?
 - Could these styles be achieved with existing components, objects, and utilities?
@ -39,7 +41,7 @@ Many of the same questions can be applied to objects and utilities, however the

 It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue:

-1. What the pattern is and how it's being used across the site - post screenshots and urls where possible. If you need help identifying where the pattern is being used, call that out here and cc the relevant team and/or cc `@product-design` to help.
+1. What the pattern is, and how it's being used on GitHub.com. Post screenshots and/or URLs whenever possible. If you need help identifying where the pattern is used, call that out in the issue.
 2. Why you think a new pattern is needed (this should answer the relevant questions above).
 3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is.
 4. Add the appropriate label(s):
@ -66,7 +68,7 @@ New styles we add should be used in as many places as makes sense to in producti

 If you get to this step you've helped contribute to a style guide that many of your colleagues use on a daily basis, you've contributed to an open source project that's referenced and used by many others, and you've helped improve the usability and consistency of GitHub for our users. Thank you!

-Let the [design systems team](https://github.com/github/design-systems) know if we can improve these guidelines and make following this process any easier.
+[Please open an issue](#step-1-open-an-issue) if we can improve these guidelines and make following this process any easier.


 ## Removing styles and variables
@ -161,7 +163,7 @@ Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code)

 Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change.

-To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so I recommend reviewing [semver](http://semver.org/) and/or ask in [#design-systems](https://github.slack.com/archives/design-systems) or and experienced open-source contributor.
+To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue).

 [semantic versioning]: https://semver.org
 [script/test-deprecations.js]: https://github.com/primer/css/tree/master/script/test-deprecations.js
--- a/docs/content/support/variables.mdx
+++ b/docs/content/support/variables.mdx
@ -0,0 +1,16 @@
+---
+title: Variables
+path: support/variables
+status: Experimental
+bundle: alerts
+---
+
+import {Variables, DeprecationIcon} from '../../src/variables'
+
+<Variables>
+
+The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables).
+
+Variables with a <DeprecationIcon /> are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided.
+
+</Variables>
--- a/docs/content/tools/linting.md
+++ b/docs/content/tools/linting.md
@ -103,3 +103,7 @@ We test for the proper use of the [Octicons helper](https://github.com/primer/oc
 ## IE rule limit

 We check that our compiled CSS assets don't contain more selectors than the [IE CSS selector limits](https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/).
+
+## Linting dotcom
+
+There are a few handy scripts to make your life easier when working with CSS on dotcom, especially when doing bigger refactors. Checkout the [Stylelint guide](https://github.com/github/design-systems/blob/master/tools/stylelint.md).
--- a/docs/content/utilities/typography.md
+++ b/docs/content/utilities/typography.md
@ -8,7 +8,7 @@ bundle: utilities

 Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.

- 
+

 Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.

@ -67,7 +67,8 @@ Lighter font-weight utilities are available in a limited range. Lighter font-wei
 ```

 ## Line height styles
-Change the line height density with these utilities.
+
+Change the line height density with these utilities. Responsive variants are also available (e.g. `.lh-sm-condensed`).

 ```html live
 <p class="lh-default">
--- a/docs/gatsby-node.js
+++ b/docs/gatsby-node.js
@ -0,0 +1,12 @@
+exports.onCreateWebpackConfig = ({actions, stage, plugins}) => {
+  actions.setWebpackConfig({
+    node: {
+      fs: 'empty'
+    },
+    plugins: [
+      plugins.define({
+        __DEV__: stage === 'develop' || stage === 'develop-html'
+      })
+    ]
+  })
+}
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -1,8 +1,7 @@
 {
  "name": "docs",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
  "requires": true,
+  "lockfileVersion": 1,
  "dependencies": {
    "@babel/code-frame": {
      "version": "7.5.5",
@ -1449,11 +1448,6 @@
        }
      }
    },
-    "@primer/css": {
-      "version": "12.5.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.5.0.tgz",
-      "integrity": "sha512-MyA2hoCY3UAmMKPHPN+LM1HrwGz5VR92fkEkIzAQgHBYMPstT77tjHkO8OPoWW//DShdYMYAgukZdMJ8lnsfbg=="
-    },
    "@primer/gatsby-theme-doctocat": {
      "version": "0.15.0",
      "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.15.0.tgz",
@ -6247,11 +6241,18 @@
      }
    },
    "eslint-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz",
-      "integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
+      "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
      "requires": {
-        "eslint-visitor-keys": "^1.0.0"
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
+          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A=="
+        }
      }
    },
    "eslint-visitor-keys": {
@ -9138,9 +9139,9 @@
      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
    },
    "handlebars": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz",
-      "integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz",
+      "integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==",
      "requires": {
        "neo-async": "^2.6.0",
        "optimist": "^0.6.1",
@ -17924,15 +17925,21 @@
      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
    },
    "uglify-js": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
-      "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==",
+      "version": "3.6.9",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.9.tgz",
+      "integrity": "sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==",
      "optional": true,
      "requires": {
-        "commander": "~2.20.0",
+        "commander": "~2.20.3",
        "source-map": "~0.6.1"
      },
      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "optional": true
+        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
--- a/docs/package.json
+++ b/docs/package.json
@ -1,18 +1,16 @@
 {
-  "name": "docs",
  "private": true,
-  "version": "1.0.0",
-  "license": "MIT",
+  "name": "docs",
+  "repository": "primer/css",
  "scripts": {
    "clean": "gatsby clean",
-    "develop": "gatsby develop -H 0.0.0.0",
-    "build": "gatsby build --prefix-paths",
-    "now-build": "npm run build"
+    "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
+    "build-content": "gatsby build --prefix-paths",
+    "build": "./script/now-build.sh"
  },
  "dependencies": {
    "@loadable/component": "^5.10.2",
    "@primer/components": "^13.2.0",
-    "@primer/css": "^12.4.1",
    "@primer/gatsby-theme-doctocat": "^0.15.0",
    "@primer/octicons": "^9.1.1",
    "@primer/octicons-react": "^9.1.1",
@ -36,5 +34,7 @@
    "styled-components": "^4.3.2",
    "title-case": "^2.1.1"
  },
-  "repository": "primer/css"
+  "engines": {
+    "node": "12.x"
+  }
 }
--- a/docs/script/now-build.sh
+++ b/docs/script/now-build.sh
@ -0,0 +1,12 @@
+#!/bin/bash -e
+
+# Build the base project so we can pull out the JSON data
+cd ..
+npm ci
+npm run dist
+cp -rf dist docs
+
+# Now build the docs site using that data
+cd docs
+npm ci
+CI=true npm run build-content
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@ -16,6 +16,8 @@
      url: /support/typography
    - title: Marketing support
      url: /support/marketing-variables
+    - title: Variables
+      url: /support/variables
 - title: Utilities
  url: /utilities
  children:
--- a/docs/src/variables.js
+++ b/docs/src/variables.js
@ -0,0 +1,206 @@
+import React from 'react'
+import {Flex, Link, Text, Tooltip, Flash} from '@primer/components'
+import Octicon, {Alert} from '@primer/octicons-react'
+import themeGet from '@styled-system/theme-get'
+import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table'
+import styled from 'styled-components'
+
+const Table = styled(DoctocatTable)`
+  font-size: ${themeGet('fontSizes.1')}px;
+
+  td,
+  th {
+    text-align: left;
+    vertical-align: top;
+  }
+
+  tr:target {
+    th,
+    td {
+      background-color: ${themeGet('colors.yellow.0')};
+    }
+  }
+`
+
+function useVariables() {
+  const deprecations = useDeprecations()
+
+  return React.useMemo(() => {
+    let variablesByFile = new Map()
+
+    try {
+      const variables = require('../dist/variables.json')
+
+      for (const name of Object.keys(variables)) {
+        if (name.endsWith('-font')) {
+          delete variables[name]
+        }
+      }
+
+      variablesByFile = Object.entries(variables).reduce((map, [name, variable]) => {
+        const {
+          source: {path}
+        } = variable
+
+        variable.name = name
+        variable.deprecated = deprecations.variables.hasOwnProperty(name)
+
+        if (map.has(path)) {
+          map.get(path).push(variable)
+        } else {
+          map.set(path, [variable])
+        }
+
+        return map
+      }, variablesByFile)
+
+      for (const variables of variablesByFile.values()) {
+        variables.sort((a, b) => {
+          return a.deprecated - b.deprecated || a.source.line - b.source.line
+        })
+      }
+    } catch (err) {
+      // do nothing
+    }
+
+    return variablesByFile
+  }, [])
+}
+
+function useDeprecations() {
+  return React.useMemo(() => {
+    try {
+      const deprecations = require('../dist/deprecations.json')
+      return deprecations
+    } catch (err) {
+      return {}
+    }
+  }, [])
+}
+
+function Variables({children, ...props}) {
+  const variablesByFile = useVariables()
+
+  if (variablesByFile.size === 0) {
+    return (
+      <>
+        <h2>No data available</h2>
+        {__DEV__ && (
+          <Flash scheme="red">
+            This probably means that the root project has not been built; run `npm run dist` and restart your
+            development server.
+          </Flash>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {children}
+      <VariablesDetails variablesByFile={variablesByFile} {...props} />
+    </>
+  )
+}
+
+function VariablesDetails({variablesByFile, ...props}) {
+  return Array.from(variablesByFile.entries()).map(([path, variables]) => (
+    <React.Fragment key={path}>
+      <h3>
+        Defined in <Link href={`https://github.com/primer/css/tree/master/${path}`}>{path}</Link>
+      </h3>
+      <Table {...props}>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+            <th>Aliases</th>
+          </tr>
+        </thead>
+        <tbody>
+          {variables.map(({name, computed, source, refs}) => (
+            <tr id={name} key={name}>
+              <th scope="row">
+                <Flex justifyContent="space-between">
+                  <Link href={`#${name}`} color="gray.4" mr={2}>
+                    #
+                  </Link>
+                  <Flex.Item flex="1">
+                    <Link href={`https://github.com/primer/css/tree/master/${source.path}#L${source.line}`}>
+                      <Mono nowrap>{name}</Mono>
+                    </Link>
+                  </Flex.Item>
+                  <Flex.Item justifySelf="end">
+                    <DeprecationFlag variable={name} ml={2} />
+                  </Flex.Item>
+                </Flex>
+              </th>
+              <td>
+                <Swatch value={computed} mr={2} />
+                <Mono nowrap>{computed}</Mono>
+              </td>
+              <td>
+                <RefList refs={refs} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </React.Fragment>
+  ))
+}
+
+function Mono({nowrap, ...rest}) {
+  return <Text fontFamily="mono" css={nowrap ? {whiteSpace: 'nowrap'} : null} {...rest} />
+}
+
+function Swatch({value, ...rest}) {
+  return /^(#|rgb|hsl)/.test(value) ? <SwatchBox {...rest} bg={value} /> : null
+}
+
+const SwatchBox = styled(Text)`
+  display: inline-block;
+  vertical-align: baseline;
+  width: ${p => p.size};
+  height: ${p => p.size};
+  border: 1px solid ${themeGet('colors.gray.3')};
+  border-radius: ${themeGet('radii.1')}px;
+  margin-bottom: -2px;
+`
+
+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()
+
+  const dep = deprecations.variables[variable]
+  return dep ? (
+    <Text {...rest}>
+      <Tooltip aria-label={`Deprecation planned in version ${dep.version} (${dep.message})`}>
+        <DeprecationIcon />
+      </Tooltip>
+    </Text>
+  ) : null
+}
+
+function DeprecationIcon() {
+  return (
+    <Text color="red.5">
+      <Octicon icon={Alert} />
+    </Text>
+  )
+}
+
+export {Variables, DeprecationIcon}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "14.0.0",
+  "version": "14.1.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "14.0.0",
+  "version": "14.1.0",
  "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
  "homepage": "https://primer.style/css",
  "author": "GitHub, Inc.",
--- a/src/marketing/support/variables.scss
+++ b/src/marketing/support/variables.scss
@ -17,6 +17,14 @@ $marketing-font-path: "/fonts/" !default;
  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;
+}
+
 $font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

 // Builds upon @primer/css/support/variables/typography.scss
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@ -1,7 +1,13 @@
 // stylelint-disable selector-max-type
-
 // selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
-// TODO: Introduce an additional .intent-keyboard class
+
+// TODO@15.0.0: remove styles below
+@media (hover: hover) {
+  .SelectMenu-tab:not([aria-checked="true"]):hover,
+  .SelectMenu-tab:not([aria-checked="true"]):active {
+    background-color: $bg-white;
+  }
+}

 $SelectMenu-max-height: 480px !default;

@ -264,6 +270,7 @@ $SelectMenu-max-height: 480px !default;
  &[aria-selected="true"] {
    z-index: 1; // Keeps box-shadow visible when hovering
    color: $text-gray-dark;
+    cursor: default;
    background-color: $bg-white;
    // stylelint-disable-next-line primer/box-shadow
    box-shadow: 0 0 0 1px $border-color;
@ -377,14 +384,11 @@ $SelectMenu-max-height: 480px !default;
@media (hover: hover) {
  body:not(.intent-mouse) .SelectMenu-item:focus,
  .SelectMenu-item:hover {
-    color: $text-white;
-    background-color: $bg-blue;
+    background-color: $bg-gray;
  }

  .SelectMenu-item:active {
-    color: $text-white;
-    // stylelint-disable-next-line primer/colors
-    background-color: $blue-400;
+    background-color: $bg-gray-light;
  }

  body:not(.intent-mouse) .SelectMenu-tab:focus {
@ -392,13 +396,13 @@ $SelectMenu-max-height: 480px !default;
    background-color: $blue-100;
  }

-  .SelectMenu-tab:not([aria-checked="true"]):hover {
+  .SelectMenu-tab:not([aria-selected="true"]):hover {
    color: $text-gray-dark;
    // stylelint-disable-next-line primer/colors
    background-color: $gray-200;
  }

-  .SelectMenu-tab:not([aria-checked="true"]):active {
+  .SelectMenu-tab:not([aria-selected="true"]):active {
    color: $text-gray-dark;
    background-color: $bg-gray;
  }
--- a/src/utilities/typography.scss
+++ b/src/utilities/typography.scss
@ -161,14 +161,19 @@
 // Close to commonly used line-heights. Most line-heights
 // combined with type size equate to whole pixels.
 // Will be improved with future typography scale updates.
-/* Set the line height to ultra condensed */
-.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
-/* Set the line height to condensed */
-.lh-condensed { line-height: $lh-condensed !important; }
-/* Set the line height to default */
-.lh-default { line-height: $lh-default !important; }
-/* Set the line height to zero */
-.lh-0 { line-height: 0 !important; }
+// Responsive line-height
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Set the line height to ultra condensed */
+    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+    /* Set the line height to condensed */
+    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
+    /* Set the line height to default */
+    .lh#{$variant}-default { line-height: $lh-default !important; }
+    /* Set the line height to zero */
+    .lh#{$variant}-0 { line-height: 0 !important; }
+  }
+}

 // Text alignments
 // Responsive text alignment