Merge branch 'master' into setup_changesets

2024-12-24 14:42:26 +03:00 · 2021-03-25 17:14:26 -07:00 · 2021-03-25 17:14:26 -07:00 · ce12bc5cd2
commit ce12bc5cd2
parent 1ab06d37ca f857215520
111 changed files with 9098 additions and 16360 deletions
--- a/.node-version
+++ b/.node-version
@ -0,0 +1 @@
 14.15.2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,21 @@
 ## 16.0.0
 ### :boom: Breaking Change
 - Update to Primer Primitives `4.0.0` [primer/primitives#43](https://github.com/primer/primitives/pull/43)
 - Add color modes [#1131](https://github.com/primer/css/pull/1131)
 ### :rocket: Enhancement
 - Add `flex-shrink: 0` to `.avatar` [#1183](https://github.com/primer/css/pull/1183)
 - Adding timeline-badge success border [#1246](https://github.com/primer/css/pull/1246)
 - Add `.anim-rotate` utility class [#1251](https://github.com/primer/css/pull/1251)
 ### :nail_care: Polish
 - Move marketing `@font-face` declarations from vars to type [#1238](https://github.com/primer/css/pull/1238)
 ### :memo: Documentation
 - Update documentation with color modes  [#1186](https://github.com/primer/css/pull/1186)
 ## 15.2.0
 ### :rocket: Enhancements
--- a/MIGRATING.md
+++ b/MIGRATING.md
@ -1,74 +0,0 @@
 # 12.0.0
 The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
 ## npm
 First, install the new package.
 ```sh
 npm install --save @primer/css
 ```
 If you use the `primer` package, all you'll need to do is:
 ```sh
 npm uninstall --save primer
 ```
 If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
 ```sh
 jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
 ```
 And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
 ## Sass
 There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
 ### Sass imports
 Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
 * If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
 * Otherwise...
    1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
        * `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
        * `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
    1. Replace `primer-` with `@primer/css/`, e.g.
        * `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
        * `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
    1. Delete `lib/` from every Primer CSS path, e.g.
        * `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
        * `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
 If your text editor supports search and replace regular expressions, the following patterns should work:
 | find | replace |
 | :--- | :--- |
 | `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
 | `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
 | `primer\b` | `@primer/css`
 #### `primer-migrate`
 You can also use the included [`primer-migrate` script](bin/primer-migrate):
 ```sh
 npx -p @primer/css primer-migrate path/to/**/*.scss
 ```
 ### Sass include paths
 If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
 If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
 ## Compiled CSS files
 The compiled CSS files can be found under `/dist` in case you want to directly link to them.
 ## Fonts
 The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
 1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
 1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
 1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
 [help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration
--- a/deprecations.js
+++ b/deprecations.js
@ -4,6 +4,454 @@
 * array and a "message" string.
 */
 const versionDeprecations = {
  '16.0.0': [
    {
      selectors: [
        '.btn-blue',
        '.btn-blue:focus',
        '.btn-blue.focus',
        '.btn-blue:hover',
        '.btn-blue.hover',
        '.btn-blue:active',
        '.btn-blue.selected',
        '.btn-blue[aria-selected=true]',
        '[open]>.btn-blue',
        '.btn-blue:disabled',
        '.btn-blue.disabled',
        '.btn-blue[aria-disabled=true]',
        '.btn-blue .Counter',
        '.markdown-body li',
        '.input-dark',
        '.input-dark:-ms-input-placeholder',
        '.input-dark::-ms-input-placeholder',
        '.input-dark::placeholder',
        '.input-dark.focus',
        '.input-dark:focus',
        '::-ms-input-placeholder',
        '.border-blue',
        '.border-blue-light',
        '.border-green',
        '.border-green-light',
        '.border-red',
        '.border-red-light',
        '.border-purple',
        '.border-yellow',
        '.border-gray-light',
        '.border-gray-dark',
        '.border-black-fade',
        '.border-white-fade',
        '.border-white-fade-15',
        '.border-white-fade-30',
        '.border-white-fade-50',
        '.border-white-fade-70',
        '.border-white-fade-85',
        '.box-shadow',
        '.box-shadow-medium',
        '.box-shadow-large',
        '.box-shadow-extra-large',
        '.bg-white',
        '.bg-blue',
        '.bg-blue-light',
        '.bg-gray-dark',
        '.bg-gray',
        '.bg-gray-light',
        '.bg-green',
        '.bg-green-light',
        '.bg-red',
        '.bg-red-light',
        '.bg-yellow',
        '.bg-yellow-light',
        '.bg-yellow-dark',
        '.bg-purple',
        '.bg-pink',
        '.bg-purple-light',
        '.bg-orange',
        '.color-gray-0',
        '.bg-gray-0',
        '.color-gray-1',
        '.bg-gray-1',
        '.color-gray-2',
        '.bg-gray-2',
        '.color-gray-3',
        '.bg-gray-3',
        '.color-gray-4',
        '.bg-gray-4',
        '.color-gray-5',
        '.bg-gray-5',
        '.color-gray-6',
        '.bg-gray-6',
        '.color-gray-7',
        '.bg-gray-7',
        '.color-gray-8',
        '.bg-gray-8',
        '.color-gray-9',
        '.bg-gray-9',
        '.color-blue-0',
        '.bg-blue-0',
        '.color-blue-1',
        '.bg-blue-1',
        '.color-blue-2',
        '.bg-blue-2',
        '.color-blue-3',
        '.bg-blue-3',
        '.color-blue-4',
        '.bg-blue-4',
        '.color-blue-5',
        '.bg-blue-5',
        '.color-blue-6',
        '.bg-blue-6',
        '.color-blue-7',
        '.bg-blue-7',
        '.color-blue-8',
        '.bg-blue-8',
        '.color-blue-9',
        '.bg-blue-9',
        '.color-green-0',
        '.bg-green-0',
        '.color-green-1',
        '.bg-green-1',
        '.color-green-2',
        '.bg-green-2',
        '.color-green-3',
        '.bg-green-3',
        '.color-green-4',
        '.bg-green-4',
        '.color-green-5',
        '.bg-green-5',
        '.color-green-6',
        '.bg-green-6',
        '.color-green-7',
        '.bg-green-7',
        '.color-green-8',
        '.bg-green-8',
        '.color-green-9',
        '.bg-green-9',
        '.color-yellow-0',
        '.bg-yellow-0',
        '.color-yellow-1',
        '.bg-yellow-1',
        '.color-yellow-2',
        '.bg-yellow-2',
        '.color-yellow-3',
        '.bg-yellow-3',
        '.color-yellow-4',
        '.bg-yellow-4',
        '.color-yellow-5',
        '.bg-yellow-5',
        '.color-yellow-6',
        '.bg-yellow-6',
        '.color-yellow-7',
        '.bg-yellow-7',
        '.color-yellow-8',
        '.bg-yellow-8',
        '.color-yellow-9',
        '.bg-yellow-9',
        '.color-orange-0',
        '.bg-orange-0',
        '.color-orange-1',
        '.bg-orange-1',
        '.color-orange-2',
        '.bg-orange-2',
        '.color-orange-3',
        '.bg-orange-3',
        '.color-orange-4',
        '.bg-orange-4',
        '.color-orange-5',
        '.bg-orange-5',
        '.color-orange-6',
        '.bg-orange-6',
        '.color-orange-7',
        '.bg-orange-7',
        '.color-orange-8',
        '.bg-orange-8',
        '.color-orange-9',
        '.bg-orange-9',
        '.color-red-0',
        '.bg-red-0',
        '.color-red-1',
        '.bg-red-1',
        '.color-red-2',
        '.bg-red-2',
        '.color-red-3',
        '.bg-red-3',
        '.color-red-4',
        '.bg-red-4',
        '.color-red-5',
        '.bg-red-5',
        '.color-red-6',
        '.bg-red-6',
        '.color-red-7',
        '.bg-red-7',
        '.color-red-8',
        '.bg-red-8',
        '.color-red-9',
        '.bg-red-9',
        '.color-purple-0',
        '.bg-purple-0',
        '.color-purple-1',
        '.bg-purple-1',
        '.color-purple-2',
        '.bg-purple-2',
        '.color-purple-3',
        '.bg-purple-3',
        '.color-purple-4',
        '.bg-purple-4',
        '.color-purple-5',
        '.bg-purple-5',
        '.color-purple-6',
        '.bg-purple-6',
        '.color-purple-7',
        '.bg-purple-7',
        '.color-purple-8',
        '.bg-purple-8',
        '.color-purple-9',
        '.bg-purple-9',
        '.color-pink-0',
        '.bg-pink-0',
        '.color-pink-1',
        '.bg-pink-1',
        '.color-pink-2',
        '.bg-pink-2',
        '.color-pink-3',
        '.bg-pink-3',
        '.color-pink-4',
        '.bg-pink-4',
        '.color-pink-5',
        '.bg-pink-5',
        '.color-pink-6',
        '.bg-pink-6',
        '.color-pink-7',
        '.bg-pink-7',
        '.color-pink-8',
        '.bg-pink-8',
        '.color-pink-9',
        '.bg-pink-9',
        '.text-blue',
        '.text-red',
        '.text-gray-light',
        '.text-gray',
        '.text-gray-dark',
        '.text-green',
        '.text-yellow',
        '.text-orange',
        '.text-orange-light',
        '.text-purple',
        '.text-pink',
        '.text-white',
        '.link-gray',
        '.link-gray:hover',
        '.link-gray-dark',
        '.link-gray-dark:hover',
        '.link-hover-blue:hover',
        '.muted-link',
        '.muted-link:hover',
        '.text-shadow-dark',
        '.text-shadow-light',
        '.dropdown-menu-dark',
        '.dropdown-menu-dark::before',
        '.dropdown-menu-dark::after',
        '.dropdown-menu-dark .dropdown-header',
        '.dropdown-menu-dark .dropdown-divider',
        '.dropdown-menu-dark .dropdown-item',
        '.dropdown-menu-dark.dropdown-menu-w::before',
        '.dropdown-menu-dark.dropdown-menu-w::after',
        '.dropdown-menu-dark.dropdown-menu-e::before',
        '.dropdown-menu-dark.dropdown-menu-e::after',
        '.dropdown-menu-dark.dropdown-menu-ne::before',
        '.dropdown-menu-dark.dropdown-menu-ne::after',
        '.Label--outline',
        '.Label--gray',
        '.Label--gray-darker',
        '.Label--yellow',
        '.Label--orange',
        '.Label--red',
        '.Label--outline-green',
        '.Label--green',
        '.Label--blue',
        '.Label--purple',
        '.Label--pink',
        '.State--green',
        '.State--red',
        '.State--purple',
        '.Counter--gray-light',
        '.Counter--gray',
        '.btn-transparent:active'
      ],
      message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.`
    },
    {
      variables: [
        '$bg-black',
        '$bg-black-fade',
        '$bg-blue',
        '$bg-blue-light',
        '$bg-diffstat-added',
        '$bg-diffstat-deleted',
        '$bg-diffstat-neutral',
        '$bg-gray',
        '$bg-gray-dark',
        '$bg-gray-light',
        '$bg-green',
        '$bg-green-light',
        '$bg-orange',
        '$bg-pink',
        '$bg-purple',
        '$bg-purple-light',
        '$bg-red',
        '$bg-red-light',
        '$bg-white',
        '$bg-yellow',
        '$bg-yellow-dark',
        '$bg-yellow-light',
        '$black',
        '$black-fade-15',
        '$black-fade-30',
        '$black-fade-50',
        '$black-fade-70',
        '$black-fade-85',
        '$blue',
        '$blue-000',
        '$blue-100',
        '$blue-200',
        '$blue-300',
        '$blue-400',
        '$blue-500',
        '$blue-600',
        '$blue-700',
        '$blue-800',
        '$blue-900',
        '$border-black-fade',
        '$border-blue',
        '$border-blue-light',
        '$border-color',
        '$border-color-button',
        '$border-gray',
        '$border-gray-dark',
        '$border-gray-darker',
        '$border-gray-light',
        '$border-green',
        '$border-green-light',
        '$border-purple',
        '$border-red',
        '$border-red-light',
        '$border-white',
        '$border-white-fade',
        '$border-yellow',
        '$box-shadow',
        '$box-shadow-extra-large',
        '$box-shadow-focus',
        '$box-shadow-highlight',
        '$box-shadow-inset',
        '$box-shadow-large',
        '$box-shadow-medium',
        '$btn-active-shadow',
        '$btn-input-focus-shadow',
        '$form-control-shadow',
        '$gray',
        '$gray-000',
        '$gray-100',
        '$gray-200',
        '$gray-300',
        '$gray-400',
        '$gray-500',
        '$gray-600',
        '$gray-700',
        '$gray-800',
        '$gray-900',
        '$gray-dark',
        '$gray-light',
        '$green',
        '$green-000',
        '$green-100',
        '$green-200',
        '$green-300',
        '$green-400',
        '$green-500',
        '$green-600',
        '$green-700',
        '$green-800',
        '$green-900',
        '$orange',
        '$orange-000',
        '$orange-100',
        '$orange-200',
        '$orange-300',
        '$orange-400',
        '$orange-500',
        '$orange-600',
        '$orange-700',
        '$orange-800',
        '$orange-900',
        '$pink-000',
        '$pink-100',
        '$pink-200',
        '$pink-300',
        '$pink-400',
        '$pink-500',
        '$pink-600',
        '$pink-700',
        '$pink-800',
        '$pink-900',
        '$purple',
        '$purple-000',
        '$purple-100',
        '$purple-200',
        '$purple-300',
        '$purple-400',
        '$purple-500',
        '$purple-600',
        '$purple-700',
        '$purple-800',
        '$purple-900',
        '$red',
        '$red-000',
        '$red-100',
        '$red-200',
        '$red-300',
        '$red-400',
        '$red-500',
        '$red-600',
        '$red-700',
        '$red-800',
        '$red-900',
        '$text-black',
        '$text-blue',
        '$text-gray',
        '$text-gray-dark',
        '$text-gray-light',
        '$text-green',
        '$text-orange',
        '$text-orange-light',
        '$text-pink',
        '$text-purple',
        '$text-red',
        '$text-white',
        '$text-yellow',
        '$tooltip-background-color',
        '$tooltip-text-color',
        '$white',
        '$white-fade-15',
        '$white-fade-30',
        '$white-fade-50',
        '$white-fade-70',
        '$white-fade-85',
        '$yellow',
        '$yellow-000',
        '$yellow-100',
        '$yellow-200',
        '$yellow-300',
        '$yellow-400',
        '$yellow-500',
        '$yellow-600',
        '$yellow-700',
        '$yellow-800',
        '$yellow-900',
        '$blue-mktg',
        '$green-mktg'
      ],
      message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.`
    }
  ],
  '15.0.0': [
    {
      selectors: [
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@ -5,63 +5,100 @@ status: Stable
 source: 'https://github.com/primer/css/tree/master/src/buttons'
 bundle: buttons
 ---
 <Note>
  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>
 Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
-## Default button
+```html live
 <button class="btn" type="button">Button</button>
 ```
-Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
+Note: When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
 When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
 ```html live
 <button class="btn mr-2" type="button">Button button</button>
 <a class="btn" href="#url" role="button">Link button</a>
 ```
-You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
+## Button types
 ### Default
 Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
 ```html live
-<button class="btn mr-2" type="button">Button</button>
+<button class="btn" type="button">Default</button>
 <button class="btn btn-sm" type="button">Small button</button>
 ```
-## Primary button
+### Primary
 Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
 ```html live
-<button class="btn btn-primary mr-2" type="button">Primary button</button>
+<button class="btn btn-primary" type="button">Primary</button>
 <button class="btn btn-sm btn-primary" type="button">Small primary button</button>
 ```
-## Danger button
+### Outline
 Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
 ```html live
 <button class="btn btn-danger mr-2" type="button">Danger button</button>
 <button class="btn btn-sm btn-danger" type="button">Small danger button</button>
 ```
 ## Outline button
 Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
 ```html live
-<button class="btn btn-outline mr-2" type="button">Outline button</button>
+<button class="btn btn-outline" type="button">Outline</button>
 <button class="btn btn-sm btn-outline" type="button">Outline button</button>
 ```
-## Large button
+### Danger
-Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
+Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
 ```html live
 <button class="btn btn-danger" type="button">Danger</button>
 ```
 ## Button states
 ### Selected
 Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups).
 ```html live
 <div class="BtnGroup d-block mb-2">
  <button class="BtnGroup-item btn" type="button">Button</button>
  <button class="BtnGroup-item btn" type="button" aria-selected="true">Button</button>
  <button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
 </div>
 <div class="BtnGroup d-block mb-2 ml-0">
  <button class="BtnGroup-item btn btn-outline" type="button">Button</button>
  <button class="BtnGroup-item btn btn-outline" type="button" aria-selected="true">Button</button>
  <button class="BtnGroup-item btn btn-outline" type="button">Button</button>
 </div>
 ```
 ### Disabled
 Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 ```html live
 <button class="btn mr-2" type="button" aria-disabled="true">Disabled</button>
 <button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled</button>
 <button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled</button>
 <button class="btn btn-danger" type="button" aria-disabled="true">Disabled</button>
 ```
 ## Button variations
 ### Sizes
 Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrese or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.
 [Type scale utilities](/support/typography#type-scale) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
 ```html live
-<button class="btn btn-large mr-2" type="button">Large button</button>
+<button class="btn btn-sm mr-2" type="button">Small</button>
-<a class="btn btn-large" href="#url" role="button">Large link button</a>
+<button class="btn mr-2" type="button">Default</button>
 <button class="btn btn-large" type="button">Large</button>
 ```
 Use `.btn-large` with a type scale utility to transform the text to a bigger size.
@ -73,33 +110,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 </div>
 ```
-## Disabled state
+### Block button
 Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 ```html live
 <button class="btn mr-2" type="button" aria-disabled="true">Disabled button</button>
 <a class="btn" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 Similar styles are applied to primary, danger, and outline buttons:
 ```html live
 <button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled button</button>
 <a class="btn btn-primary" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 ```html live
 <button class="btn btn-danger mr-2" type="button" aria-disabled="true">Disabled button</button>
 <a class="btn btn-danger" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 ```html live
 <button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled button</button>
 <a class="btn btn-outline" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 ## Block button
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
@ -108,7 +119,7 @@ Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, chang
 <button class="btn btn-sm btn-block" type="button">Small block button</button>
 ```
-## Link button
+### Link button
 Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
@ -118,7 +129,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
 <button class="btn-link" type="button">Link button</button>
 ```
-## Invisible button
+### Invisible button
 When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
@ -127,44 +138,17 @@ When you want a link, but you want it padded and line heighted like a button bes
 <button class="btn" type="button">Submit</button>
 ```
-## Octicon button
+### Hidden text button
-Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
+Use `.hidden-text-expander` to indicate and toggle hidden text.
 ```html live
-<button class="btn-octicon" type="button" aria-label="Desktop icon">
+<span class="hidden-text-expander">
-  <!-- <%= octicon "device-desktop" %> -->
+  <button type="button" class="ellipsis-expander" aria-expanded="false">&hellip;</button>
-  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
+</span>
 </button>
 <button class="btn-octicon" type="button" aria-label="Pencil icon">
  <!-- <%= octicon "pencil" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
 </button>
 <button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
  <!-- <%= octicon "trashcan" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
 </button>
 <button class="btn-octicon" type="button" aria-label="Kebab icon">
  <!-- <%= octicon "kebab-horizontal" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
 </button>
 ```
-
+You can also make the expander appear inline by adding `.inline`.
 ## Close button
 When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
 ```html live
 <button class="close-button" type="button">
  <!-- <%= octicon "x" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
 </button>
 ```
 ## Button with icons
@ -201,6 +185,43 @@ Icons can be added to any button.
 </button>
 ```
 ### Icon-only button
 Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
 ```html live
 <button class="btn-octicon" type="button" aria-label="Desktop icon">
  <!-- <%= octicon "device-desktop" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
 </button>
 <button class="btn-octicon" type="button" aria-label="Pencil icon">
  <!-- <%= octicon "pencil" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
 </button>
 <button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
  <!-- <%= octicon "trashcan" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
 </button>
 <button class="btn-octicon" type="button" aria-label="Kebab icon">
  <!-- <%= octicon "kebab-horizontal" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
 </button>
 ```
 ### Close button
 When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
 ```html live
 <button class="close-button" type="button">
  <!-- <%= octicon "x" %> -->
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
 </button>
 ```
 ## Button with counts
 You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
@ -243,22 +264,26 @@ You can also use the [counter](./labels#counters) component within buttons:
 Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
 ```html live
-<div class="BtnGroup mr-2">
+<div class="BtnGroup d-block mb-2">
-  <button class="btn BtnGroup-item" type="button">Button</button>
+  <button class="BtnGroup-item btn" type="button">Button</button>
-  <button class="btn BtnGroup-item" type="button">Button</button>
+  <button class="BtnGroup-item btn" type="button">Button</button>
-  <button class="btn BtnGroup-item" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
 </div>
-<div class="BtnGroup mr-2">
+<div class="BtnGroup d-block mb-2 ml-0">
-  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-outline" type="button">Button</button>
-  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-outline" type="button">Button</button>
-  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-outline" type="button">Button</button>
 </div>
 ```
 Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
 ```html live
 <div class="BtnGroup">
-  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-sm" type="button">Button</button>
-  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-sm" type="button">Button</button>
-  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
+  <button class="BtnGroup-item btn btn-sm" type="button">Button</button>
 </div>
 ```
@ -274,15 +299,3 @@ Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, withi
  <button class="btn BtnGroup-item" type="button">Button</button>
 </div>
 ```
 ## Hidden text button
 Use `.hidden-text-expander` to indicate and toggle hidden text.
 ```html live
 <span class="hidden-text-expander">
  <button type="button" class="ellipsis-expander" aria-expanded="false">&hellip;</button>
 </span>
 ```
 You can also make the expander appear inline by adding `.inline`.
--- a/docs/content/components/dropdown.md
+++ b/docs/content/components/dropdown.md
@ -3,6 +3,10 @@ title: Dropdown
 status: New
 ---
 <Note>
  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>
 Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 ## Basic examples
@ -200,29 +204,3 @@ Align the direction of dropdown menus and their arrows with modifier classes.
  </details>
 </div>
 ```
 ### Dark
 ```html live
 <div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3 mb-n3" style="min-height: 240px;">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>
    <div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
      <div class="dropdown-header">
        Dropdown header
      </div>
      <ul>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        <li class="dropdown-divider" role="none"></li>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      </ul>
    </div>
  </details>
 </div>
 ```
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@ -7,6 +7,10 @@ source: 'https://github.com/primer/css/tree/master/src/labels'
 bundle: labels
 ---
 <Note>
  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>
 Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
 ## Labels
@ -23,38 +27,32 @@ The base `Label` style does not apply a background color and only uses the defau
 ### Label contrast
-Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
+Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
-Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`.
+Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
 ```html live
 <span class="Label">Default</span>
-<span class="Label Label--gray  ml-1">Gray</span>
+<span class="Label Label--primary ml-1">Primary</span>
-<span class="Label Label--gray-darker ml-1">Dark gray</span>
+<span class="Label Label--secondary ml-1">Secondary</span>
 ```
 ### Colored labels
-Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are:
+Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
- `Label--yellow` -> Pending/highlight
+- `Label--info`
- `Label--orange` -> Warning
+- `Label--success`
- `Label--red` -> Error
+- `Label--warning`
- `Label--green` -> Success
+- `Label--danger`
 - `Label--blue` -> Info
 ```html live
-<span class="Label mr-1 Label--yellow">Pending</span>
+<span class="Label mr-1 Label--info">Info</span>
-<span class="Label mr-1 Label--orange">Warning</span>
+<span class="Label mr-1 Label--success">Success</span>
-<span class="Label mr-1 Label--red">Error</span>
+<span class="Label mr-1 Label--warning">Warning</span>
-<span class="Label mr-1 Label--green">Success</span>
+<span class="Label mr-1 Label--danger">Danger</span>
 <span class="Label mr-1 Label--blue">Info</span>
 <span class="Label mr-1 Label--purple">PRO</span>
 <span class="Label mr-1 Label--pink">Sponsor</span>
 ```
 Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
 ### Label sizes
 If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
@ -97,32 +95,34 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
 ## States
-Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
+Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
-```html live title="State"
+- `State`
-<span class="State">Default</span>
+- `State State--draft`
-```
+- `State State--open`
-
+- `State State--merged`
-### State themes
+- `State State--closed`
 States come in a few variations that apply different colors. Use the state that best communicates the status or function.
 ```html live
-<span class="State State--green mr-2">
+<span class="State State--draft mr-2">Draft</span>
 <span class="State State--open mr-2">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Open
 </span>
-<span class="State State--red mr-2">
+
-  <!-- <%= octicon "git-pull-request" %> -->
+<span class="State State--merged mr-2">
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Closed
 </span>
 <span class="State State--purple mr-2">
  <!-- <%= octicon "git-merge" %> -->
  <svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
  Merged
 </span>
 <span class="State State--closed mr-2" title="Status: closed">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Closed
 </span>
 ```
 ### Small states
@ -131,12 +131,12 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
 ```html live
 <span class="State State--small mr-2">Default</span>
-<span class="State State--small State--green  mr-2">
+<span class="State State--small State--open mr-2">
  <!-- <%= octicon "issue-opened" %> -->
  <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
  Open
 </span>
-<span class="State State--small State--red mr-2">
+<span class="State State--small State--closed mr-2">
  <!-- <%= octicon "issue-closed" %> -->
  <svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
  Closed
@ -145,12 +145,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
 ## Counters
-Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden.
+Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
 1. the default `Counter`,
 2. the `Counter--primary` with a stronger background color
 3. and `Counter--secondary` with a more subtler text color.
 Note: When a counter is empty, its visibility will be hidden.
 ```html live
 <span class="Counter mr-1">1</span>
-<span class="Counter mr-1 Counter--gray-light">23</span>
+<span class="Counter mr-1 Counter--primary">23</span>
-<span class="Counter mr-1 Counter--gray">456</span>
+<span class="Counter mr-1 Counter--secondary">456</span>
 ```
 Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
--- a/docs/content/components/links.md
+++ b/docs/content/components/links.md
@ -0,0 +1,52 @@
 ---
 title: Links
 path: components/links
 status: New
 source: 'https://github.com/primer/css/tree/master/src/links'
 bundle: links
 ---
 <Note>
  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.
 ```html live
 Some text with a default <a href="#url">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.**
 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>
 ```
 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>
 ```
 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
 <p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
 <p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
 ```
 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
 <a class="color-text-secondary no-underline" href="#url">
  A link with a partial <span class="Link--onHover">Link--onHover</span>
 </a>
 ```
--- a/docs/content/components/marketing-buttons.md
+++ b/docs/content/components/marketing-buttons.md
@ -8,18 +8,18 @@ bundle: marketing-buttons
 Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
-## Colors and outlined
+## Colors, outlined and transparent
 Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
 The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
 ```html live
-<button class="btn-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg mr-3" type="button">Learn more</button>
-<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
-<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
-<div class="bg-gray-dark">
+<div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
-  <button class="btn-mktg btn-transparent m-2" type="button">Learn more</button>
+  <button class="btn-mktg btn-transparent" type="button">Learn more</button>
 </div>
 ```
@ -29,9 +29,10 @@ Available in two sizes, marketing buttons have a default size and a large size.
 ```html live
 <button class="btn-mktg mr-2" type="button">Learn more</button>
 <button class="btn-mktg btn-outline-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-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-outline-mktg btn-large-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-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
 ```
--- a/docs/content/components/popover.md
+++ b/docs/content/components/popover.md
@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative text-center">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0 left-0 position-relative">
-    <div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
+    <div class="Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative text-center">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0 left-0 position-relative">
-    <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -80,7 +80,7 @@ Defaults to caret oriented top-center.
 ```html live title="Bottom"
 <div class="position-relative text-center">
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
+    <div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -95,7 +95,7 @@ Defaults to caret oriented top-center.
 ```html live title="Bottom-right"
 <div class="position-relative text-right pr-2">
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
+    <div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -109,7 +109,7 @@ Defaults to caret oriented top-center.
 ```html live title="Bottom-left"
 <div class="Popover position-relative pl-2">
-  <div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
+  <div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large">
    <h4 class="mb-2">Popover heading</h4>
    <p>Message about this particular piece of UI.</p>
    <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -124,7 +124,7 @@ Defaults to caret oriented top-center.
 <div class="d-flex flex-justify-center flex-items-center">
  <button class="btn btn-primary">UI</button>
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -139,7 +139,7 @@ Defaults to caret oriented top-center.
 <div class="d-flex flex-justify-center flex-items-end">
  <button class="btn btn-primary">UI</button>
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -154,7 +154,7 @@ Defaults to caret oriented top-center.
 <div class="d-flex flex-justify-center flex-items-start">
  <button class="btn btn-primary">UI</button>
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -168,7 +168,7 @@ Defaults to caret oriented top-center.
 ```html live title="Right"
 <div class="d-flex flex-justify-center flex-items-center">
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -183,7 +183,7 @@ Defaults to caret oriented top-center.
 ```html live title="Right-bottom"
 <div class="d-flex flex-justify-center flex-items-end">
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -198,7 +198,7 @@ Defaults to caret oriented top-center.
 ```html live title="Right-top"
 <div class="d-flex flex-justify-center flex-items-start">
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -214,7 +214,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative pl-2">
  <button class="btn btn-primary">UI</button>
  <div class="Popover position-relative">
-    <div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -229,7 +229,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative text-right pr-2">
  <button class="btn btn-primary">UI</button>
  <div class="Popover right-0 position-relative">
-    <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large">
      <h4 class="mb-2">Popover heading</h4>
      <p>Message about this particular piece of UI.</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
--- a/docs/content/components/progress.md
+++ b/docs/content/components/progress.md
@ -10,7 +10,7 @@ Use progress components to visualize task completion. The `Progress` class adds
 ```html live
 <span class="Progress">
-  <span class="Progress-item bg-green" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
 </span>
 ```
@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
 ```html live
 <span class="Progress Progress--large">
-  <span class="Progress-item bg-green" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
 </span>
 ```
@ -30,7 +30,7 @@ Small progress bars are shorter than the default.
 ```html live
 <span class="Progress Progress--small">
-  <span class="Progress-item bg-green" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
 </span>
 ```
@ -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 bg-green" style="width: 25%"></div>
+  <div class="Progress-item color-bg-success-inverse" style="width: 25%"></div>
 </span>
 ```
@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
 ```html live
 <div aria-label="tasks: 8 of 10 complete">
  <span class="Progress">
-    <span class="Progress-item bg-green" style="width: 80%;"></span>
+    <span class="Progress-item color-bg-success-inverse" style="width: 80%;"></span>
  </span>
 </div>
 ```
@ -64,11 +64,10 @@ To show the progress of tasks in multiple states (such as "done", "in progress",
 ```html live
 <div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
  <span class="Progress">
-    <span class="Progress-item bg-green" style="width: 50%;"></span>
+    <span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
-    <span class="Progress-item bg-purple" style="width: 25%;"></span>
+    <span class="Progress-item color-bg-warning-inverse" style="width: 25%;"></span>
-    <span class="Progress-item bg-pink" style="width: 15%;"></span>
+    <span class="Progress-item color-bg-danger-inverse" style="width: 15%;"></span>
-    <span class="Progress-item bg-red" style="width: 8%;"></span>
+    <span class="Progress-item color-bg-info-inverse" style="width: 10%;"></span>
    <span class="Progress-item bg-blue" style="width: 2%;"></span>
  </span>
 </div>
 ```
--- a/docs/content/components/timeline.md
+++ b/docs/content/components/timeline.md
@ -26,7 +26,7 @@ The `TimelineItem` component is used to display items on a vertical timeline, co
 ## TimelineItem-badge
-The default TimelineItem-badge color is dark text on a light grey background.
+The default TimelineItem-badge color is dark text on a light gray background.
 ```html live
 <!-- Default TimelineItem Badge -->
--- a/docs/content/getting-started/index.md
+++ b/docs/content/getting-started/index.md
@ -100,5 +100,5 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
 You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
 ```html
-<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
+<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
 ```
--- a/docs/content/getting-started/theming.md
+++ b/docs/content/getting-started/theming.md
@ -0,0 +1,162 @@
 ---
 title: Theming
 path: getting-started/theming
 ---
 Primer CSS offers multiple color themes for components and utilities. The colors change based on the active theme and color mode.
 Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. When nothing is specified, Primer CSS uses the `light` theme.
 ## Set a theme
 Configure Primer CSS to use a certain theme by adding the following attributes:
 - `data-color-mode` with a value of either `light` or `dark`
 - either `data-light-theme` or `data-dark-theme` with a value of either `light`, `dark`, `dark_dimmed`
 The attributes can be added to any element, but ideally it should be added to the document root (`<html>`). Below an example to use the `dark_dimmed` theme:
 ```html
 <html data-color-mode="dark" data-dark-theme="dark_dimmed">
 ```
 More examples:
 ```html live
 <div data-color-mode="light" data-light-theme="light" class="p-3">
  <h4>Light</h4>
  <code class="d-block mt-1 mb-3 color-text-secondary">
    data-color-mode="light" data-light-theme="light"
  </code>
  <button class="btn">Button</button>
  <span class="Label ml-2">Label</span>
  <span class="Counter ml-2">123</span>
 </div>
 <div data-color-mode="dark" data-dark-theme="dark" class="p-3">
  <h4>Dark</h4>
  <code class="d-block mt-1 mb-3 color-text-secondary">
    data-color-mode="dark" data-dark-theme="dark"
  </code>
  <button class="btn">Button</button>
  <span class="Label ml-2">Label</span>
  <span class="Counter ml-2">123</span>
 </div>
 <div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
  <h4>Dark Dimmed</h4>
  <code class="d-block mt-1 mb-3 color-text-secondary">
    data-color-mode="dark" data-dark-theme="dark_dimmed"
  </code>
  <button class="btn">Button</button>
  <span class="Label ml-2">Label</span>
  <span class="Counter ml-2">123</span>
 </div>
 ```
 ## Sync to the system
 If the theme should be synced to the OS's color mode, use `data-color-mode="auto"` and set a `data-light-theme` as well as a `data-dark-theme`.
 ```html live
 <div data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" class="p-3">
  <h4>Synced to system</h4>
  <code class="d-block mt-1 mb-3 color-text-secondary">
    data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed"
  </code>
  <button class="btn">Button</button>
  <span class="Label ml-2">Label</span>
  <span class="Counter ml-2">123</span>
 </div>
 ```
 Change the color mode of your OS to see the switch between the `data-light-theme="light"` and `data-dark-theme="dark_dimmed"`.
 ## Custom color variables
 It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Somtimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
 ```css
@include color-variables(
  ("custom-css-variable-1": (
    light: var(--color-scale-gray-3),
    dark: var(--color-scale-gray-5)
  ),
  "custom-css-variable-2": (
    light: var(--color-scale-gray-2),
    dark: var(--color-scale-gray-6)
  ),
  "custom-css-variable-3": (
    light: var(--color-scale-gray-2),
    dark: var(--color-scale-gray-6)
  )
 ));
 ```
 The custom variables will be prefixed with `--color-` and can be used in the same way as other functional variables.
 ```css
 .my-class {
  color: var(--color-custom-css-variable-1);
  background-color: var(--color-custom-css-variable-2);
  border-color: var(--color-custom-css-variable-2);
 }
 ```
 ## Auto variables
 If you tried using the [`scale` color variables](/support/color-system#color-variables) you might have noticed that they are not that useful with multiple color modes. That's because they stay light or dark in any color mode. As seen above, you could create custom variables that invert the scale like so:
 ```css
@include color-variables(
  ("custom-css-variable": (
    light: var(--color-scale-gray-7),
    dark: var(--color-scale-gray-2)
  )
 ));
 .my-class {
  color: var(--color-custom-css-variable);
 }
 ```
 In this case, the `auto` variables might come in handy.
 ```css
 .my-class {
  color: var(--color-auto-gray-7);
 }
 ```
 The benefit of `auto` over the `scale` variables is that `auto` variables automatically get inverted in dark mode.
 ```html live
 <div data-color-mode="light" data-light-theme="light" class="p-3">
  <code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
  <code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
  <code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
  <code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
  <code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
  <code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
 </div>
 <div data-color-mode="dark" data-dark-theme="dark" class="p-3">
  <code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
  <code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
  <code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
  <code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
  <code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
  <code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
 </div>
 <div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
  <code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
  <code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
  <code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
  <code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
  <code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
  <code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
 </div>
 <style>code { margin-right: 16px; }</style>
 ```
 In general, use `auto` variables if the results give enough constrast or create custom variables for further fine tuning.
--- a/docs/content/stickersheet/index.md
+++ b/docs/content/stickersheet/index.md
@ -1,89 +1,100 @@
 ---
 title: Sticker Sheet
-path: stickersheet/index
+path: stickersheet/
 ---
-
+### Light/Dark
 ### Sizes
 ```html live
-<span class="d-inline-block col-1 text-gray-light">16px</span>
+<div class="d-flex overflow-x-auto">
-<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
+  <div class="flex-1 p-4 overflow-x-auto" data-color-mode="light">
 <!-- <%= octicon "comment" %> -->
-<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
+<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="mr-2 Counter">1.5K</span> Counter
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="Label mr-2">Label</span>
 <span class="Label mr-2 Label--red"   >Danger</span>
 <span class="Label mr-2 Label--green" >Success</span>
 <span class="Label mr-2 Label--blue"  >Info</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
 <span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="State mr-2">Default</span>
 <span class="State State--green mr-2" title="Status: open">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Open
 </span>
 <span class="State State--red mr-2" title="Status: closed">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Closed
 </span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">20px</span>
+<button class="mr-2 btn" type="button">Button</button>
-<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
+<button class="mr-2 btn btn-primary" type="button">Primary</button>
-<span class="mr-3 Label">Label</span>
+<div class="my-2"></div>
-<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
+<button class="mr-2 btn btn-outline" type="button">Outline</button>
-<span class="mr-3 Counter">1.5K</span>
+<button class="mr-2 btn btn-danger" type="button">Danger</button>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">24px</span>
+<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
 <img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <span class="mr-3 Label Label--large">Label</span>
 <span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
 <span class="mr-3 State State--small">State</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">28px</span>
+<input class="form-control" type="text" placeholder="Input" />
 <img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <button class="mr-3 btn btn-sm" type="button">Button</button>
 <input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
 <select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">32px</span>
+<nav class="subnav d-inline-block v-align-middle mb-0">
 <img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <button class="mr-3 btn" type="button">Button</button>
 <input class="mr-3 form-control" type="text" placeholder="Input" />
 <select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
 <nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
  <a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
  <a class="subnav-item" href="#url">Filter 2</a>
 </nav>
 <span class="mr-3 State">State</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">40px</span>
+<div class="tabnav d-inline-block v-align-middle mb-0">
 <img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
 <div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
  <nav class="tabnav-tabs">
    <a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
    <a class="tabnav-tab" href="#url">Tab 2</a>
    <a class="tabnav-tab" href="#url">Tab 3</a>
    <a class="tabnav-tab" href="#url">Tab 4</a>
  </nav>
 </div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">48px</span>
+<nav class="UnderlineNav d-inline-block v-align-middle">
 <img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
 <nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
  <div class="UnderlineNav-body">
    <button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
  </div>
 </nav>
 <div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
-<span class="d-inline-block col-1 text-gray-light">64px</span>
+<div class="flash">Flash alert</div>
-<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
+
-<div class="mr-3 Header d-inline-block v-align-middle">
+<div class="my-4"></div><!-- Spacer ------------------------ -->
 <div class="Header">
  <div class="Header-item">
    <a href="#" class="Header-link f4 d-flex flex-items-center">
      <!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
@ -93,4 +104,113 @@ path: stickersheet/index
  </div>
 </div>
  </div><!-- end light -->
  <div class="flex-1 p-4 overflow-x-auto" data-color-mode="dark"><!-- ------------------------ -->
 <!-- <%= octicon "comment" %> -->
 <svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="mr-2 Counter">1.5K</span> Counter
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="Label mr-2">Label</span>
 <span class="Label mr-2 Label--red"   >Danger</span>
 <span class="Label mr-2 Label--green" >Success</span>
 <span class="Label mr-2 Label--blue"  >Info</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
 <span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="State mr-2">Default</span>
 <span class="State State--green mr-2" title="Status: open">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Open
 </span>
 <span class="State State--red mr-2" title="Status: closed">
  <!-- <%= octicon "git-pull-request" %> -->
  <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
  Closed
 </span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <button class="mr-2 btn" type="button">Button</button>
 <button class="mr-2 btn btn-primary" type="button">Primary</button>
 <div class="my-2"></div>
 <button class="mr-2 btn btn-outline" type="button">Outline</button>
 <button class="mr-2 btn btn-danger" type="button">Danger</button>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <input class="form-control" type="text" placeholder="Input" />
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <nav class="subnav d-inline-block v-align-middle mb-0">
  <a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
  <a class="subnav-item" href="#url">Filter 2</a>
 </nav>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <div class="tabnav d-inline-block v-align-middle mb-0">
  <nav class="tabnav-tabs">
    <a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
    <a class="tabnav-tab" href="#url">Tab 2</a>
    <a class="tabnav-tab" href="#url">Tab 3</a>
  </nav>
 </div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <nav class="UnderlineNav d-inline-block v-align-middle">
  <div class="UnderlineNav-body">
    <button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
  </div>
 </nav>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <div class="flash">Flash alert</div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <div class="Header">
  <div class="Header-item">
    <a href="#" class="Header-link f4 d-flex flex-items-center">
      <!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
      <svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
      <span>Header</span>
    </a>
  </div>
 </div>
  </div><!-- end dark -->
 </div>
 <!-- Temporary overrides (don't use in production) -->
 <style> .frame-example { padding: 0 !important; } </style>
 <link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
 ```
--- a/docs/content/stickersheet/labels.md
+++ b/docs/content/stickersheet/labels.md
@ -1,6 +1,6 @@
 ---
 title: Labels
-path: components/labels
+path: stickersheet/labels
 status: Stable
 source: 'https://github.com/primer/css/tree/master/src/labels'
 bundle: labels
--- a/docs/content/stickersheet/sizes.md
+++ b/docs/content/stickersheet/sizes.md
@ -0,0 +1,95 @@
 ---
 title: Sticker Sheet
 path: stickersheet/sizes
 ---
 ### Sizes
 ```html live
 <span class="d-inline-block col-1 text-gray-light">16px</span>
 <img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <!-- <%= octicon "comment" %> -->
 <svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">20px</span>
 <img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <span class="mr-3 Label">Label</span>
 <span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
 <span class="mr-3 Counter">1.5K</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">24px</span>
 <img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <span class="mr-3 Label Label--large">Label</span>
 <span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
 <span class="mr-3 State State--small">State</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">28px</span>
 <img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <button class="mr-3 btn btn-sm" type="button">Button</button>
 <input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
 <select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">32px</span>
 <img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
 <button class="mr-3 btn" type="button">Button</button>
 <input class="mr-3 form-control" type="text" placeholder="Input" />
 <select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
 <nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
  <a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
  <a class="subnav-item" href="#url">Filter 2</a>
 </nav>
 <span class="mr-3 State">State</span>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">40px</span>
 <img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
 <div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
  <nav class="tabnav-tabs">
    <a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
    <a class="tabnav-tab" href="#url">Tab 2</a>
    <a class="tabnav-tab" href="#url">Tab 3</a>
    <a class="tabnav-tab" href="#url">Tab 4</a>
  </nav>
 </div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">48px</span>
 <img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
 <nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
  <div class="UnderlineNav-body">
    <button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
    <button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
  </div>
 </nav>
 <div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
 <div class="my-4"></div><!-- Spacer ------------------------ -->
 <span class="d-inline-block col-1 text-gray-light">64px</span>
 <img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
 <div class="mr-3 Header d-inline-block v-align-middle">
  <div class="Header-item">
    <a href="#" class="Header-link f4 d-flex flex-items-center">
      <!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
      <svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
      <span>Header</span>
    </a>
  </div>
 </div>
 ```
--- a/docs/content/support/color-system.mdx
+++ b/docs/content/support/color-system.mdx
@ -1,31 +1,88 @@
 ---
 title: Color system
 description: 'Sass variables, mixins, and functions for use in our components.'
-status: Deprecated
+status: New
 source: 'https://github.com/primer/css/blob/master/src/support/variables/color-system.scss'
 bundle: support
 ---
-import colors from 'primer-colors'
+import lightColors from '@primer/primitives/dist/js/colors/light'
-import {Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
+import {Flash, Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
-import {Link as LinkIcon} from '@primer/octicons-react'
+import {LinkIcon, OctofaceIcon} from '@primer/octicons-react'
-import {palettes, variables} from '../../src/color-variables'
+import {colorModes, palettes, functionalVarNames, flattened} from '../../src/color-variables'
-import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
+import {PaletteTable, PaletteCell, ColorModeTable, CSSModeVars, overlayColor} from '../../src/color-system'
-> ⚠️ GitHub employees only! These color variables are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional variables](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/color-system).
+<Note>
  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>
-> Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
+## Functional variables
---
+The Primer color system contains multiple color modes; currently, Primer ships with a light mode and a dark mode. Each color mode comes with a set of CSS variables that can be used to style elements based on the functionality of the element. These should be used instead of specifying colors directly so that the colors adapt correctly when switching between color modes.
 When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors. Because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
 ### Text
 <CSSModeVars
  modes={colorModes}
  vars={functionalVarNames}
  filter={/^text-/}
  render={variable => {
    return <span style={{color: `var(--color-${variable})`}}>--color-{variable}</span>
  }}
 />
 ### Icons
 <CSSModeVars
  modes={colorModes}
  vars={functionalVarNames}
  filter={/^icon-(?!folder)/}
  render={variable => {
    return <><span style={{color: `var(--color-${variable})`}}><StyledOcticon icon={OctofaceIcon} /></span> --color-{variable}</>
  }}
 />
 ### Borders
 <CSSModeVars
  modes={colorModes}
  vars={functionalVarNames}
  filter={/^border-/}
  render={variable => {
    return <div style={{border: `2px solid var(--color-${variable})`, marginBottom: 10, padding: 4}}>--color-{variable}</div>
  }}
 />
 ### Backgrounds
 <CSSModeVars
  modes={colorModes}
  vars={functionalVarNames}
  filter={/^bg-/}
  render={variable => {
    return <Flex mb={1}><div style={{
      background: `var(--color-${variable})`,
      height: 20,
      width: 20,
      display: 'inline-block',
      border: '1px solid var(--color-border-primary)',
      marginRight: 10
    }} />--color-{variable}</Flex>
  }}
 />
 ### Other variables
 For a list of *all* functional variables, including app- and component-specific variables, see [this reference page](https://primer.style/primitives/).
 ## Color palette
 In rare ocassions, it may be necessary to use one of the variables from the base color scale, though since the colors differ in the various color modes, the functional variables listed above should be used in almost all normal cases.
 <Flex flexWrap="wrap" mr={-2}>
  {palettes
    .concat(
      {title: 'Black', name: 'black', value: colors.gray[9]},
      {title: 'White', name: 'white', value: colors.white, props: {className: 'border'}}
    )
    .map(({name, title, value, props = {}}) => (
      <Flex.Item
        as={Link}
@ -45,11 +102,11 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
    ))}
 </Flex>
-## Color variables
+### Color variables
 <Flex flexWrap="wrap" mr={[0, 0, -4]}>
  {palettes.map(({name, title, value, values}) => (
-    <Flex id={name} flexDirection="column" width={[1, 1, 1 / 2]} pr={[0, 0, 4]} mb={4}>
+    <Flex id={name} flexDirection="column" width={1} pr={0} mb={4} key={name}>
      <Flex
        as={Link}
        href={`#${name}`}
@ -67,10 +124,9 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
        </Flex.Item>
        <StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
      </Flex>
-      <PaletteTable
+      <ColorModeTable
-        columns={['variable', 'value']}
+        baseColor={value}
-        values={[{variable: name, value, slug: name}].concat(values)}
+        values={values}
        hasHeader={false}
        cellPadding="8px 16px"
      />
    </Flex>
--- a/docs/content/support/v16-migration.mdx
+++ b/docs/content/support/v16-migration.mdx
@ -0,0 +1,309 @@
 ---
 title: Primer v16 Migration Guide
 description: 'Guide for migrating to version 16.0.0 of Primer'
 ---
 Primer v16.0.0 introduces the idea of _color modes_ and _functional variables_. A color mode defines a set of colors in the Primer system that differs from that of other color modes. Currently, Primer ships with a light mode and a dark mode.
 Because colors differ in each color mode, it doesn't make sense to try to make an element a specific color; instead, Primer now applies colors based on the function of an element using functional variables. As a result, the Sass color variables that existed in Primer prior to version 16.0.0 have been replaced with functional CSS variables. These variables have different values depending on the current color mode. For a list of the new functional CSS color variables, see [the color system page](/support/color-system). The color utility classes have also been updated to match; see [the color utilities page](/utilities/colors) for more information.
 ## Migration guide
 ### Components
 Most components don't need to be updated and should work without making changes. But some of the componets that use presentational class names now use functional class names.
 #### Buttons
 | `v15`       | `v16` |
 | ----------- | ----- |
 | `.btn-blue` | n/a   |
 #### Counters
 | [`v15`](https://primer.style/css/components/labels#counters) | `v16`                 |
 | ------------------------------------------------------------ | --------------------- |
 | `.Counter--gray`                                             | `.Counter--primary`   |
 | `.Counter--gray-light`                                       | `.Counter--secondary` |
 #### Dropdwon
 | [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
 | ---------------------------------------------------------- | ----- |
 | `.dropdown-menu-dark`                                      | n/a   |
 #### Labels
 | [`v15`](https://primer.style/css/components/labels) | `v16`               |
 | --------------------------------------------------- | ------------------- |
 | `.Label--gray-darker`                               | `.Label--primary`   |
 | `.Label--gray`                                      | `.Label--secondary` |
 | `.Label--blue`                                      | `.Label--info`      |
 | `.Label--green`                                     | `.Label--success`   |
 | `.Label--yellow`                                    | `.Label--warning`   |
 | `.Label--red`                                       | `.Label--danger`    |
 | `.Label--orange`                                    | n/a                 |
 | `.Label--purple`                                    | n/a                 |
 | `.Label--pink`                                      | n/a                 |
 #### States
 | [`v15`](https://primer.style/css/components/labels#states) | `v16`            |
 | ---------------------------------------------------------- | ---------------- |
 | n/a                                                        | `.State--draft`  |
 | `.State--green`                                            | `.State--open`   |
 | `.State--purple`                                           | `.State--merged` |
 | `.State--red`                                              | `.State--closed` |
 ### Utility classes
 See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes.
 #### Text
 | [`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16`                   |
 | ----------------------------------------------------------------------- | ----------------------- |
 | `.text-gray-dark`                                                       | `.color-text-primary`   |
 | `.text-gray`                                                            | `.color-text-secondary` |
 | `.text-gray-light`                                                      | `.color-text-tertiary`  |
 | `.text-blue`                                                            | `.color-text-link`      |
 | `.text-green`                                                           | `.color-text-success`   |
 | `.text-yellow`                                                          | `.color-text-warning`   |
 | `.text-red`                                                             | `.color-text-danger`    |
 | `.text-white`                                                           | `.color-text-white`     |
 | n/a                                                                     | `.color-text-inverse`   |
 | `.text-black`                                                           | n/a                     |
 | `.text-orange`                                                          | n/a                     |
 | `.text-orange-light`                                                    | n/a                     |
 | `.text-purple`                                                          | n/a                     |
 | `.text-pink`                                                            | n/a                     |
 #### Icon
 | `v15` | `v16`                   |
 | ----- | ----------------------- |
 | n/a   | `.color-icon-primary`   |
 | n/a   | `.color-icon-secondary` |
 | n/a   | `.color-icon-tertiary`  |
 | n/a   | `.color-icon-info`      |
 | n/a   | `.color-icon-success`   |
 | n/a   | `.color-icon-warning`   |
 | n/a   | `.color-icon-danger`    |
 #### Border
 | [`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16`                     |
 | -------------------------------------------------------------------------- | ------------------------- |
 | `.border-gray`                                                             | `.color-border-primary`   |
 | `.border-gray-light`                                                       | `.color-border-secondary` |
 | `.border-gray-dark`                                                        | `.color-border-tertiary`  |
 | `.border-blue`                                                             | `.color-border-info`      |
 | `.border-green`                                                            | `.color-border-success`   |
 | `.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                       |
 | `.border-purple`                                                           | n/a                       |
 | `.border-black-fade`                                                       | n/a                       |
 | `.border-white-fade`                                                       | n/a                       |
 | `.border-white-fade-15`                                                    | n/a                       |
 | `.border-white-fade-30`                                                    | n/a                       |
 | `.border-white-fade-50`                                                    | n/a                       |
 | `.border-white-fade-70`                                                    | n/a                       |
 | `.border-white-fade-85`                                                    | n/a                       |
 #### Background
 | [`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16`                       |
 | ----------------------------------------------------------------------- | --------------------------- |
 | `.bg-white`                                                             | `.color-bg-primary`         |
 | `.bg-gray-light`                                                        | `.color-bg-secondary`       |
 | `.bg-gray`                                                              | `.color-bg-tertiary`        |
 | `.bg-gray-dark`                                                         | `.color-bg-canvas-inverse`  |
 | `.bg-blue-light`                                                        | `.color-bg-info`            |
 | `.bg-blue`                                                              | `.color-bg-info-inverse`    |
 | `.bg-green-light`                                                       | `.color-bg-success`         |
 | `.bg-green`                                                             | `.color-bg-success-inverse` |
 | `.bg-yellow-light`                                                      | `.color-bg-warning`         |
 | `.bg-yellow`                                                            | `.color-bg-warning-inverse` |
 | `.bg-red-light`                                                         | `.color-bg-danger`          |
 | `.bg-red`                                                               | `.color-bg-danger-inverse`  |
 | n/a                                                                     | `.color-bg-canvas`          |
 | n/a                                                                     | `.color-bg-canvas-inset`    |
 | n/a                                                                     | `.color-bg-overlay`         |
 | `.bg-purple-light`                                                      | n/a                         |
 | `.bg-purple`                                                            | n/a                         |
 | `.bg-yellow-dark`                                                       | n/a                         |
 | `.bg-orange`                                                            | n/a                         |
 | `.bg-pink`                                                              | n/a                         |
 #### Shadow
 | `v15`                     | `v16`                       |
 | ------------------------- | --------------------------- |
 | `.box-shadow`             | `.color-shadow-small`       |
 | `.box-shadow-medium`      | `.color-shadow-medium`      |
 | `.box-shadow-large`       | `.color-shadow-large`       |
 | `.box-shadow-extra-large` | `.color-shadow-extra-large` |
 #### Link
 The `link` utilities are part of the `Link` component.
 | [`v15`](https://primer.style/css/utilities/colors##link-colors) | `v16`              |
 | --------------------------------------------------------------- | ------------------ |
 | `.link-gray-dark`                                               | `.Link--primary`   |
 | `.link-gray`                                                    | `.Link--secondary` |
 | `.muted-link`                                                   | `.Link--muted`     |
 | `.link-hover-blue`                                              | `.Link--onHover`   |
 | n/a                                                             | `.Link`            |
 ### Mixins
 | `v15`           | `v16` |
 | --------------- | ----- |
 | `btn-solid()`   | n/a   |
 | `btn-inverse()` | n/a   |
 | `btn-outline()` | n/a   |
 ### Variables
 See [the color system page](/support/color-system) for a list of all the functional CSS variables.
 #### Text
 | `v15`                                | `v16`                           |
 | ------------------------------------ | ------------------------------- |
 | `$text-gray-dark` (`$gray-900`)      | `var(--color-text-primary)`     |
 | `$text-gray` (`$gray-600`)           | `var(--color-text-secondary)`   |
 | `$text-gray-light` (`$gray-500`)     | `var(--color-text-tertiary)`    |
 | `$text-blue` (`$blue-500`)           | `var(--color-text-link)`        |
 | `$text-green` (`$green-600`)         | `var(--color-text-success)`     |
 | `$text-red` (`$red-600`)             | `var(--color-text-danger)`      |
 | `$text-yellow` (`$yellow-800`)       | `var(--color-text-warning)`     |
 | `$text-white` (`$white`)             | `var(--color-text-white)`       |
 | n/a                                  | `var(--color-text-inverse)`     |
 | n/a                                  | `var(--color-text-placeholder)` |
 | n/a                                  | `var(--color-text-disabled)`    |
 | `$text-black` (`$black`)             | n/a                             |
 | `$text-orange` (`$orange-900`)       | n/a                             |
 | `$text-orange-light` (`$orange-600`) | n/a                             |
 | `$text-purple` (`$purple-500`)       | n/a                             |
 | `$text-pink` (`$pink-500`)           | n/a                             |
 #### Icon
 | `v15` | `v16`                         |
 | ----- | ----------------------------- |
 | n/a   | `var(--color-icon-primary)`   |
 | n/a   | `var(--color-icon-secondary)` |
 | n/a   | `var(--color-icon-tertiary)`  |
 | n/a   | `var(--color-icon-info)`      |
 | n/a   | `var(--color-icon-danger)`    |
 | n/a   | `var(--color-icon-success)`   |
 | n/a   | `var(--color-icon-warning)`   |
 #### Border
 | `v15`                                                 | `v16`                           |
 | ----------------------------------------------------- | ------------------------------- |
 | `$border-color` (`$gray-200`)                         | `var(--color-border-primary)`   |
 | `$border-gray` (`$gray-200`)                          | `var(--color-border-primary)`   |
 | `$border-gray-light` (`lighten($gray-200, 3%)`)       | `var(--color-border-secondary)` |
 | `$border-gray-dark` (`$gray-300`)                     | `var(--color-border-tertiary)`  |
 | `$border-white` (`$white`)                            | `var(--color-border-inverse)`   |
 | `$border-blue` (`$blue-500`)                          | `var(--color-border-info)`      |
 | `$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                             |
 | `$border-purple` (`$purple-500`)                      | n/a                             |
 | `$border-black-fade` (`$black-fade-15`)               | n/a                             |
 | `$border-white-fade` (`$white-fade-15`)               | n/a                             |
 | `$border-green-light` (`desaturate($green-300, 40%)`) | n/a                             |
 #### Background
 | `v15`                               | `v16`                             |
 | ----------------------------------- | --------------------------------- |
 | `$bg-white` (`$white`)              | `var(--color-bg-primary)`         |
 | `$bg-gray-light` (`$gray-000`)      | `var(--color-bg-secondary)`       |
 | `$bg-gray` (`$gray-100`)            | `var(--color-bg-tertiary)`        |
 | `$bg-gray-dark` (`$gray-900`)       | `var(--color-bg-canvas-inverse)`  |
 | `$bg-red` (`$red-500`)              | `var(--color-bg-danger-inverse)`  |
 | `$bg-red-light` (`$red-000`)        | `var(--color-bg-danger)`          |
 | `$bg-green` (`$green-500`)          | `var(--color-bg-success-inverse)` |
 | `$bg-green-light` (`$green-100`)    | `var(--color-bg-success)`         |
 | `$bg-blue` (`$blue-500`)            | `var(--color-bg-info-inverse)`    |
 | `$bg-blue-light` (`$blue-000`)      | `var(--color-bg-info)`            |
 | `$bg-yellow` (`$yellow-500`)        | `var(--color-bg-warning-inverse)` |
 | `$bg-yellow-light` (`$yellow-200`)  | `var(--color-bg-warning)`         |
 | n/a                                 | `var(--color-bg-canvas)`          |
 | n/a                                 | `var(--color-bg-canvas-inset)`    |
 | n/a                                 | `var(--color-bg-overlay)`         |
 | `$bg-black` (`$black`)              | n/a                               |
 | `$bg-black-fade` (`$black-fade-50`) | n/a                               |
 | `$bg-orange` (`$orange-700`)        | n/a                               |
 | `$bg-purple` (`$purple-500`)        | n/a                               |
 | `$bg-purple-light` (`$purple-000`)  | n/a                               |
 | `$bg-pink` (`$pink-500`)            | n/a                               |
 | `$bg-yellow-dark` (`$yellow-700`)   | n/a                               |
 #### Shadow
 | `v15`                     | `v16`                             |
 | ------------------------- | --------------------------------- |
 | `$box-shadow`             | `var(--color-shadow-small)`       |
 | `$box-shadow-medium`      | `var(--color-shadow-medium)`      |
 | `$box-shadow-large`       | `var(--color-shadow-large)`       |
 | `$box-shadow-extra-large` | `var(--color-shadow-extra-large)` |
 | `$box-shadow-highlight`   | `var(--color-shadow-highlight)`   |
 | `$box-shadow-inset`       | `var(--color-shadow-inset)`       |
 | `$box-shadow-focus`       | `var(--color-state-focus-shadow)` |
 ### Color System
 | `v15`       | `v16`                       |
 | ----------- | --------------------------- |
 | `$black`    | `var(--color-scale-black)`  |
 | `$white`    | `var(--color-scale-white)`  |
 | `$gray-000` | `var(--color-scale-gray-0)` |
 | `$gray-100` | `var(--color-scale-gray-1)` |
 | `$gray-200` | `var(--color-scale-gray-2)` |
 | ...         | ...                         |
 | `$pink-700` | `var(--color-scale-pink-7)` |
 | `$pink-800` | `var(--color-scale-pink-8)` |
 | `$pink-900` | `var(--color-scale-pink-9)` |
 ### Auto colors
 | `v15` | `v16`                      |
 | ----- | -------------------------- |
 | n/a   | `var(--color-auto-black)`  |
 | n/a   | `var(--color-auto-white)`  |
 | n/a   | `var(--color-auto-gray-0)` |
 | n/a   | `var(--color-auto-gray-1)` |
 | n/a   | `var(--color-auto-gray-2)` |
 | ...   | ...                        |
 | n/a   | `var(--color-auto-pink-7)` |
 | n/a   | `var(--color-auto-pink-8)` |
 | n/a   | `var(--color-auto-pink-9)` |
 Note: The `auto` colors automatically inverse based on the color mode. Example:
 | Variable                   | In `light` mode | In `dark` mode |
 | -------------------------- | --------------- | -------------- |
 | `var(--color-auto-gray-0)` | light gray      | dark gray      |
 | `var(--color-auto-gray-9)` | dark gray       | light gray     |
 It doesn't always work perfectly, therefore functional variables should be used as much as possible. But in some cases auto colors can still be handy.
 ### Misc
 There are a few more selectors and variables that got removed. Please refer to [deprecations.js](https://github.com/primer/css/blob/master/deprecations.js) for a complete list.
--- a/docs/content/support/variables.mdx
+++ b/docs/content/support/variables.mdx
@ -1,18 +1,11 @@
 ---
 title: Variables
 path: support/variables
-status: Experimental
+status: Stable
 bundle: alerts
 ---
 import {Variables, DeprecationIcon} from '../../src/variables'
 > ⚠️ GitHub employees only! These color variables are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional variables](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/color-system).
 > Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
 ---
 <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).
--- a/docs/content/tools/prototyping.md
+++ b/docs/content/tools/prototyping.md
@ -19,7 +19,7 @@ This method requires no dev environment set up and is useful for when you want t
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
  </head>
  <body></body>
 </html>
--- a/docs/content/utilities/animations.md
+++ b/docs/content/utilities/animations.md
@ -97,3 +97,12 @@ The `.hover-grow` class will increase the scale of the element upon hover.
  <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
 </div>
 ```
 ## Rotation
 The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
 ```html live
 <!-- <%= octicon("mark-github",:height => 32, :class => "anim-rotate") %> -->
 <svg height="32" class="octicon octicon-mark-github anim-rotate" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
 ```
--- a/docs/content/utilities/borders.mdx
+++ b/docs/content/utilities/borders.mdx
@ -7,9 +7,6 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
 bundle: utilities
 ---
 import {palettes, borders} from '../../src/color-variables'
 import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
 Utilities for borders, and border radius.
 ## Default border
@ -55,105 +52,6 @@ Remove borders from all sides or a single side with `.border-0`, `.border-top-0`
 </div>
 ```
 ## Border colors
 Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
 ```html live
 <div class="border border-blue mb-2">
  .border-blue
 </div>
 <div class="border border-blue-light mb-2">
  .border-blue-light
 </div>
 <div class="border border-green mb-2">
  .border-green
 </div>
 <div class="border border-green-light mb-2">
  .border-green-light
 </div>
 <div class="border border-red mb-2">
  .border-red
 </div>
 <div class="border border-red-light mb-2">
  .border-red-light
 </div>
 <div class="border border-purple mb-2">
  .border-purple
 </div>
 <div class="border border-yellow mb-2">
  .border-yellow
 </div>
 <div class="border border-gray-light mb-2">
  .border-gray-light
 </div>
 <div class="border border-gray-dark mb-2">
  .border-gray-dark
 </div>
 ```
 ### Borders with alpha transparency
 Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
 ```html live
 <div class="border border-black-fade bg-blue-light p-2 mb-2">
  .border-black-fade .bg-blue-light
 </div>
 <div class="border border-black-fade bg-red-light p-2 mb-2">
  .border-black-fade .bg-red-light
 </div>
 ```
 On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`.
 ```html live
 <div class="bg-gray-dark text-white p-3">
  <div class="border border-white-fade p-2">
    .border-white-fade
  </div>
 </div>
 ```
 Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
 ```html live
 <div class="bg-gray-dark text-white p-3 mb-3">
  <div class="border-bottom border-white-fade-15 p-2 mb-2">
    .border-white-fade-15
  </div>
  <div class="border-bottom border-white-fade-30 p-2 mb-2">
    .border-white-fade-30
  </div>
  <div class="border-bottom border-white-fade-50 p-2 mb-2">
    .border-white-fade-50
  </div>
  <div class="border-bottom border-white-fade-70 p-2 mb-2">
    .border-white-fade-70
  </div>
  <div class="border-bottom border-white-fade-85 p-2 mb-2">
    .border-white-fade-85
  </div>
 </div>
 <div class="bg-blue text-white p-3">
  <div class="border-bottom border-white-fade-15 p-2 mb-2">
    .border-white-fade-15
  </div>
  <div class="border-bottom border-white-fade-30 p-2 mb-2">
    .border-white-fade-30
  </div>
  <div class="border-bottom border-white-fade-50 p-2 mb-2">
    .border-white-fade-50
  </div>
  <div class="border-bottom border-white-fade-70 p-2 mb-2">
    .border-white-fade-70
  </div>
  <div class="border-bottom border-white-fade-85 p-2 mb-2">
    .border-white-fade-85
  </div>
 </div>
 ```
 ## Border style
 Use `border-dashed` to give an element a dashed border.
@ -221,6 +119,11 @@ You can adjust border widths on all sides or each side individually with respons
 </div>
 ```
 ## Border colors
 Border colors are documented on the [colors utilities page](../utilities/colors#border-colors).
 <!-- TODO: Remove?
 ## Border color utilities
 <PaletteTable
@ -233,3 +136,4 @@ You can adjust border widths on all sides or each side individually with respons
  ]}
  style={{borderSpacing: '0 4px'}}
 />
 -->
--- a/docs/content/utilities/box-shadow.md
+++ b/docs/content/utilities/box-shadow.md
@ -7,15 +7,19 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/box-shadow.scss
 bundle: utilities
 ---
 <Note>
  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>
 Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
-## Default
+## Small
-Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
+Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
 ```html live
-<div class="box-shadow p-3">
+<div class="color-shadow-small p-3">
-  .box-shadow
+  .color-shadow-small
 </div>
 ```
@ -23,7 +27,7 @@ These types of shadows are typically applied to elements with borders, such as t
 ```html live
 <div class="col-6">
-  <div class="Box box-shadow">
+  <div class="Box color-shadow-small">
    <div class="Box-row">
      <h3 class="m-0">Organization</h3>
    </div>
@ -47,8 +51,8 @@ These types of shadows are typically applied to elements with borders, such as t
 Medium box shadows are more diffused and slightly larger than small box shadows.
 ```html live
-<div class="box-shadow-medium p-3">
+<div class="color-shadow-medium p-3">
-  .box-shadow-medium
+  .color-shadow-medium
 </div>
 ```
@ -56,7 +60,7 @@ Medium box shadows are typically used on editorialized content that needs to app
 ```html live
 <div class="col-6">
-  <a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
+  <a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
    <div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
    <h3 class="text-gray-dark">Serverless architecture</h3>
    <p class="text-gray">
@ -83,15 +87,15 @@ Medium box shadows are typically used on editorialized content that needs to app
 Large box shadows are very diffused and used sparingly in the product UI.
 ```html live
-<div class="box-shadow-large p-3">
+<div class="color-shadow-large p-3">
-  .box-shadow-large
+  .color-shadow-large
 </div>
 ```
 These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
 ```html live
-<div class="box-shadow-large rounded-2 overflow-hidden">
+<div class="color-shadow-large rounded-2 overflow-hidden">
  <img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub" />
 </div>
 ```
@ -101,8 +105,8 @@ These shadows are used for marketing content, UI screenshots, and content that a
 Extra large box shadows are even more diffused.
 ```html live
-<div class="box-shadow-extra-large p-3">
+<div class="color-shadow-extra-large p-3">
-  .box-shadow-extra-large
+  .color-shadow-extra-large
 </div>
 ```
@ -113,7 +117,7 @@ These shadows are used for marketing content and content that appears on top of
 Additionally there is a `box-shadow-none` class that removes `box-shadow`:
 ```html live
-<div class="box-shadow-large box-shadow-none p-3">
+<div class="color-shadow-large box-shadow-none p-3">
  .box-shadow-none
 </div>
 ```
--- a/docs/content/utilities/colors.mdx
+++ b/docs/content/utilities/colors.mdx
@ -1,7 +1,7 @@
 ---
 title: Colors
 description: 'Immutable, atomic CSS classes to rapidly build product'
-status: Deprecated
+status: New
 status_issue: 'https://github.com/github/design-systems/issues/97'
 ---
@ -9,20 +9,168 @@ import {Box, BorderBox} from '@primer/components'
 import {palettes, allColors} from '../../src/color-variables'
 import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
-> ⚠️ GitHub employees only! These color utilities are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional utilities](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/utilities/colors).
+<Note>
-
+  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.
-> Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
+</Note>
 ---
 Use color utilities to apply color to the background of elements, text, and borders.
 ## Text colors
 Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
 > ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
 ```html live
 <div class="color-text-primary mb-2">.color-text-primary</div>
 <div class="color-text-secondary mb-2">.color-text-secondary</div>
 <div class="color-text-tertiary mb-2">.color-text-tertiary</div>
 <div class="color-text-link mb-2">.color-text-link</div>
 <div class="color-text-success mb-2">.color-text-success</div>
 <div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
 <div class="color-text-danger mb-2">.color-text-danger</div>
 ```
 You can set the color inheritance on an element by using the `text-inherit` class.
 ```html live
 <div class="color-text-success">This text is green, <a href="#" class="text-inherit">including the link</a></div>
 ```
 ## Icon colors
 Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
 ```html live
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "icon-primary mr-1" %> -->
  <svg class="color-icon-primary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-primary
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-secondary mr-1" %> -->
  <svg class="color-icon-secondary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-secondary
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-tertiary mr-1" %> -->
  <svg class="color-icon-tertiary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-tertiary
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-info mr-1" %> -->
  <svg class="color-icon-info mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-info
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-success mr-1" %> -->
  <svg class="color-icon-success mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-success
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-warning mr-1" %> -->
  <svg class="color-icon-warning mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-warning
 </div>
 <div class="mb-2">
  <!-- <%= octicon "octoface", :height => 16, :class => "color-icon-danger mr-1" %> -->
  <svg class="color-icon-danger mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
  .color-icon-danger
 </div>
 ```
 ## Background colors
 Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
-### Background utilities
+```html live
 <div class="color-bg-canvas mb-2">.color-bg-canvas</div>
 <div class="color-bg-primary mb-2">.color-bg-primary</div>
 <div class="color-bg-secondary mb-2">.color-bg-secondary</div>
 <div class="color-bg-tertiary mb-2">.color-bg-tertiary</div>
 <div class="color-bg-info mb-2">.color-bg-info</div>
 <div class="color-bg-success mb-2">.color-bg-success</div>
 <div class="color-bg-warning mb-2">.color-bg-warning</div>
 <div class="color-bg-danger mb-2">.color-bg-danger</div>
 ```
 ## Inversed and permanent colors
 ⚠️ WIP: Don't use in produciton. They might still change.
 You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
 ```html live
 <div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
 ```
 When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
 ```html live
 <div class="color-bg-info-inverse color-text-white mb-2">.color-bg-info-inverse .color-text-white</div>
 <div class="color-bg-success-inverse color-text-white mb-2">.color-bg-success-inverse .color-text-white</div>
 <div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
 <div class="color-bg-danger-inverse color-text-white mb-2">.color-bg-danger-inverse .color-text-white</div>
 ```
 ## Border colors
 Override default border colors with the following utilities.
 ```html live
 <div class="border color-border-primary mb-2">.color-border-primary</div>
 <div class="border color-border-secondary mb-2">.color-border-secondary</div>
 <div class="border color-border-tertiary mb-2">.color-border-tertiary</div>
 <div class="border color-border-info mb-2">.color-border-info</div>
 <div class="border color-border-success mb-2">.color-border-success</div>
 <div class="border color-border-warning mb-2">.color-border-warning</div>
 <div class="border color-border-danger mb-2">.color-border-danger</div>
 <div class="color-bg-canvas-inverse color-text-inverse p-3">
  <div class="border color-border-inverse">.color-border-inverse</div>
 </div>
 ```
 ### Borders with alpha transparency
 > TODO: Deprecate?
 Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
 ```html live
 <div class="border border-black-fade color-bg-info p-2 mb-2">.border-black-fade</div>
 <div class="border border-black-fade color-bg-danger p-2 mb-2">.border-black-fade</div>
 ```
 On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`. Or use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
 ```html live
 <div class="color-bg-info-inverse color-text-inverse p-3">
  <div class="border-bottom border-white-fade-15 p-2 mb-2">
    .border-white-fade-15 or .border-white-fade
  </div>
  <div class="border-bottom border-white-fade-30 p-2 mb-2">
    .border-white-fade-30
  </div>
  <div class="border-bottom border-white-fade-50 p-2 mb-2">
    .border-white-fade-50
  </div>
  <div class="border-bottom border-white-fade-70 p-2 mb-2">
    .border-white-fade-70
  </div>
  <div class="border-bottom border-white-fade-85 p-2 mb-2">
    .border-white-fade-85
  </div>
 </div>
 ```
 ## Link colors
 You can use the [Link](../components/links) component to change the link colors.
 <!-- TODO: Remove? -->
 <!--
 <PaletteTable>
  {palettes.map(({name, title, value}) => (
    <PaletteTableFragment name={name} type="bg" sparse key={name}>
@ -34,98 +182,10 @@ Background colors are most commonly used for filling large blocks of content or
    </PaletteTableFragment>
  ))}
 </PaletteTable>
 -->
-## Text colors
+<!-- TODO: Remove? -->
-
+<!--
 Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
 These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **⚠️ Any of the combinations with a warning icon must be used with caution**.
 ### Text color inheritance
 You can set the color inheritance on an element by using the `text-inherit` class.
 ```html live
 <div class="text-purple">This text is purple, <a href="#" class="text-inherit">including the link</a></div>
 ```
 ### Text on white background
 ```html live
 <div class="text-blue mb-2">
  .text-blue
 </div>
 <div class="text-gray-dark mb-2">
  .text-gray-dark
 </div>
 <div class="text-gray mb-2">
  .text-gray
 </div>
 <div class="text-gray-light mb-2">
  .text-gray-light
 </div>
 <div class="text-red mb-2">
  .text-red
 </div>
 <div class="text-orange mb-2">
  .text-orange
 </div>
 <div class="text-orange-light mb-2">
  .text-orange-light
  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
 </div>
 <div class="text-yellow mb-2">
  .text-yellow
  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
 </div>
 <div class="text-green mb-2">
  .text-green
 </div>
 <div class="text-purple mb-2">
  .text-purple
 </div>
 ```
 ### Text on colored backgrounds
 ```html live
 <div class="text-white bg-blue mb-2">
  .text-white on .bg-blue
 </div>
 <div class="bg-blue-light mb-2">
  .text-gray-dark on .bg-blue-light
 </div>
 <div class="text-white bg-red mb-2">
  .text-white on .bg-red
 </div>
 <div class="text-red bg-red-light mb-2">
  .text-red on .bg-red-light
 </div>
 <div class="bg-green-light mb-2">
  .text-gray-dark on .bg-green-light
 </div>
 <div class="bg-yellow-dark mb-2">
  .text-gray-dark on .bg-yellow-dark
 </div>
 <div class="bg-yellow mb-2">
  .text-gray-dark on .bg-yellow
 </div>
 <div class="bg-yellow-light mb-2">
  .text-gray-dark on .bg-yellow-light
 </div>
 <div class="text-white bg-purple mb-2">
  .text-white on .bg-purple
 </div>
 <div class="text-white bg-gray-dark mb-2">
  .text-white on .bg-gray-dark
 </div>
 <div class="bg-gray">
  .text-gray-dark on .bg-gray
 </div>
 ```
 ### Text color utilities
 <PaletteTable columns={[
  {
    title: 'Alias',
@ -135,7 +195,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
  {title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
 ]}>
  {palettes.map(({name, title, value}) => (
-    <PaletteTableFragment name={name} type="text" sparse prefix="color" columns={[
+    <PaletteTableFragment name={name} key={name} type="text" sparse prefix="color" columns={[
  {
    title: 'Alias',
    Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
@ -151,47 +211,4 @@ You can set the color inheritance on an element by using the `text-inherit` clas
    </PaletteTableFragment>
  ))}
 </PaletteTable>
-
+-->
 ## White background
 You can make a background explicitly white (`#fff`) with the `bg-white` utility:
 ```html live
 <div class="bg-gray-dark p-2">
  <span class="bg-white">.bg-white over .bg-gray-dark</span>
 </div>
 ```
 ## Link colors
 Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and 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.**
 Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
 ```html live
 <a class="link-gray" href="#url">link-gray</a>
 ```
 Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
 ```html live
 <a class="link-gray-dark" href="#url">link-gray-dark</a>
 ```
 Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
 ```html live
 <a class="muted-link" href="#url">muted-link</a>
 ```
 Use `link-hover-blue` 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
 <a class="text-gray-dark no-underline" href="#url">
  A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
 </a>
 ```
 ## Border colors
 Border colors are documented on the [border utilities page](../utilities/borders#border-width-style-and-color-utilities).
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/package.json
+++ b/docs/package.json
@ -13,8 +13,8 @@
    "@loadable/component": "^5.10.2",
    "@primer/components": "^17.1.0",
    "@primer/gatsby-theme-doctocat": "^1.6.0",
-    "@primer/octicons": "^9.1.1",
+    "@primer/octicons": "^11.0.0",
-    "@primer/octicons-react": "^9.1.1",
+    "@primer/octicons-react": "^11.0.0",
    "@svgr/webpack": "^4.3.2",
    "autoprefixer": "^9.6.1",
    "babel-preset-gatsby": "^0.5.10",
--- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
@ -1,13 +1,41 @@
-import React from 'react'
+import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
-import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
+import {Flex} from '@primer/components'
 import {Frame} from '@primer/gatsby-theme-doctocat'
 import {MoonIcon, SunIcon} from '@primer/octicons-react'
 import React from 'react'
 function LivePreviewWrapper({children}) {
  const [colorMode, setColorModeState] = React.useState('light')
  const setColorMode = mode => {
    window.dispatchEvent(new CustomEvent('color-mode-change', {detail: {mode}}))
  }
  React.useEffect(() => {
    const callback = e => setColorModeState(e.detail.mode)
    window.addEventListener('color-mode-change', callback)
    return () => {
      window.removeEventListener('color-mode-change', callback)
    }
  }, [setColorModeState])
  return (
    <Frame>
      <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
      <style>{primerStyles}</style>
-      <div className="frame-example p-3">{children}</div>
+      <div data-color-mode={colorMode} data-light-theme="light" data-dark-theme="dark">
        <Flex pt={2} px={2} justifyContent="flex-end">
          <button
            className="btn"
            aria-label={colorMode === 'light' ? 'Activate dark mode' : 'Activate light mode'}
            onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
          >
            {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
          </button>
        </Flex>
        <div className="frame-example p-3">{children}</div>
      </div>
    </Frame>
  )
 }
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@ -3,6 +3,8 @@
  children:
    - title: Contributing
      url: /getting-started/contributing
    - title: Theming
      url: /getting-started/theming
 - title: Support
  url: /support
  children:
@ -91,6 +93,8 @@
      url: /components/header
    - title: Labels
      url: /components/labels
    - title: Links
      url: /components/links
    - title: Loaders
      url: /components/loaders
    - title: Markdown
--- a/docs/src/color-system.js
+++ b/docs/src/color-system.js
@ -1,11 +1,82 @@
 import primerStyles from '!!raw-loader!postcss-loader!../../src/docs.scss'
 import React from 'react'
 import PropTypes from 'prop-types'
 import chroma from 'chroma-js'
 import styled from 'styled-components'
-import {Box, Text} from '@primer/components'
+import {Frame} from '@primer/gatsby-theme-doctocat'
-import {colors, getPaletteByName} from './color-variables'
+import {Box, Flex, Text} from '@primer/components'
 import {colors, colorModes, getPaletteByName} from './color-variables'
 import Table from './table'
 function LivePreviewWrapper({children}) {
  return (
    <Frame>
      <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
      <style>{primerStyles}</style>
      <Flex direction="row">
        <div data-color-mode="light" data-light-theme="light" style={{flex: 1}}>
          <div className="frame-example p-3">{children}</div>
        </div>
        <div data-color-mode="dark" data-dark-theme="dark" style={{flex: 1}}>
          <div className="frame-example p-3">{children}</div>
        </div>
      </Flex>
    </Frame>
  )
 }
 function capitalize(word) {
  return word[0].toUpperCase() + word.substr(1)
 }
 export function CSSModeVars({filter, vars, render}) {
  const filteredVars = vars.filter(s => s.match(filter))
  return (
    <LivePreviewWrapper>
      {filteredVars.map(variable => (
        <div key={variable}>{render(variable)}</div>
      ))}
    </LivePreviewWrapper>
  )
 }
 export function ColorModeTable({baseColor, values, ...rest}) {
  const fgColor = overlayColor(baseColor)
  const colorProps = {bg: baseColor, color: fgColor}
  return (
    <Table {...rest}>
      <thead>
        <tr>
          <PaletteCell as="th" {...colorProps}>
            Variable
          </PaletteCell>
          {colorModes.map(mode => (
            <PaletteCell as="th" {...colorProps} key={mode}>
              {capitalize(mode)} Mode
            </PaletteCell>
          ))}
        </tr>
      </thead>
      <tbody>
        {values.map(({variable, slug, values}) => (
          <tr key={slug}>
            <PaletteCell {...colorProps}>
              <Var>{variable}</Var>
            </PaletteCell>
            {Object.keys(values).map(mode => (
              <PaletteCell key={mode} bg={values[mode]} color={overlayColor(values[mode])}>
                <Var>{values[mode]}</Var>
              </PaletteCell>
            ))}
          </tr>
        ))}
      </tbody>
    </Table>
  )
 }
 export function PaletteTable(props) {
  const {columns = [], hasHeader, ...rest} = props
  const {children = <PaletteTableFragment columns={columns} {...rest} />} = rest
@ -45,7 +116,7 @@ export function PaletteTableFragment(props) {
        const cellProps = {type, ...row}
        const valueProps = {prefix, type, ...row}
        return (
-          <tr key={row.value}>
+          <tr key={row.slug}>
            {cols.map(({Cell = PaletteCell, Value = PaletteValue, title}) => (
              <Cell key={title} {...cellProps}>
                <Value {...valueProps} />
@ -97,9 +168,7 @@ PaletteCell.defaultProps = {
  as: 'td'
 }
-PaletteCell.propTypes = {
+PaletteCell.propTypes = {}
  value: PropTypes.string.isRequired
 }
 PaletteCell.Alias = ({aliases, type, ...rest}) =>
  aliases && aliases[type] ? (
@ -144,7 +213,7 @@ export function PaletteValue({value, ...rest}) {
  return <Var {...rest}>{value}</Var>
 }
-PaletteValue.Variable = ({variable}) => <Var>${variable}</Var>
+PaletteValue.Variable = ({variable}) => <Var>var({variable})</Var>
 PaletteValue.Variable.propTypes = {
  variable: PropTypes.string.isRequired
 }
@ -214,9 +283,13 @@ export function overlayColor(bg) {
  if ($overlayColorCache.has(bg)) {
    return $overlayColorCache.get(bg)
  } else {
-    const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
+    try {
-    $overlayColorCache.set(bg, result)
+      const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
-    return result
+      $overlayColorCache.set(bg, result)
      return result
    } catch (err) {
      return 'white'
    }
  }
 }
--- a/docs/src/color-variables.js
+++ b/docs/src/color-variables.js
@ -1,67 +1,71 @@
 import titleCase from 'title-case'
-import primerColors from 'primer-colors'
+import allModeColors from '@primer/primitives/dist/js/colors'
-import colorSystemSCSS from '!!raw-loader!../../src/support/variables/color-system.scss'
+// TODO: Remove? Not sure if still needed?
-import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
+// The `../../src/support/variables/colors.scss` file got removed since all color variables are now in primer/primitives.
-
+// import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
 const variables = {}
 parseSCSSVariables(colorSystemSCSS, variables)
 parseSCSSVariables(colorVariablesSCSS, variables)
 // XXX we don't necessarily define them in this order in primer-colors,
 // so we define an array here just to be safe
 const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']
-const colors = {
+const colors = allModeColors.light.scale
  ...primerColors,
  pink: Object.keys(variables)
    .filter(key => key.startsWith('pink-'))
    .sort()
    .map(key => variables[key])
 }
-const aliases = {}
+const variables = {}
 // TODO: Remove? Not sure if still needed?
 // parseSCSSVariables(colorVariablesSCSS, variables)
 const colorModes = Object.keys(allModeColors).sort((a, b) => {
  if (a.startsWith('light') && !b.startsWith('light')) return -1
  if (!a.startsWith('light') && b.startsWith('light')) return 1
  else return a.localeCompare(b)
 })
 const palettes = gradientHues.map(name => {
  return {
    name,
    title: titleCase(name),
-    value: variables[name] || colors[name][5],
+    value: colors[name][5],
    values: colors[name].map((value, index) => ({
      value,
      values: colorModes.reduce((acc, mode) => {
        acc[mode] = allModeColors[mode].scale[name][index]
        return acc
      }, {}),
      index,
-      variable: `${name}-${index}00`,
+      variable: `--color-scale-${name}-${index}`,
-      slug: `${name}-${index}`,
+      slug: `color-scale-${name}-${index}`,
-      aliases: (aliases[value] = {})
+      aliases: {}
    }))
  }
 })
-for (const key of Object.keys(variables)) {
+export {colors, colorModes, gradientHues, palettes, getPaletteByName}
  const match = key.match(/^(bg|text|border)-(\w+)(-(dark|light))?$/)
  const value = variables[key]
  if (match && aliases[value]) {
    // eslint-disable-next-line no-unused-vars
    const [_, type, name, suffix] = match
    aliases[value][type] = key
  }
 }
-export {colors, gradientHues, palettes, getPaletteByName, variables}
+export const flattened = colorModes.reduce((acc, mode) => {
  acc[mode] = flattenVars(allModeColors[mode])
  return acc
 }, {})
 export const functionalVarNames = Object.keys(flattened.light).filter(
  v => !v.startsWith('scale-') && !v.startsWith('auto-')
 )
 export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
-export const borders = Object.keys(variables)
+// TODO: fix the borders code
-  // Re: border-gray-darker, see https://github.com/primer/css/pull/1192
+//
-  .filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
+// export const borders = Object.keys(variables)
-  .sort()
+//   // Re: border-gray-darker, see https://github.com/primer/css/pull/1192
-  .map(key => ({
+//   .filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
-    variable: key,
+//   .sort()
-    value: variables[key],
+//   .map(key => ({
-    slug: key,
+//     variable: key,
-    aliases: {border: key}
+//     value: variables[key],
-  }))
+//     slug: key,
 //     aliases: {border: key}
 //   }))
 function getPaletteByName(name) {
  return palettes.find(palette => palette.name === name)
@ -75,8 +79,36 @@ function parseSCSSVariables(scssString, variables = {}) {
    if (match) {
      // eslint-disable-next-line no-unused-vars
      const [_, name, value] = match
-      variables[name] = value.startsWith('$') ? variables[value.substr(1)] : value
+      variables[name] = value.startsWith('$') ? variables[value.substr(1)] || value : value
    }
  } while (match)
  return variables
 }
 function flattenVars(tree, prefix = []) {
  let output = {}
  for (const key of Object.keys(tree)) {
    const val = tree[key]
    const varName = [...prefix, key].map(dasherize).join('-')
    if (Array.isArray(val) && !varName.includes('shadow')) {
      for (const i in val) {
        const arrayVarName = `${varName}-${i}`
        output[arrayVarName] = val[i]
      }
    } else if (Array.isArray(val)) {
      output[varName] = val.join(' ')
    } else if (typeof val === 'object') {
      const obj = flattenVars(val, [...prefix, key])
      output = {...output, ...obj}
    } else {
      output[varName] = val
    }
  }
  return output
 }
 function dasherize(str) {
  return str.replace(/([A-Z])/g, (m, r) => `-${r.toLowerCase()}`).replace(/^-/, '')
 }
--- a/docs/src/variables.js
+++ b/docs/src/variables.js
@ -1,6 +1,6 @@
 import React from 'react'
 import {Flex, Link, Text, Tooltip, Flash} from '@primer/components'
-import Octicon, {Alert} from '@primer/octicons-react'
+import Octicon, {AlertIcon} 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'
@ -198,7 +198,7 @@ function DeprecationFlag({variable, ...rest}) {
 function DeprecationIcon() {
  return (
    <Text color="red.5">
-      <Octicon icon={Alert} />
+      <Octicon icon={AlertIcon} />
    </Text>
  )
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "15.2.0",
+  "version": "16.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -4539,6 +4539,11 @@
        "object-assign": "^4.1.1"
      }
    },
    "@primer/primitives": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.0.1.tgz",
      "integrity": "sha512-TFbO/duRByLSGsCuDRo5Qgd+NOZmMKCB+au32ZHgGfn9KDdlGbbwvGKOx6c56jRWDCHk27aRL2bG4Hc9tFgHpA=="
    },
    "@reach/router": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz",
@ -7756,23 +7761,48 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "9.4.7",
+      "version": "9.8.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
-      "integrity": "sha512-qS5wW6aXHkm53Y4z73tFGsUhmZu4aMPV9iHXYlF0c/wxjknXNHuj/1cIQb+6YH692DbJGGWcckAXX+VxKvahMA==",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
      "dev": true,
      "requires": {
-        "browserslist": "^4.4.1",
+        "browserslist": "^4.12.0",
-        "caniuse-lite": "^1.0.30000932",
+        "caniuse-lite": "^1.0.30001109",
        "colorette": "^1.2.1",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
-        "postcss": "^7.0.14",
+        "postcss": "^7.0.32",
-        "postcss-value-parser": "^3.3.1"
+        "postcss-value-parser": "^4.1.0"
      },
      "dependencies": {
-        "postcss-value-parser": {
+        "browserslist": {
-          "version": "3.3.1",
+          "version": "4.14.0",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
          "dev": true,
          "requires": {
            "caniuse-lite": "^1.0.30001111",
            "electron-to-chromium": "^1.3.523",
            "escalade": "^3.0.2",
            "node-releases": "^1.1.60"
          }
        },
        "caniuse-lite": {
          "version": "1.0.30001112",
          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001112.tgz",
          "integrity": "sha512-J05RTQlqsatidif/38aN3PGULCLrg8OYQOlJUKbeYVzC2mGZkZLIztwRlB3MtrfLmawUmjFlNJvy/uhwniIe1Q==",
          "dev": true
        },
        "electron-to-chromium": {
          "version": "1.3.526",
          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.526.tgz",
          "integrity": "sha512-HiroW5ZbGwgT8kCnoEO8qnGjoTPzJxduvV/Vv/wH63eo2N6Zj3xT5fmmaSPAPUM05iN9/5fIEkIg3owTtV6QZg==",
          "dev": true
        },
        "node-releases": {
          "version": "1.1.60",
          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
          "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
          "dev": true
        }
      }
@ -8684,14 +8714,23 @@
      }
    },
    "browserslist": {
-      "version": "4.5.4",
+      "version": "4.14.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
-      "integrity": "sha512-rAjx494LMjqKnMPhFkuLmLp8JWEX0o8ADTGeAbOqaF+XCvYLreZrG5uVjnPBlAQ8REZK4pzXGvp0bWgrFtKaag==",
+      "integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
      "dev": true,
      "requires": {
-        "caniuse-lite": "^1.0.30000955",
+        "caniuse-lite": "^1.0.30001135",
-        "electron-to-chromium": "^1.3.122",
+        "electron-to-chromium": "^1.3.571",
-        "node-releases": "^1.1.13"
+        "escalade": "^3.1.0",
        "node-releases": "^1.1.61"
      },
      "dependencies": {
        "escalade": {
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
          "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
          "dev": true
        }
      }
    },
    "btoa-lite": {
@ -8890,9 +8929,9 @@
      "dev": true
    },
    "caniuse-lite": {
-      "version": "1.0.30000956",
+      "version": "1.0.30001142",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000956.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001142.tgz",
-      "integrity": "sha512-3o7L6XkQ01Oney+x2fS5UVbQXJ7QQkYxrSfaLmFlgQabcKfploI8bhS2nmQ8Unh5MpMONAMeDEdEXG9t9AK6uA==",
+      "integrity": "sha512-pDPpn9ankEpBFZXyCv2I4lh1v/ju+bqb78QfKf+w9XgDAFWBwSYPswXqprRdrgQWK0wQnpIbfwRjNHO1HWqvoQ==",
      "dev": true
    },
    "cardinal": {
@ -9344,9 +9383,9 @@
      "dev": true
    },
    "colorette": {
-      "version": "1.1.0",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
-      "integrity": "sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg==",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
      "dev": true
    },
    "colors": {
@ -11119,9 +11158,9 @@
      "dev": true
    },
    "electron-to-chromium": {
-      "version": "1.3.122",
+      "version": "1.3.576",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.122.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz",
-      "integrity": "sha512-3RKoIyCN4DhP2dsmleuFvpJAIDOseWH88wFYBzb22CSwoFDSWRc4UAMfrtc9h8nBdJjTNIN3rogChgOy6eFInw==",
+      "integrity": "sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew==",
      "dev": true
    },
    "element-resize-detector": {
@ -16951,13 +16990,10 @@
      }
    },
    "node-releases": {
-      "version": "1.1.13",
+      "version": "1.1.61",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.13.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
-      "integrity": "sha512-fKZGviSXR6YvVPyc011NHuJDSD8gFQvLPmc2d2V3BS4gr52ycyQ1Xzs7a8B+Ax3Ni/W+5h1h4SqmzeoA8WZRmA==",
+      "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
-      "dev": true,
+      "dev": true
      "requires": {
        "semver": "^5.3.0"
      }
    },
    "node-sass": {
      "version": "4.14.1",
@ -21710,9 +21746,9 @@
      "dev": true
    },
    "postcss": {
-      "version": "7.0.14",
+      "version": "7.0.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-      "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.2",
@ -21822,58 +21858,25 @@
      }
    },
    "postcss-load-config": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
      "dev": true,
      "requires": {
-        "cosmiconfig": "^4.0.0",
+        "cosmiconfig": "^5.0.0",
        "import-cwd": "^2.0.0"
      },
      "dependencies": {
        "cosmiconfig": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
          "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
          "dev": true,
          "requires": {
            "is-directory": "^0.3.1",
            "js-yaml": "^3.9.0",
            "parse-json": "^4.0.0",
            "require-from-string": "^2.0.1"
          }
        }
      }
    },
    "postcss-loader": {
-      "version": "2.1.6",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
-      "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
+      "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
      "dev": true,
      "requires": {
        "loader-utils": "^1.1.0",
-        "postcss": "^6.0.0",
+        "postcss": "^7.0.0",
        "postcss-load-config": "^2.0.0",
-        "schema-utils": "^0.4.0"
+        "schema-utils": "^1.0.0"
      },
      "dependencies": {
        "postcss": {
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
            "supports-color": "^5.4.0"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
          "dev": true
        }
      }
    },
    "postcss-markdown": {
@ -22075,12 +22078,12 @@
      }
    },
    "postcss-scss": {
-      "version": "2.0.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz",
-      "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
+      "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==",
      "dev": true,
      "requires": {
-        "postcss": "^7.0.0"
+        "postcss": "^7.0.6"
      }
    },
    "postcss-selector-parser": {
@ -22111,9 +22114,9 @@
      "dev": true
    },
    "postcss-value-parser": {
-      "version": "4.0.2",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
      "dev": true
    },
    "preferred-pm": {
@ -23787,12 +23790,6 @@
      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
      "dev": true
    },
    "require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
      "dev": true
    },
    "require-main-filename": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@ -24117,12 +24114,13 @@
      }
    },
    "schema-utils": {
-      "version": "0.4.7",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-      "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
      "dev": true,
      "requires": {
        "ajv": "^6.1.0",
        "ajv-errors": "^1.0.0",
        "ajv-keywords": "^3.1.0"
      }
    },
@ -26565,9 +26563,9 @@
      }
    },
    "stylelint-config-primer": {
-      "version": "9.0.0",
+      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.2.1.tgz",
-      "integrity": "sha512-jM/D1qB33wMb6Q19iWHDfowB9Sb4LwbR4wtCWz9qeZIapGJ1nclVxJ63HgDherzXl1Im2pXa69RdOX51trrR0Q==",
+      "integrity": "sha512-4tpNgAZosmONtVmWKwufdiagEsR2He4j17tn0MtX9NdtSWKfeANrJsUeEFr2WDJR+YuAOSVwytQIP55u5reSEw==",
      "dev": true,
      "requires": {
        "anymatch": "^3.1.1",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "15.2.0",
+  "version": "16.0.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.",
@ -41,7 +41,8 @@
    "release": "changeset publish"
  },
  "dependencies": {
-    "@primer/octicons": "^9.1.1"
+    "@primer/octicons": "^9.1.1",
    "@primer/primitives": "^4.0.1"
  },
  "devDependencies": {
    "@changesets/changelog-github": "^0.3.0",
@ -49,9 +50,9 @@
    "@octokit/rest": "^16.34.0",
    "@storybook/addon-viewport": "5.3.18",
    "@storybook/react": "5.3.18",
-    "autoprefixer": "9.4.7",
+    "autoprefixer": "9.8.6",
    "code-blocks": "^1.1.0",
-    "colorette": "^1.1.0",
+    "colorette": "^1.2.1",
    "css-loader": "1.0.0",
    "cssstats": "3.3.0",
    "details-dialog-element": "^1.4.0",
@ -65,13 +66,13 @@
    "minimist": "1.2.3",
    "node-fetch": "2.4.0",
    "npm-run-all": "4.1.5",
-    "postcss": "7.0.14",
+    "postcss": "7.0.32",
    "postcss-import": "^12.0.1",
-    "postcss-load-config": "2.0.0",
+    "postcss-load-config": "2.1.0",
-    "postcss-loader": "^2.0.6",
+    "postcss-loader": "^3.0.0",
    "postcss-node-sass": "2.1.8",
-    "postcss-scss": "2.0.0",
+    "postcss-scss": "2.1.1",
-    "postcss-value-parser": "^4.0.2",
+    "postcss-value-parser": "^4.1.0",
    "prop-types": "^15.6.2",
    "semantic-release": "^15.13.27",
    "semver": "5.7.1",
@ -79,7 +80,7 @@
    "style-loader": "^0.18.2",
    "styled-components": "4.1.2",
    "stylelint": "^10.1.0",
-    "stylelint-config-primer": "^9.0.0",
+    "stylelint-config-primer": "^9.2.1",
    "stylelint-disable": "^0.1.5",
    "stylelint-only": "^1.0.1",
    "stylelint-scss": "^3.12.0",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,3 +1,5 @@
 const path = require('path')
 module.exports = {
  parser: 'postcss-scss',
  map: {
@ -6,7 +8,7 @@ module.exports = {
  },
  plugins: {
    'postcss-node-sass': {
-      includePaths: ['node_modules'],
+      includePaths: [path.join(__dirname, 'node_modules')],
      outputStyle: 'compressed'
    },
    'autoprefixer': {}
--- a/script/analyze-variables.js
+++ b/script/analyze-variables.js
@ -33,13 +33,17 @@ function analyzeVariables(file) {
          if (last(entry.values) !== value) {
            entry.values.push(value)
          }
-          variables[actualProp] = Object.assign(
+          if (value.match(/^var\(--.*\)/)) {
-            {
+            delete variables[actualProp]
-              computed: value
+          } else {
-            },
+            variables[actualProp] = Object.assign(
-            entry,
+              {
-            {refs: []}
+                computed: value
-          )
+              },
              entry,
              {refs: []}
            )
          }
        })
      })
--- a/script/dist.js
+++ b/script/dist.js
@ -55,7 +55,7 @@ async function dist() {
        writeFile(to, result.css, encoding),
        writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
        writeFile(meta.js, `module.exports = {cssstats: require('./stats/${name}.json')}`, encoding),
-        result.map ? writeFile(meta.map, result.map, encoding) : null
+        result.map ? writeFile(meta.map, result.map.toString(), encoding) : null
      ])
      bundles[name] = meta
    })
--- a/src/alerts/flash.scss
+++ b/src/alerts/flash.scss
@ -5,7 +5,6 @@
  position: relative;
  // stylelint-disable-next-line primer/spacing
  padding: 20px $spacer-3;
  color: $text-gray-dark;
  border-style: $border-style;
  border-width: $border-width;
  border-radius: $border-radius;
@ -65,49 +64,46 @@
 //
 .flash {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-alert-info-text);
-  background-color: $blue-100;
+  background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg));
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-alert-info-border);
  border-color: rgba($blue-700, 0.2);
  .octicon {
    // stylelint-disable-next-line primer/colors
-    color: rgba($blue-700, 0.6);
+    color: var(--color-alert-info-icon);
  }
 }
 .flash-warn {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-alert-warn-text);
-  background-color: $yellow-100;
+  background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg));
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-alert-warn-border);
  border-color: rgba($yellow-800, 0.2);
  .octicon {
    // stylelint-disable-next-line primer/colors
-    color: rgba($yellow-800, 1);
+    color: var(--color-alert-warn-icon);
  }
 }
 .flash-error {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-alert-error-text);
-  background-color: #ffe3e6; // custom red
+  background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-alert-error-border);
  border-color: rgba($red-800, 0.2);
  .octicon {
    // stylelint-disable-next-line primer/colors
-    color: rgba($red-800, 0.6);
+    color: var(--color-alert-error-icon);
  }
 }
 .flash-success {
-  background-color: $bg-green-light;
+  color: var(--color-alert-success-text);
-  // stylelint-disable-next-line primer/borders
+  background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg));
-  border-color: rgba($green-700, 0.2);
+  border-color: var(--color-alert-success-border);
  .octicon {
    // stylelint-disable-next-line primer/colors
-    color: rgba($green-700, 0.8);
+    color: var(--color-alert-success-icon);
  }
 }
@ -134,12 +130,17 @@
  border-radius: 0;
 }
 // Makes sure the background is opaque to cover any content underneath
 .flash-full,
 .flash-banner {
  background-color: var(--color-bg-canvas);
 }
 // FIXME deprecate this
 .warning {
  padding: $em-spacer-5;
  // stylelint-disable-next-line primer/spacing
  margin-bottom: 0.8em;
  font-weight: $font-weight-bold;
-  // stylelint-disable-next-line primer/colors
+  background-color: var(--color-alert-warn-bg);
  background-color: $yellow-100;
 }
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@ -8,10 +8,10 @@
  // stylelint-disable-next-line primer/typography
  font-size: 13px;
  list-style: none;
-  background: $bg-white;
+  background: var(--color-bg-overlay);
-  border: $border;
+  border: $border-width $border-style var(--color-border-overlay);
  border-radius: $border-radius;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-autocomplete-shadow);
 }
 // One of the items that appears within an autocomplete group
@ -23,22 +23,32 @@
  padding: $spacer-1 $spacer-2;
  overflow: hidden;
  font-weight: $font-weight-bold;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
  border: 0;
-  &:hover,
+  &:hover {
    color: var(--color-state-hover-primary-text);
    text-decoration: none;
    background-color: var(--color-state-hover-primary-bg);
    // Inherit color on all child elements to ensure enough contrast
    * {
      color: inherit !important;
    }
  }
  &.selected,
  &[aria-selected=true],
  &.navigation-focus {
-    color: $text-white;
+    color: var(--color-state-selected-primary-text);
    text-decoration: none;
-    background-color: $bg-blue;
+    background-color: var(--color-state-selected-primary-bg);
    // Inherit color on all child elements to ensure enough contrast
    * {
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@ -11,20 +11,20 @@
  margin-top: $spacer-4;
  list-style: none;
  cursor: pointer;
-  background: $bg-white;
+  background: var(--color-bg-overlay);
-  border: $border;
+  border: $border-width $border-style var(--color-border-overlay);
  border-radius: $border-radius;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-autocomplete-shadow);
  li {
    display: block;
    padding: $spacer-1 $spacer-2;
    font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-autocomplete-row-border);
    small {
      font-weight: $font-weight-normal;
-      color: $text-gray;
+      color: var(--color-text-secondary);
    }
    &:last-child {
@ -38,15 +38,24 @@
      border-top-right-radius: $border-radius;
    }
-    &:hover,
+    &:hover {
-    &[aria-selected="true"],
+      color: var(--color-state-hover-primary-text);
    &.navigation-focus {
      color: $text-white;
      text-decoration: none;
-      background: $bg-blue;
+      background: var(--color-state-hover-primary-bg);
      small {
-        color: $text-white;
+        color: var(--color-state-hover-primary-text);
      }
    }
    &[aria-selected="true"],
    &.navigation-focus {
      color: var(--color-state-selected-primary-text);
      text-decoration: none;
      background: var(--color-state-selected-primary-bg);
      small {
        color: var(--color-state-selected-primary-text);
      }
    }
  }
--- a/src/avatars/avatar-parent-child.scss
+++ b/src/avatars/avatar-parent-child.scss
@ -10,9 +10,8 @@
  position: absolute;
  right: -15%;
  bottom: -9%;
-  background-color: $bg-white; // For transparent backgrounds
+  background-color: var(--color-bg-canvas); // For transparent backgrounds
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius-1;
-  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: var(--color-avatar-child-shadow);
  box-shadow: -2px -2px 0 rgba($white, 0.8);
 }
--- a/src/avatars/avatar-stack.scss
+++ b/src/avatars/avatar-stack.scss
@ -21,7 +21,7 @@
 .AvatarStack-body {
  display: flex;
-  background: $bg-white;
+  background: var(--color-bg-canvas);
  .avatar {
    position: relative;
@ -32,8 +32,8 @@
    box-sizing: content-box;
    // stylelint-disable-next-line primer/spacing
    margin-right: -11px;
-    background-color: $bg-white;
+    background-color: var(--color-bg-canvas);
-    border-right: $border-width $border-style $border-white;
+    border-right: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
    // stylelint-disable-next-line primer/borders
    border-radius: $border-radius-1;
    transition: margin 0.1s ease-in-out;
@ -81,7 +81,7 @@
 .avatar.avatar-more {
  z-index: 1;
  margin-right: 0;
-  background: $bg-gray;
+  background: var(--color-bg-tertiary);
  &::before,
  &::after {
@ -91,19 +91,19 @@
    content: "";
    // stylelint-disable-next-line primer/borders
    border-radius: 2px;
-    outline: $border-width $border-style $white;
+    outline: $border-width $border-style var(--color-bg-canvas);
  }
  &::before {
    width: 17px;
    // stylelint-disable-next-line primer/colors
-    background: $gray-200;
+    background: var(--color-avatar-stack-fade-more);
  }
  &::after {
    width: 14px;
    // stylelint-disable-next-line primer/colors
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
  }
 }
@ -123,7 +123,7 @@
  .avatar.avatar-more {
    // stylelint-disable-next-line primer/colors
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
    &::before {
      width: 5px;
@ -131,7 +131,7 @@
    &::after {
      width: 2px;
-      background: $bg-gray;
+      background: var(--color-bg-tertiary);
    }
  }
@ -140,6 +140,6 @@
    // stylelint-disable-next-line primer/spacing
    margin-left: -11px;
    border-right: 0;
-    border-left: $border-width $border-style $border-white;
+    border-left: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
  }
 }
--- a/src/avatars/avatar.scss
+++ b/src/avatars/avatar.scss
@ -3,7 +3,11 @@
  overflow: hidden; // Ensure page layout in Firefox should images fail to load
  line-height: $lh-condensed-ultra;
  vertical-align: middle;
  background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
  border-radius: $border-radius;
  flex-shrink: 0;
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
 .avatar-link {
--- a/src/avatars/circle-badge.scss
+++ b/src/avatars/circle-badge.scss
@ -4,9 +4,9 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: $bg-white;
+  background-color: var(--color-bg-canvas);
  border-radius: 50%;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-shadow-medium);
 }
 .CircleBadge-icon {
@ -46,7 +46,7 @@
    width: 100%;
    content: "";
    // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed $border-gray;
+    border-bottom: 2px dashed var(--color-border-primary);
  }
  .CircleBadge {
--- a/src/base/base.scss
+++ b/src/base/base.scss
@ -16,12 +16,12 @@ body {
  font-family: $body-font;
  font-size: $body-font-size;
  line-height: $body-line-height;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
-  background-color: $bg-white;
+  background-color: var(--color-bg-canvas);
 }
 a {
-  color: $text-blue;
+  color: var(--color-text-link);
  text-decoration: none;
  &:hover {
@ -45,8 +45,7 @@ hr,
  overflow: hidden;
  background: transparent;
  border: 0;
-  // stylelint-disable-next-line primer/borders
+  border-bottom: $border-width $border-style var(--color-border-secondary);
  border-bottom: $border-width $border-style lighten($gray-300, 5%);
  @include clearfix();
 }
--- a/src/base/index.scss
+++ b/src/base/index.scss
@ -1,6 +1,7 @@
@import "../support/index.scss";
@import "./normalize.scss";
@import "./modes.scss";
@import "./base.scss";
@import "./kbd.scss";
@import "./typography-base.scss";
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@ -9,13 +9,13 @@ kbd {
  // stylelint-disable-next-line primer/typography
  line-height: 10px;
  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-auto-gray-7);
  vertical-align: middle;
-  background-color: $bg-gray-light;
+  background-color: var(--color-bg-secondary);
  // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width $border-gray-dark;
+  border: $border-style $border-width var(--color-border-tertiary);
-  border-bottom-color: $border-gray-dark;
+  border-bottom-color: var(--color-border-tertiary);
  border-radius: $border-radius;
  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-dark;
+  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
 }
--- a/src/base/modes.scss
+++ b/src/base/modes.scss
@ -0,0 +1,36 @@
 // Color modes
@import "../support/mixins/color-modes.scss";
@import "@primer/primitives/dist/scss/colors/_light.scss";
@import "@primer/primitives/dist/scss/colors/_dark.scss";
@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";
 // Outputs the CSS variables
 // Use :root (html element) to define a default
@include color-mode-theme(light, light, true) {
  @include primer-colors-light;
 }
@include color-mode-theme(dark, dark) {
  @include primer-colors-dark;
 }
@include color-mode-theme(dark_dimmed, dark) {
  @include primer-colors-dark_dimmed;
 }
 // Color mode boundaries
 // Enables nesting of different color modes
 [data-color-mode] {
  color: var(--color-text-primary);
  background-color: var(--color-bg-canvas);
 }
 // color-scheme
 // Enables color modes for native elements
@include color-mode(light) { color-scheme: light; }
@include color-mode(dark) { color-scheme: dark; }
--- a/src/base/normalize.scss
+++ b/src/base/normalize.scss
@ -162,7 +162,7 @@ h1 {
 mark {
  background-color: #ff0;
-  color: $text-black;
+  color: var(--color-text-primary);
 }
 /**
--- a/src/blankslate/blankslate.scss
+++ b/src/blankslate/blankslate.scss
@ -4,12 +4,16 @@
  padding: $spacer-5;
  text-align: center;
  p {
    color: var(--color-text-secondary);
  }
  code {
    // stylelint-disable-next-line primer/spacing
    padding: 2px 5px 3px;
    font-size: $h5-size;
-    background: $bg-white;
+    background: var(--color-bg-canvas);
-    border: $border-width $border-style $border-gray-light;
+    border: $border-width $border-style var(--color-auto-gray-0); // stylelint-disable-line primer/borders
    border-radius: $border-radius;
  }
@ -24,7 +28,7 @@
  margin-bottom: $spacer-2;
  margin-left: $spacer-1;
  // stylelint-disable-next-line primer/colors
-  color: lighten($gray-400, 5%);
+  color: var(--color-blankslate-icon);
 }
 .blankslate-capped {
--- a/src/box/box.scss
+++ b/src/box/box.scss
@ -2,8 +2,10 @@
 // Intended to replace simple-box, boxed-group, and table-list
 .Box {
-  background-color: $bg-white;
+  background-color: var(--color-bg-primary);
-  border: $border;
+  border-color: var(--color-border-primary);
  border-style: $border-style;
  border-width: $border-width;
  border-radius: $border-radius;
 }
@ -35,7 +37,6 @@
  .Box-row {
    padding: $spacer-2 $spacer-3;
  }
 }
 .Box--spacious {
@ -67,15 +68,14 @@
  .Box-row {
    padding: $spacer-4;
  }
 }
 .Box-header {
  padding: $spacer-3;
  // stylelint-disable-next-line primer/spacing
  margin: (-$border-width) (-$border-width) 0;
-  background-color: $bg-gray;
+  background-color: var(--color-bg-tertiary);
-  border-color: $border-color;
+  border-color: var(--color-border-primary);
  border-style: $border-style;
  border-width: $border-width;
  border-top-left-radius: $border-radius;
@ -89,7 +89,7 @@
 .Box-body {
  padding: $spacer-3;
-  border-bottom: $border-width $border-style $border-gray;
+  border-bottom: $border-width $border-style var(--color-border-primary);
  // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
  &:last-of-type {
@ -106,7 +106,9 @@
  // stylelint-disable-next-line primer/spacing
  margin-top: -1px;
  list-style-type: none; // To account for applying Box component to a list
-  border-top: $border;
+  border-top-color: var(--color-border-secondary);
  border-top-style: $border-style;
  border-top-width: $border-width;
  &:first-of-type {
    border-top-left-radius: $border-radius;
@ -124,13 +126,13 @@
  // .unread to be deprecated with .Box-row-unread
  &.unread {
    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 2px 0 0 $blue inset;
+    box-shadow: inset 2px 0 0 var(--color-border-info);
  }
  &.navigation-focus {
    // Focus styles for when drag icon
    .Box-row--drag-button {
-      color: $text-blue;
+      color: var(--color-text-link);
      cursor: grab;
      opacity: 100;
    }
@ -142,43 +144,42 @@
    // Row dragging styles
    &.sortable-chosen {
-      background-color: $bg-gray-light;
+      background-color: var(--color-bg-secondary);
    }
    // Makes dragging row background gray
    &.sortable-ghost {
-      background-color: $bg-gray;
+      background-color: var(--color-bg-tertiary);
      // Hides contents of row while dragging so row looks solid gray
      .Box-row--drag-hide {
        opacity: 0;
      }
    }
  }
 }
 .Box-row--focus-gray {
  &.navigation-focus {
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
  }
 }
 .Box-row--focus-blue {
  &.navigation-focus {
-    background-color: $bg-blue-light;
+    background-color: var(--color-box-row-blue-bg);
  }
 }
 .Box-row--hover-gray {
  &:hover {
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
  }
 }
 .Box-row--hover-blue {
  &:hover {
-    background-color: $bg-blue-light;
+    background-color: var(--color-box-row-blue-bg);
  }
 }
@ -187,15 +188,13 @@
 // and links are dark-gray with blue hover on desktop.
 .Box-row-link {
  @include breakpoint(md) {
-
+    color: var(--color-text-primary);
    color: $text-gray-dark;
    text-decoration: none;
    &:hover {
-      color: $text-blue;
+      color: var(--color-text-link);
      text-decoration: none;
    }
  }
 }
@ -209,7 +208,10 @@
  padding: $spacer-3;
  // stylelint-disable-next-line primer/spacing
  margin-top: -1px; // prevents double border when used with .Box-body
-  border-top: $border;
+  border-top-color: var(--color-border-primary);
  border-top-style: $border-style;
  border-top-width: $border-width;
  border-radius: 0 0 $border-radius $border-radius;
 }
 // Option for a box with scrolling content
@ -221,67 +223,65 @@
 // Box themes
 .Box--blue {
-  border-color: $border-blue-light;
+  border-color: var(--color-box-blue-border);
  .Box-header {
-    background-color: $bg-blue-light;
+    background-color: var(--color-bg-info);
-    border-color: $border-blue-light;
+    border-color: var(--color-box-blue-border);
  }
  .Box-body {
-    border-color: $border-blue-light;
+    border-color: var(--color-box-blue-border);
  }
  .Box-row {
-    border-color: $border-blue-light;
+    border-color: var(--color-box-blue-border);
  }
  .Box-footer {
-    border-color: $border-blue-light;
+    border-color: var(--color-box-blue-border);
  }
 }
 // Applies and red border to the outside of the box,
 // but not to the border separating rows.
 .Box--danger {
-  border-color: $border-red;
+  border-color: var(--color-border-danger);
  .Box-row {
    &:first-of-type {
-      border-color: $border-red;
+      border-color: var(--color-border-danger);
    }
  }
  .Box-body {
    &:last-of-type {
-      border-color: $border-red;
+      border-color: var(--color-border-danger);
    }
  }
 }
 .Box-header--blue {
-  background-color: $bg-blue-light;
+  background-color: var(--color-box-header-blue-bg);
-  border-color: $border-blue-light;
+  border-color: var(--color-box-header-blue-border);
 }
 // Box row highlight themes
 .Box-row--yellow {
-  // stylelint-disable-next-line primer/colors
+  background-color: var(--color-box-row-yellow-bg);
  background-color: $yellow-100;
 }
 .Box-row--blue {
-  background-color: $bg-blue-light;
+  background-color: var(--color-box-row-blue-bg);
 }
 .Box-row--gray {
-  background-color: $bg-gray;
+  background-color: var(--color-bg-tertiary);
 }
 //Box with btn-octicon
 .Box-btn-octicon {
  // Increase specificity when btn-octicon is used because comes after .Box in the cascade
  &.btn-octicon {
    padding: $spacer-3 $spacer-3;
--- a/src/branch-name/branch-name.scss
+++ b/src/branch-name/branch-name.scss
@ -1,25 +1,32 @@
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 // A nice way to display branch names inside the UI. Can be a link or not.
-// stylelint-disable selector-max-type
+
 .branch-name {
  display: inline-block;
  // stylelint-disable-next-line primer/spacing
  padding: 2px 6px;
  font: 12px $mono-font;
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-branch-name-text);
-  color: rgba($black, 0.6);
+  background-color: var(--color-branch-name-bg);
  // stylelint-disable-next-line primer/colors
  background-color: lighten($blue-100, 3%);
  border-radius: $border-radius;
  .octicon {
    // stylelint-disable-next-line primer/spacing
    margin: 1px -2px 0 0;
    // stylelint-disable-next-line primer/colors
-    color: desaturate($blue-300, 70%);
+    color: var(--color-branch-name-icon);
  }
 }
 // When a branch name is a link
-// stylelint-disable selector-no-qualifying-type
+
-a.branch-name { color: $text-blue; }
+a.branch-name {
-// stylelint-enable selector-no-qualifying-type
+  color: var(--color-text-link);
  background-color: var(--color-branch-name-link-bg);
  .octicon {
    // stylelint-disable-next-line primer/colors
    color: var(--color-branch-name-link-icon);
  }
 }
--- a/src/breadcrumb/breadcrumb.scss
+++ b/src/breadcrumb/breadcrumb.scss
@ -8,8 +8,7 @@
  &::after {
    padding-right: $em-spacer-5;
    padding-left: $em-spacer-5;
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-text-disabled);
    color: $border-gray;
    content: "/";
  }
@ -20,7 +19,7 @@
 .breadcrumb-item-selected,
 .breadcrumb-item[aria-current]:not([aria-current=false]) {
-  color: $text-gray;
+  color: var(--color-text-primary);
  &::after {
    content: none;
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@ -28,7 +28,8 @@
    cursor: default;
    .octicon {
-      color: inherit;
+      // stylelint-disable-next-line primer/colors
      color: var(--color-icon-tertiary);
    }
  }
@ -40,7 +41,7 @@
  .octicon {
    margin-right: $spacer-1;
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
    vertical-align: text-bottom;
    &:only-child {
@ -54,8 +55,7 @@
    color: inherit;
    text-shadow: none;
    vertical-align: top;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-btn-counter-bg);
    background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
  }
  .dropdown-caret {
@ -67,125 +67,108 @@
 // Default button
 .btn {
-  $bg-default: $bg-gray-light;
+  color: var(--color-btn-text);
-  $bg-hover: #f3f4f6; // custom gray
+  background-color: var(--color-btn-bg);
-  $bg-active: darken($bg-hover, 2%);
+  border-color: var(--color-btn-border);
-  $bg-disabled: $bg-default;
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  color: $text-gray-dark;
+  transition-property: color, background-color, border-color;
  background-color: $bg-default;
  border-color: $border-color-button;
  box-shadow: $box-shadow, $box-shadow-highlight;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  &:hover,
  &.hover,
  [open] > & {
-    background-color: $bg-hover;
+    background-color: var(--color-btn-hover-bg);
    border-color: var(--color-btn-hover-border);
    transition-duration: 0.1s;
  }
  &:active,
  &.selected,
  &[aria-selected=true] {
-    background-color: $bg-active;
+    background-color: var(--color-btn-selected-bg);
-    box-shadow: $box-shadow-inset;
+    box-shadow: var(--color-shadow-inset);
    transition: none;
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-text-disabled);
-    color: $gray-400;
+    background-color: var(--color-btn-bg);
-    background-color: $bg-disabled;
+    border-color: var(--color-btn-border);
    border-color: $border-color-button;
  }
  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
  &:focus,
  &.focus {
-    outline: 1px dotted transparent; // Support Firefox custom colors
+    border-color: var(--color-btn-focus-border);
-    outline-offset: 2px;
+    outline: none;
-    box-shadow: $box-shadow-focus;
+    box-shadow: var(--color-btn-focus-shadow);
  }
 }
 // Primary button
 .btn-primary {
-  $bg-default: #2ea44f; // custom green
+  color: var(--color-btn-primary-text);
-  $bg-hover: #2c974b; // custom green
+  background-color: var(--color-btn-primary-bg);
-  $bg-active: darken($bg-hover, 2%);
+  border-color: var(--color-btn-primary-border);
-  $bg-disabled: #94d3a2; // custom green
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
  $shadow: $green-900;
  $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
  color: $text-white;
  background-color: $bg-default;
  // stylelint-disable-next-line primer/borders
  border-color: rgba($black, 0.15);
  box-shadow: $box-shadow;
  &:hover,
  &.hover,
  [open] > & {
-    background-color: $bg-hover;
+    background-color: var(--color-btn-primary-hover-bg);
    border-color: var(--color-btn-primary-hover-border);
  }
  &:active,
  &.selected,
  &[aria-selected=true] {
-    background-color: $bg-active;
+    background-color: var(--color-btn-primary-selected-bg);
-    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-btn-primary-selected-shadow);
    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-btn-primary-disabled-text);
-    color: rgba($text-white, 0.8);
+    background-color: var(--color-btn-primary-disabled-bg);
-    background-color: $bg-disabled;
+    border-color: var(--color-btn-primary-disabled-border);
    // stylelint-disable-next-line primer/borders
    border-color: rgba($black, 0.1);
    box-shadow: $box-shadow;
  }
  &:focus,
  &.focus {
-    // stylelint-disable-next-line primer/box-shadow
+    background-color: var(--color-btn-primary-focus-bg);
-    box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
+    border-color: var(--color-btn-primary-focus-border);
    box-shadow: var(--color-btn-primary-focus-shadow);
  }
  .Counter {
    color: inherit;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-btn-primary-counter-bg);
    background-color: rgba($bg-white, 0.2);
  }
  .octicon {
    // stylelint-disable-next-line primer/colors
-    color: rgba($text-white, 0.8);
+    color: var(--color-btn-primary-icon);
  }
 }
-// Mixin: btn-inverse-on-hover
+// Outline button
-@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) {
+.btn-outline {
-  color: $color;
+  color: var(--color-btn-outline-text);
  transition: none;
  &:hover,
  [open] > & {
-    color: $text-white;
+    color: var(--color-btn-outline-hover-text);
-    background-color: $bg-hover;
+    background-color: var(--color-btn-outline-hover-bg);
-    border-color: rgba($black, 0.15);
+    border-color: var(--color-btn-outline-hover-border);
-    box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
+    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
    .Counter {
-      background-color: rgba($bg-white, 0.2);
+      background-color: var(--color-btn-outline-hover-counter-bg);
    }
    .octicon {
@ -196,66 +179,94 @@
  &:active,
  &.selected,
  &[aria-selected=true] {
-    color: $text-white;
+    color: var(--color-btn-outline-selected-text);
-    background-color: $bg-active;
+    background-color: var(--color-btn-outline-selected-bg);
-    border-color: rgba($black, 0.15);
+    border-color: var(--color-btn-outline-selected-border);
-    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+    box-shadow: var(--color-btn-outline-selected-shadow);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
-    color: rgba($color, 0.5);
+    color: var(--color-btn-outline-disabled-text);
-    background-color: $bg-gray-light;
+    background-color: var(--color-btn-outline-disabled-bg);
-    border-color: $border-color-button;
+    border-color: var(--color-btn-border);
-    box-shadow: $box-shadow, $box-shadow-highlight;
+    box-shadow: none;
    .Counter {
-      background-color: rgba($color, 0.05);
+      background-color: var(--color-btn-outline-disabled-counter-bg);
    }
  }
  &:focus {
-    box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
+    border-color: var(--color-btn-outline-focus-border);
    box-shadow: var(--color-btn-outline-focus-shadow);
  }
  .Counter {
    color: inherit;
-    background-color: rgba($color, 0.1);
+    background-color: var(--color-btn-outline-counter-bg);
  }
 }
 // Danger button
 .btn-danger {
-  @include btn-inverse-on-hover(
+  color: var(--color-btn-danger-text);
    $color: $text-red,
    $bg-hover: $red-600,
    $bg-active: darken($red-600, 3%),
    $shadow: $red-900
  );
 }
-// Outline button
+  .octicon {
    // stylelint-disable-next-line primer/colors
    color: var(--color-btn-danger-icon);
  }
-.btn-outline {
+  &:hover,
-  @include btn-inverse-on-hover(
+  [open] > & {
-    $color: $blue-500,
+    color: var(--color-btn-danger-hover-text);
-    $bg-hover: $blue-500,
+    background-color: var(--color-btn-danger-hover-bg);
-    $bg-active: darken($blue-500, 3%),
+    border-color: var(--color-btn-danger-hover-border);
-    $shadow: $blue-900
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
  );
 }
-// Solid buttons TODO: Deprecate?
+    .Counter {
-//
+      background-color: var(--color-btn-danger-hover-counter-bg);
-//
+    }
-.btn-blue {
+
-  @include btn-solid(
+    .octicon {
-    $text-white,
+      // stylelint-disable-next-line primer/colors
-    lighten($blue-500, 8%),
+      color: var(--color-btn-danger-hover-icon);
-    darken($blue-500, 2%)
+    }
-  );
+  }
  &:active,
  &.selected,
  &[aria-selected=true] {
    color: var(--color-btn-danger-selected-text);
    background-color: var(--color-btn-danger-selected-bg);
    border-color: var(--color-btn-danger-selected-border);
    box-shadow: var(--color-btn-danger-selected-shadow);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    color: var(--color-btn-danger-disabled-text);
    background-color: var(--color-btn-danger-disabled-bg);
    border-color: var(--color-btn-border);
    box-shadow: none;
    .Counter {
      background-color: var(--color-btn-danger-disabled-counter-bg);
    }
  }
  &:focus {
    border-color: var(--color-btn-danger-focus-border);
    box-shadow: var(--color-btn-danger-focus-shadow);
  }
  .Counter {
    color: inherit;
    background-color: var(--color-btn-danger-counter-bg);
  }
 }
 // Sizes
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@ -7,7 +7,7 @@
  display: inline-block;
  padding: 0;
  font-size: inherit;
-  color: $text-blue;
+  color: var(--color-text-link);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
@ -24,8 +24,7 @@
  &[aria-disabled=true] {
    &,
    &:hover {
-      // stylelint-disable-next-line primer/colors
+      color: var(--color-text-disabled);
      color: rgba($gray-600, 0.5);
      cursor: default;
    }
  }
@ -35,7 +34,7 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: $text-blue;
+  color: var(--color-text-link);
  background-color: transparent; // Reset default gradient backgrounds and colors
  border: 0;
  border-radius: 0;
@ -48,11 +47,17 @@
  &[aria-selected=true],
  &.zeroclipboard-is-hover,
  &.zeroclipboard-is-active {
-    color: $text-blue;
+    color: var(--color-text-link);
    background: none;
    outline: none;
    box-shadow: none;
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    background-color: transparent;
  }
 }
 // Octicon button
@ -65,28 +70,26 @@
  // stylelint-disable-next-line primer/spacing
  margin-left: 5px;
  line-height: $lh-condensed-ultra;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  vertical-align: middle;
  // For `<button>` elements
  background: transparent;
  border: 0;
-  &:hover { color: $text-blue; }
+  &:hover { color: var(--color-text-link); }
  &.disabled,
  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-text-disabled);
    color: $gray-400;
    cursor: default;
-    // stylelint-disable-next-line primer/colors
+    &:hover { color: var(--color-text-disabled); }
    &:hover { color: $gray-400; }
  }
 }
 .btn-octicon-danger:hover {
-  color: $text-red;
+  color: var(--color-text-danger);
 }
 // Close button
@ -94,9 +97,18 @@
 // Typically used with an octicon-x
 .close-button {
  padding: 0;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  outline: none;
  &:hover {
    color: var(--color-text-primary);
  }
  &:active {
    color: var(--color-text-tertiary);
  }
 }
 // Hidden text button
@ -126,25 +138,22 @@
  // stylelint-disable-next-line primer/typography
  line-height: 6px;
  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-auto-gray-7);
  text-decoration: none;
  vertical-align: middle;
-  // stylelint-disable-next-line primer/colors
+  background: var(--color-hidden-text-expander-bg);
  background: lighten($gray-300, 5%);
  border: 0;
  // stylelint-disable-next-line primer/borders
  border-radius: 1px;
  &:hover {
    text-decoration: none;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-hidden-text-expander-bg-hover);
    background-color: darken($gray-300, 4%);
  }
  &:active {
-    color: $text-white;
+    color: var(--color-text-inverse);
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-bg-info-inverse);
    background-color: $blue-400;
  }
 }
@ -174,14 +183,14 @@
  font-weight: $font-weight-bold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  vertical-align: middle;
-  background-color: $bg-white;
+  background-color: var(--color-social-count-bg);
-  border: $border-width $border-style $border-color-button;
+  border: $border-width $border-style var(--color-btn-border);
  border-left: 0;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
-  box-shadow: $box-shadow, $box-shadow-highlight;
+  box-shadow: var(--color-shadow-small), var(--color-shadow-highlight);
  &:hover,
  &:active {
@ -189,13 +198,13 @@
  }
  &:hover {
-    color: $text-blue;
+    color: var(--color-text-link);
    cursor: pointer;
  }
  &:focus {
    z-index: 1;
    outline: 0;
-    box-shadow: $box-shadow-focus;
+    box-shadow: var(--color-state-focus-shadow);
  }
 }
--- a/src/core/index.scss
+++ b/src/core/index.scss
@ -11,6 +11,8 @@
 // Global requirements
@import "../support/index.scss";
 // Color modes
 // Core modules
@import "../base/index.scss";
@import "../box/index.scss";
@ -19,6 +21,7 @@
@import "../table-object/index.scss";
@import "../forms/index.scss";
@import "../layout/index.scss";
@import "../links/index.scss";
@import "../navigation/index.scss";
@import "../pagination/index.scss";
@import "../tooltips/index.scss";
--- a/src/docs.scss
+++ b/src/docs.scss
@ -0,0 +1,14 @@
 /*!
 * Primer CSS
 * https://primer.style
 *
 * Released under MIT license.
 */
 // Docs styles
 // Only meant for the docs at https://primer.style/css
 // Global requirements
@import "./core/index.scss";
@import "./product/index.scss";
@import "./marketing/index.scss";
--- a/src/dropdown/dropdown.scss
+++ b/src/dropdown/dropdown.scss
@ -18,6 +18,7 @@
 // Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
 // way the menu should render from the element triggering it.
 .dropdown-menu {
  position: absolute;
  top: 100%;
@ -29,11 +30,11 @@
  // stylelint-disable-next-line primer/spacing
  margin-top: 2px;
  list-style: none;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
  background-clip: padding-box;
-  border: $border;
+  border: $border-width $border-style var(--color-border-overlay);
  border-radius: $border-radius;
-  box-shadow: $box-shadow-large;
+  box-shadow: var(--color-dropdown-shadow);
  &::before,
  &::after {
@ -42,16 +43,19 @@
    content: "";
  }
  // caret border
  &::before {
    // stylelint-disable-next-line primer/borders
    border: $spacer-2 $border-style transparent;
-    border-bottom-color: $border-black-fade;
+    border-bottom-color: var(--color-border-overlay);
  }
  // caret background (should match dropdown background)
  &::after {
    // stylelint-disable-next-line primer/borders
    border: 7px $border-style transparent;
-    border-bottom-color: $border-white;
+    // stylelint-disable-next-line primer/borders
    border-bottom-color: var(--color-bg-overlay);
  }
  // stylelint-disable-next-line selector-max-type
@ -75,15 +79,15 @@
  display: block;
  padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
  overflow: hidden;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  &:focus,
  &:hover {
-    color: $text-white;
+    color: var(--color-state-hover-primary-text);
    text-decoration: none;
-    background-color: $bg-blue;
+    background-color: var(--color-state-hover-primary-bg);
    outline: none;
    > .octicon {
@ -109,13 +113,13 @@
  display: block;
  height: 0;
  margin: $spacer-2 0;
-  border-top: $border;
+  border-top: $border-width $border-style var(--color-border-overlay);
 }
 .dropdown-header {
  padding: $spacer-1 $spacer-3;
  font-size: $h6-size;
-  color: $text-gray;
+  color: var(--color-text-secondary);
 }
 .dropdown-item[aria-checked="false"] .octicon-check {
@ -140,7 +144,7 @@
    right: -$spacer-3;
    left: auto;
    border-color: transparent;
-    border-left-color: $border-black-fade;
+    border-left-color: var(--color-border-overlay);
  }
  &::after {
@ -148,7 +152,8 @@
    right: -14px;
    left: auto;
    border-color: transparent;
-    border-left-color: $border-white;
+    // stylelint-disable-next-line primer/borders
    border-left-color: var(--color-bg-overlay);
  }
 }
@ -160,17 +165,18 @@
  margin-left: $spacer-2;
  &::before {
-    top: $spacer-2;
+    top: 10px;
    left: -$spacer-3;
    border-color: transparent;
-    border-right-color: $border-black-fade;
+    border-right-color: var(--color-border-overlay);
  }
  &::after {
    top: 11px;
    left: -14px;
    border-color: transparent;
-    border-right-color: $border-white;
+    // stylelint-disable-next-line primer/borders
    border-right-color: var(--color-bg-overlay);
  }
 }
@ -191,7 +197,7 @@
    bottom: -$spacer-2;
    left: 9px;
    // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style $border-black-fade;
+    border-top: $spacer-2 $border-style var(--color-border-overlay);
    // stylelint-disable-next-line primer/borders
    border-right: $spacer-2 $border-style transparent;
    border-bottom: 0;
@ -203,7 +209,7 @@
    bottom: -7px;
    left: 10px;
    // stylelint-disable-next-line primer/borders
-    border-top: 7px $border-style $border-white;
+    border-top: 7px $border-style var(--color-bg-overlay);
    // stylelint-disable-next-line primer/borders
    border-right: 7px $border-style transparent;
    border-bottom: 0;
@ -258,69 +264,3 @@
    left: 10px;
  }
 }
 // Dark dropdowns
 .dropdown-menu-dark {
  color: $text-white;
  // stylelint-disable-next-line primer/colors
  background: $gray-800;
  border-color: $border-gray-darker;
  box-shadow: $box-shadow-large;
  &::before {
    border-bottom-color: $border-gray-darker;
  }
  &::after {
    // stylelint-disable-next-line primer/borders
    border-bottom-color: $gray-800;
  }
  .dropdown-header {
    // stylelint-disable-next-line primer/colors
    color: $gray-300;
  }
  .dropdown-divider {
    border-top-color: $border-gray-darker;
  }
  .dropdown-item {
    color: inherit;
  }
  // Directional classes
  &.dropdown-menu-w {
    &::before {
      border-color: transparent transparent transparent $border-gray-darker;
    }
    &::after {
      // stylelint-disable-next-line primer/borders
      border-color: transparent transparent transparent $gray-800;
    }
  }
  &.dropdown-menu-e {
    &::before {
      border-color: transparent $border-gray-darker transparent transparent;
    }
    &::after {
      // stylelint-disable-next-line primer/borders
      border-color: transparent $gray-800 transparent transparent;
    }
  }
  &.dropdown-menu-ne {
    &::before {
      border-color: $border-gray-darker transparent transparent transparent;
    }
    &::after {
      // stylelint-disable-next-line primer/borders
      border-color: $gray-800 transparent transparent transparent;
    }
  }
 }
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@ -22,28 +22,27 @@ label {
  font-size: $body-font-size;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  vertical-align: middle;
-  background-color: $bg-white;
+  background-color: var(--color-input-bg);
  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style $border-color;
+  border: $border-width $border-style var(--color-input-border);
  border-radius: $border-radius;
  outline: none;
-  box-shadow: $box-shadow-inset;
+  box-shadow: var(--color-shadow-inset);
  &.focus,
  &:focus {
-    border-color: $border-blue;
+    border-color: var(--color-state-focus-border);
    outline: none;
-    box-shadow: $box-shadow-focus;
+    box-shadow: var(--color-state-focus-shadow);
  }
  &[disabled] {
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-text-disabled);
-    color: $gray-400;
+    background-color: var(--color-input-disabled-bg);
-    // stylelint-disable-next-line primer/colors
+    border-color: var(--color-input-disabled-border);
    background-color: #f3f4f6; // custom gray
  }
  // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
@ -64,36 +63,14 @@ textarea.form-control {
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: $bg-gray-light;
+  background-color: var(--color-input-contrast-bg);
-  &:focus { background-color: $bg-white; }
+  &:focus { background-color: var(--color-input-bg); }
 }
 // Inputs to be used against dark backgrounds.
 .input-dark {
  color: $text-white;
  // stylelint-disable-next-line primer/colors
  background-color: $white-fade-15;
  border-color: transparent;
  box-shadow: none;
  &::placeholder {
    color: inherit;
    opacity: 0.6; // inceases contrast ratio to 4.52
  }
  &.focus,
  &:focus {
    // stylelint-disable-next-line primer/borders
    border-color: $black-fade-30;
    // stylelint-disable-next-line primer/box-shadow
    box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
  }
 }
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: $text-gray-light;
+  color: var(--color-text-placeholder);
  opacity: 1; // override opacity in normalize.css
 }
@ -153,7 +130,7 @@ textarea.form-control {
      padding: 2px $spacer-1;
      font-style: normal;
      // stylelint-disable-next-line primer/colors
-      background: $yellow-100;
+      background: var(--color-auto-yellow-1);
      border-radius: $border-radius;
    }
  }
@ -171,7 +148,7 @@ textarea.form-control {
    margin: 0;
    font-size: $font-size-small;
    font-weight: $font-weight-normal;
-    color: $text-gray;
+    color: var(--color-text-secondary);
  }
 }
@ -209,7 +186,7 @@ textarea.form-control {
        display: inline-block;
        // stylelint-disable-next-line primer/spacing
        margin: 5px 0 0;
-        color: $text-gray;
+        color: var(--color-text-secondary);
      }
      img {
@ -258,11 +235,9 @@ input::-webkit-inner-spin-button {
  // stylelint-disable-next-line primer/spacing
  margin: 10px 0;
  font-size: $h5-size;
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-text-warning);
-  color: $yellow-900;
+  background: var(--color-bg-warning);
-  // stylelint-disable-next-line primer/colors
+  border: $border-width $border-style var(--color-border-warning);
  background: $yellow-100;
  border: $border-width $border-style $border-yellow;
  border-radius: $border-radius;
  p {
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@ -20,10 +20,10 @@
    max-width: 100%;
    // stylelint-disable-next-line primer/spacing
    margin-right: 5px;
-    background-color: $bg-gray-light;
+    background-color: var(--color-input-contrast-bg);
    &:focus {
-      background-color: $bg-white;
+      background-color: var(--color-input-bg);
    }
    &.shorter { width: 130px; }
@ -81,9 +81,9 @@
    h4 {
      margin: $spacer-1 0 0;
-      &.is-error { color: $text-red; }
+      &.is-error { color: var(--color-text-danger); }
-      &.is-success { color: $text-green; }
+      &.is-success { color: var(--color-text-success); }
      + .note {
        margin-top: 0;
@ -101,7 +101,7 @@
    .form-group-header label::after {
      // stylelint-disable-next-line primer/spacing
      padding-left: 5px;
-      color: $text-red;
+      color: var(--color-text-danger);
      content: "*";
    }
  }
@ -134,7 +134,7 @@
  &.successful {
    .success {
      display: inline;
-      color: $text-green;
+      color: var(--color-text-success);
    }
  }
@ -190,76 +190,56 @@
  &.successed {
    .success {
-      // stylelint-disable-next-line primer/colors
+      color: var(--color-input-tooltip-success-text);
-      color: $green-900;
+      background-color: var(--color-input-tooltip-success-bg);
-      // stylelint-disable-next-line primer/colors
+      border-color: var(--color-input-tooltip-success-border);
      background-color: $green-100;
      border-color: $border-green;
-      &::after {
+      &::after { border-bottom-color: var(--color-input-tooltip-success-bg); } // stylelint-disable-line primer/borders
-        // stylelint-disable-next-line primer/borders
+      &::before { border-bottom-color: var(--color-input-tooltip-success-border); }
        border-bottom-color: $green-100;
      }
      &::before {
        border-bottom-color: $border-green;
      }
    }
  }
  &.warn {
    .form-control {
-      // stylelint-disable-next-line primer/borders
+      border-color: var(--color-input-warning-border);
      border-color: $yellow-600;
    }
    .warning {
-      // stylelint-disable-next-line primer/colors
+      color: var(--color-input-tooltip-warning-text);
-      background-color: $yellow-200;
+      background-color: var(--color-input-tooltip-warning-bg);
-      border-color: $border-yellow;
+      border-color: var(--color-input-tooltip-warning-border);
-      &::after {
+      &::after { border-bottom-color: var(--color-input-tooltip-warning-bg); } // stylelint-disable-line primer/borders
-        // stylelint-disable-next-line primer/borders
+      &::before { border-bottom-color: var(--color-input-tooltip-warning-border); }
        border-bottom-color: $yellow-200;
      }
      &::before {
        border-bottom-color: $border-yellow;
      }
    }
  }
  &.errored {
    .form-control {
-      // stylelint-disable-next-line primer/borders
+      border-color: var(--color-input-error-border);
      border-color: $red-600;
    }
    label {
-      color: $text-red;
+      color: var(--color-text-danger);
    }
    .error {
-      background-color: $bg-red-light;
+      color: var(--color-input-tooltip-error-text);
-      border-color: $border-red-light;
+      background-color: var(--color-input-tooltip-error-bg);
      border-color: var(--color-input-tooltip-error-border);
-      &::after {
+      &::after { border-bottom-color: var(--color-input-tooltip-error-bg); } // stylelint-disable-line primer/borders
-        // stylelint-disable-next-line primer/borders
+      &::before { border-bottom-color: var(--color-input-tooltip-error-border); }
        border-bottom-color: $bg-red-light;
      }
      &::before {
        border-bottom-color: $border-red-light;
      }
    }
  }
 }
 // tooltip
 .note {
  min-height: 17px;
  margin: $spacer-1 0 2px;
  font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  .spinner {
    // stylelint-disable-next-line primer/spacing
--- a/src/forms/form-select.scss
+++ b/src/forms/form-select.scss
@ -6,11 +6,12 @@
  max-width: 100%;
  height: $size-5;
  padding-right: $spacer-4;
-  background-color: $bg-white;
+  background-color: var(--color-bg-primary);
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
+  // SVG with fill: #586069 (--color-icon-secondary)
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
  background-repeat: no-repeat;
-  background-position: right 8px center;
+  background-position: right 4px center;
-  background-size: 8px 10px;
+  background-size: 16px;
  appearance: none;
  // Hides the default caret in IE11
@ -23,6 +24,13 @@
  }
 }
@include color-mode(dark) {
  .form-select {
    // SVG with fill: #6e7681 (--color-icon-secondary)
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
  }
 }
 .select-sm {
  height: $size-4;
  // stylelint-disable-next-line primer/spacing
--- a/src/forms/form-validation.scss
+++ b/src/forms/form-validation.scss
@ -72,9 +72,8 @@ dl.form-group > dd, // TODO: Deprecate
  .octicon-check {
    display: inline-block;
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-text-success);
-    color: $green;
+    fill: var(--color-icon-success);
    fill: $green;
  }
  .octicon-x {
@ -94,8 +93,8 @@ dl.form-group > dd, // TODO: Deprecate
  .octicon-x {
    display: inline-block;
-    color: $text-red;
+    color: var(--color-text-danger);
-    fill: $red;
+    fill: var(--color-icon-danger);
  }
 }
@ -128,10 +127,9 @@ dl.form-group > dd, // TODO: Deprecate
  font-size: 13px;
  // stylelint-disable-next-line primer/typography
  line-height: 16px;
-  color: $text-gray;
+  color: var(--color-text-secondary);
-  background-color: $bg-gray-light;
+  background-color: var(--color-bg-secondary);
-  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style var(--color-drag-and-drop-border);
  border: $border-width $border-style darken($gray-300, 5%);
  border-top: 0;
  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
@ -143,7 +141,7 @@ dl.form-group > dd, // TODO: Deprecate
  }
  .error {
-    color: $text-red;
+    color: var(--color-text-danger);
  }
  // Spinner
@ -190,10 +188,10 @@ dl.form-group > dd, // TODO: Deprecate
 .drag-and-drop-error-info {
  font-weight: $font-weight-normal;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  a {
-    color: $text-blue;
+    color: var(--color-text-link);
  }
 }
@ -231,22 +229,21 @@ dl.form-group > dd, // TODO: Deprecate
  textarea {
    display: block;
    // stylelint-disable-next-line primer/borders
-    border-bottom: $border-width dashed lighten($gray-300, 5%);
+    border-bottom: $border-width dashed var(--color-upload-enabled-border);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  &.focused {
    border-radius: $border-radius;
-    box-shadow: $form-control-shadow, $btn-input-focus-shadow;
+    box-shadow: var(--color-input-shadow), var(--color-state-focus-shadow);
    .form-control {
      box-shadow: none;
    }
    .drag-and-drop {
-      // stylelint-disable-next-line primer/borders
+      border-color: var(--color-upload-enabled-border-focused);
      border-color: lighten($blue-400, 8%);
    }
  }
 }
@ -272,8 +269,7 @@ dl.form-group > dd, // TODO: Deprecate
  }
  .comment {
-    // stylelint-disable-next-line primer/borders
+    border: $border-width $border-style var(--color-previewable-comment-form-border);
    border: $border-width $border-style darken($gray-300, 5%);
  }
  .comment-form-error { margin-bottom: $spacer-2; }
@ -334,23 +330,23 @@ h2.account {
  // stylelint-disable-next-line primer/typography
  font-size: 18px;
  font-weight: $font-weight-normal;
-  color: $text-gray;
+  color: var(--color-text-secondary);
 }
 p.explain {
  position: relative;
  font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  strong {
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
  }
  .octicon {
    // stylelint-disable-next-line primer/spacing
    margin-right: 5px;
    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-icon-tertiary);
  }
  .minibutton {
--- a/src/forms/radio-group.scss
+++ b/src/forms/radio-group.scss
@ -13,14 +13,14 @@
  font-size: $body-font-size;
  // stylelint-disable-next-line primer/typography
  line-height: 20px; // Specifically not inherit our `<body>` default
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  cursor: pointer;
-  border: $border-width $border-style $border-color;
+  border: $border-width $border-style var(--color-border-primary);
  :checked + & {
    position: relative;
    z-index: 1;
-    border-color: $border-blue;
+    border-color: var(--color-border-info);
  }
  &:first-of-type {
--- a/src/header/header.scss
+++ b/src/header/header.scss
@ -4,9 +4,8 @@
  padding: $spacer-3;
  font-size: $h5-size;
  line-height: $lh-default;
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-header-text);
-  color: $white-fade-70;
+  background-color: var(--color-header-bg);
  background-color: $bg-gray-dark;
  align-items: center;
  flex-wrap: nowrap;
 }
@ -25,13 +24,13 @@
 .Header-link {
  font-weight: $font-weight-bold;
-  color: $text-white;
+  // stylelint-disable-next-line primer/colors
  color: var(--color-header-logo);
  white-space: nowrap;
  &:hover,
  &:focus {
-    // stylelint-disable-next-line primer/colors
+    color: var(--color-header-text);
    color: $white-fade-70;
    text-decoration: none;
  }
 }
--- a/src/labels/counters.scss
+++ b/src/labels/counters.scss
@ -8,10 +8,9 @@
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: $size-2 - 2px; // remove borders
-  color: $text-gray-dark;
+  color: var(--color-counter-text);
  text-align: center;
-  // stylelint-disable-next-line primer/colors
+  background-color: var(--color-counter-bg);
  background-color: rgba($gray-300, 0.5);
  border: $border-width $border-style transparent; // Support Firefox custom colors
  // stylelint-disable-next-line primer/borders
  border-radius: 2em;
@ -26,12 +25,11 @@
  }
 }
-.Counter--gray-light {
+.Counter--primary {
-  color: $text-gray-light;
+  color: var(--color-counter-primary-text);
  background-color: var(--color-counter-primary-bg);
 }
-.Counter--gray {
+.Counter--secondary {
-  color: $text-white;
+  color: var(--color-counter-secondary-text);
  // stylelint-disable-next-line primer/colors
  background-color: $gray-500;
 }
--- a/src/labels/diffstat.scss
+++ b/src/labels/diffstat.scss
@ -5,7 +5,7 @@
 .diffstat {
  font-size: $h6-size;
  font-weight: $font-weight-bold;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: default;
 }
@ -22,16 +22,16 @@
 }
 .diffstat-block-deleted {
-  background-color: $bg-diffstat-deleted;
+  background-color: var(--color-diffstat-deletion-bg);
-  outline: 1px dashed transparent; // Support Firefox custom colors
+  outline: 1px solid var(--color-diffstat-deletion-border); // Support Firefox custom colors
 }
 .diffstat-block-added {
-  background-color: $bg-diffstat-added;
+  background-color: var(--color-diffstat-addition-bg);
-  outline: 1px solid transparent; // Support Firefox custom colors
+  outline: 1px solid var(--color-diffstat-addition-border); // Support Firefox custom colors
 }
 .diffstat-block-neutral {
-  background-color: $bg-diffstat-neutral;
+  background-color: var(--color-diffstat-neutral-bg);
-  outline: 1px dotted transparent; // Support Firefox custom colors
+  outline: 1px solid var(--color-diffstat-neutral-border); // Support Firefox custom colors
 }
--- a/src/labels/labels.scss
+++ b/src/labels/labels.scss
@ -11,7 +11,7 @@
 .Label {
  @include labels-base;
  background-color: transparent !important; // TODO: Remove again
-  border-color: $border-color;
+  border-color: var(--color-label-border);
  &:hover {
    text-decoration: none;
@ -30,64 +30,34 @@
  @include labels--inline;
 }
 // Contrast
 .Label--outline, // TODO: Deprecate? It's now the default
 .Label--gray {
  color: $text-gray;
  border-color: $border-gray;
 }
 .Label--gray-darker {
  color: $text-gray-dark;
  // stylelint-disable-next-line primer/borders
  border-color: $gray-500;
 }
 // Colors
-.Label--yellow {
+.Label--primary {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-label-primary-text);
-  color: $yellow-900;
+  border-color: var(--color-label-primary-border);
  // stylelint-disable-next-line primer/borders
  border-color: $yellow-800;
 }
-.Label--orange {
+.Label--secondary {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-label-secondary-text);
-  color: $orange-800;
+  border-color: var(--color-label-secondary-border);
  // stylelint-disable-next-line primer/borders
  border-color: $orange-500;
 }
-.Label--red {
+.Label--info {
-  color: $text-red;
+  color: var(--color-label-info-text);
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-label-info-border);
  border-color: $red-600;
 }
-.Label--outline-green, // TODO: Deprecate
+.Label--success {
-.Label--green {
+  color: var(--color-label-success-text);
-  // stylelint-disable-next-line primer/colors
+  border-color: var(--color-label-success-border);
  color: $green-600;
  // stylelint-disable-next-line primer/borders
  border-color: $green-500;
 }
-.Label--blue {
+.Label--warning {
-  color: $text-blue;
+  color: var(--color-label-warning-text);
-  border-color: $border-blue;
+  border-color: var(--color-label-warning-border);
 }
-.Label--purple {
+.Label--danger {
-  color: $text-purple;
+  color: var(--color-label-danger-text);
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-label-danger-border);
  border-color: $purple-400;
 }
 .Label--pink {
  // stylelint-disable-next-line primer/colors
  color: $pink-600;
  // stylelint-disable-next-line primer/borders
  border-color: $pink-400;
 }
--- a/src/labels/states.scss
+++ b/src/labels/states.scss
@ -1,10 +1,4 @@
 // A rounded corner box containing a label "open" or "closed"
 // The default state is gray.
 //
 // open     - $green background
 // reopened - $green background
 // closed   - $red background
 // merged   - $purple background
 // Default 32px
 // Small 24px
@ -18,26 +12,36 @@
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
  color: $text-white;
  text-align: center;
  white-space: nowrap;
  // stylelint-disable-next-line primer/colors
  background-color: $gray-500;
  border: $border-width $border-style transparent; // Support Firefox custom colors
  // stylelint-disable-next-line primer/borders
  border-radius: 2em;
 }
-.State--green {
+.state, // TODO: Deprecate
-  background-color: $bg-green;
+.State,
 .State--draft {
  color: var(--color-pr-state-draft-text);
  background-color: var(--color-pr-state-draft-bg);
  border: $border-width $border-style var(--color-pr-state-draft-border);
 }
-.State--red {
+.State--open {
-  background-color: $bg-red;
+  color: var(--color-pr-state-open-text);
  background-color: var(--color-pr-state-open-bg);
  border-color: var(--color-pr-state-open-border);
 }
-.State--purple {
+.State--merged {
-  background-color: $bg-purple;
+  color: var(--color-pr-state-merged-text);
  background-color: var(--color-pr-state-merged-bg);
  border-color: var(--color-pr-state-merged-border);
 }
 .State--closed {
  color: var(--color-pr-state-closed-text);
  background-color: var(--color-pr-state-closed-bg);
  border-color: var(--color-pr-state-closed-border);
 }
 // Small
--- a/src/links/README.md
+++ b/src/links/README.md
@ -0,0 +1,25 @@
 ---
 bundle: "links"
 generated: true
 ---
 # Primer CSS: `links` bundle
 ## Usage
 Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 ```scss
@import "@primer/css/links/index.scss";
 ```
 ## Build
 The `@primer/css` npm package includes a standalone CSS build of this module in `dist/links.css`.
 ## License
 [MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
 [scss]: https://sass-lang.com/documentation/syntax#scss
--- a/src/links/index.scss
+++ b/src/links/index.scss
@ -0,0 +1,3 @@
 // support files
@import "../support/index.scss";
@import "./link.scss";
--- a/src/links/link.scss
+++ b/src/links/link.scss
@ -0,0 +1,45 @@
 // Links
 .Link {
  color: var(--color-text-link);
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
 }
 .Link--primary {
  color: var(--color-text-primary) !important;
  &:hover {
    color: var(--color-text-link) !important;
  }
 }
 .Link--secondary {
  color: var(--color-text-secondary) !important;
  &:hover {
    color: var(--color-text-link) !important;
  }
 }
 .Link--muted {
  color: var(--color-text-secondary) !important;
  &:hover {
    color: var(--color-text-link) !important;
    text-decoration: none;
  }
 }
 // Set the link color only on hover
 // Useful when you want only part of a link to turn blue on hover
 .Link--onHover {
  &:hover {
    color: var(--color-text-link) !important;
    text-decoration: underline;
    cursor: pointer;
  }
 }
--- a/src/markdown/blob-csv.scss
+++ b/src/markdown/blob-csv.scss
@ -15,7 +15,7 @@
    // stylelint-disable-next-line primer/spacing
    padding: 10px $spacer-2 9px;
    text-align: right;
-    background: $bg-white;
+    background: var(--color-bg-primary);
    border: 0;
  }
@ -23,7 +23,7 @@
  th {
    font-weight: $font-weight-bold;
-    background: $bg-gray;
+    background: var(--color-bg-tertiary);
    border-top: 0;
  }
 }
--- a/src/markdown/code.scss
+++ b/src/markdown/code.scss
@ -8,8 +8,7 @@
    margin: 0;
    // stylelint-disable-next-line primer/typography
    font-size: 85%;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-markdown-code-bg);
    background-color: rgba($black, 0.05);
    border-radius: $border-radius;
    br { display: none; }
@ -50,7 +49,7 @@
    font-size: 85%;
    // stylelint-disable-next-line primer/typography
    line-height: 1.45;
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
    border-radius: $border-radius;
  }
--- a/src/markdown/headings.scss
+++ b/src/markdown/headings.scss
@ -15,7 +15,7 @@
    line-height: $lh-condensed;
    .octicon-link {
-      color: $text-black;
+      color: var(--color-text-primary);
      vertical-align: middle;
      visibility: hidden;
    }
@ -39,7 +39,7 @@
    padding-bottom: 0.3em;
    // stylelint-disable-next-line primer/typography
    font-size: 2em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-secondary);
  }
  h2 {
@ -47,7 +47,7 @@
    padding-bottom: 0.3em;
    // stylelint-disable-next-line primer/typography
    font-size: 1.5em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-secondary);
  }
  h3 {
@ -67,6 +67,6 @@
  h6 {
    // stylelint-disable-next-line primer/typography
    font-size: 0.85em;
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
  }
 }
--- a/src/markdown/images.scss
+++ b/src/markdown/images.scss
@ -8,7 +8,7 @@
    // because we put padding on the images to hide header lines, and some people
    // specify the width of their images in their markdown.
    box-sizing: content-box;
-    background-color: $bg-white;
+    background-color: var(--color-bg-primary);
    &[align=right] {
      // stylelint-disable-next-line primer/spacing
@ -44,8 +44,7 @@
      // stylelint-disable-next-line primer/spacing
      margin: 13px 0 0;
      overflow: hidden;
-      // stylelint-disable-next-line primer/borders
+      border: $border-width $border-style var(--color-markdown-frame-border);
      border: $border-width $border-style lighten($gray-300, 5%);
    }
    span img {
@ -58,7 +57,7 @@
      // stylelint-disable-next-line primer/spacing
      padding: 5px 0 0;
      clear: both;
-      color: $text-gray-dark;
+      color: var(--color-text-primary);
    }
  }
--- a/src/markdown/lists.scss
+++ b/src/markdown/lists.scss
@ -2,7 +2,6 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
  // Lists, Blockquotes & Such
  ul,
  ol {
@ -46,11 +45,6 @@
    margin-bottom: 0;
  }
  li {
    // TODO@16.0.0: Remove this. See https://github.com/primer/css/pull/1137.
    word-wrap: break-all;
  }
  li > p {
    margin-top: $spacer-3;
  }
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@ -45,7 +45,7 @@
  // Link Colors
  .absent {
-    color: $text-red;
+    color: var(--color-text-danger);
  }
  .anchor {
@ -77,16 +77,16 @@
    padding: 0;
    margin: $spacer-4 0;
    // stylelint-disable-next-line primer/colors
-    background-color: $gray-200;
+    background-color: var(--color-border-primary);
    border: 0;
  }
  blockquote {
    // stylelint-disable-next-line primer/spacing
    padding: 0 1em;
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
    // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style lighten($gray-300, 5%);
+    border-left: 0.25em $border-style var(--color-markdown-blockquote-border);
    > :first-child {
      margin-top: 0;
--- a/src/markdown/tables.scss
+++ b/src/markdown/tables.scss
@ -17,17 +17,15 @@
    td {
      // stylelint-disable-next-line primer/spacing
      padding: 6px 13px;
-      // stylelint-disable-next-line primer/borders
+      border: $border-width $border-style var(--color-markdown-table-border);
      border: $border-width $border-style lighten($gray-300, 5%);
    }
    tr {
-      background-color: $bg-white;
+      background-color: var(--color-bg-primary);
-      // stylelint-disable-next-line primer/borders
+      border-top: $border-width $border-style var(--color-markdown-table-tr-border);
      border-top: $border-width $border-style darken($gray-300, 4%);
      &:nth-child(2n) {
-        background-color: $bg-gray;
+        background-color: var(--color-bg-tertiary);
      }
    }
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@ -3,98 +3,114 @@
  padding: $spacer-3 $spacer-4;
  font-size: $h5-size;
  font-weight: $font-weight-semibold;
-  color: $text-white;
+  color: var(--color-mktg-btn-text);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
-  // stylelint-disable-next-line primer/colors
+  background-color: var(--color-mktg-btn-bg);
-  background-color: $blue-mktg;
+  border: $border-width $border-style var(--color-mktg-btn-border);
  // stylelint-disable-next-line primer/borders
  border: $border-width $border-style $blue-mktg;
  border-radius: $border-radius;
  transition: $transition-time / 2;
  appearance: none; // Corrects inability to style clickable `input` types in iOS.
  &:hover {
    text-decoration: none;
-    background-color: $bg-blue;
+    background-color: var(--color-mktg-btn-hover-bg);
-    border-color: $border-blue;
+    border-color: var(--color-mktg-btn-hover-border);
  }
  &:focus {
    outline: 0;
-    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-mktg-btn-focus-shadow);
    box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    color: var(--color-mktg-btn-disabled-text);
    pointer-events: none; // Disable hover styles
    cursor: default;
-    opacity: 0.65;
+    background-color: var(--color-mktg-btn-disabled-bg);
    border-color: var(--color-mktg-btn-disabled-border);
  }
 }
 .btn-primary-mktg {
-  // stylelint-disable-next-line primer/colors
+  color: var(--color-mktg-btn-primary-text);
-  background-color: $green-mktg;
+  background-color: var(--color-mktg-btn-primary-bg);
-  // stylelint-disable-next-line primer/borders
+  border-color: var(--color-mktg-btn-primary-border);
  border-color: $green-mktg;
  &:hover {
-    background-color: $bg-green;
+    background-color: var(--color-mktg-btn-primary-hover-bg);
-    // stylelint-disable-next-line primer/borders
+    border-color: var(--color-mktg-btn-primary-hover-border);
    border-color: $green-500;
  }
  &:focus {
-    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-mktg-btn-primary-focus-shadow);
-    box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
+  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    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);
  background-color: var(--color-mktg-btn-outline-bg);
  border-color: var(--color-mktg-btn-outline-border);
  &:hover {
    color: var(--color-mktg-btn-outline-hover-text);
    background-color: var(--color-mktg-btn-outline-hover-bg);
    border-color: var(--color-mktg-btn-outline-hover-border);
  }
  &: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);
  background-color: var(--color-mktg-btn-dark-bg);
  border-color: var(--color-mktg-btn-dark-border);
  &:hover {
    color: var(--color-mktg-btn-dark-hover-text);
    background-color: var(--color-mktg-btn-dark-hover-bg);
    border-color: var(--color-mktg-btn-dark-hover-border);
  }
  &:focus {
    box-shadow: var(--color-mktg-btn-dark-focus-shadow);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    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;
  font-size: $h4-size;
 }
 .btn-outline-mktg {
  // stylelint-disable-next-line primer/colors
  color: $blue-mktg;
  // stylelint-disable-next-line primer/colors
  background-color: rgba($white, 0);
  // stylelint-disable-next-line primer/borders
  border-color: rgba($blue-mktg, 0.5);
  &:hover {
    color: $text-blue;
    text-decoration: none;
    // stylelint-disable-next-line primer/colors
    background-color: rgba($white, 0);
    // stylelint-disable-next-line primer/borders
    border-color: rgba($blue-mktg, 1);
  }
 }
@mixin btn-transparent-active {
  color: $gray-800;
  background-color: $white;
  background-image: none;
  border-color: $white;
 }
 .btn-transparent {
  color: $text-white;
  background-color: transparent;
  background-image: none;
  // stylelint-disable-next-line primer/borders
  border: $border-width $border-style $white-fade-50;
  &:hover,
  &:active {
    @include btn-transparent-active;
  }
 }
--- a/src/marketing/support/variables.scss
+++ b/src/marketing/support/variables.scss
@ -1,40 +1,11 @@
 $marketing-font-path: "/fonts/" !default;
 // 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;
 }
 $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
 $h000-size: 64px !default;
 $h000-size-mobile: 48px !default;
 // Colors
 $green-mktg: mix($green-500, $green-400, 50%) !default;
 $blue-mktg: mix($blue-400, $blue-500, 42%) !default;
 // Animations
 $transition-time: 0.4s !default;
--- a/src/marketing/type/typography.scss
+++ b/src/marketing/type/typography.scss
@ -1,5 +1,29 @@
-// Headings
+// 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,
@ -86,8 +110,8 @@
  font-family: $mono-font;
  font-size: $h4-size;
  line-height: 1.4;
-  color: $text-gray;
+  color: var(--color-color-text-secondary);
-  border-left: 3px solid $border-color;
+  border-left: 3px solid var(--color-border-primary);
  @include breakpoint(md) {
    padding-left: $spacer * 1.5;
--- a/src/marketing/utilities/index.scss
+++ b/src/marketing/utilities/index.scss
@ -4,4 +4,5 @@
@import "./borders.scss";
@import "./layout.scss";
@import "./margin.scss";
@import "./misc.scss";
@import "./padding.scss";
--- a/src/marketing/utilities/misc.scss
+++ b/src/marketing/utilities/misc.scss
@ -0,0 +1,5 @@
 .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;
 }
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@ -11,12 +11,12 @@
  }
  &.pjax-active .filter-item {
-    color: $text-gray;
+    color: var(--color-text-secondary);
    background-color: transparent;
    &.pjax-active {
-      color: $text-white;
+      color: var(--color-text-inverse);
-      background-color: $bg-blue;
+      background-color: var(--color-bg-info-inverse);
    }
  }
 }
@ -28,7 +28,7 @@
  margin-bottom: $spacer-1;
  overflow: hidden;
  font-size: $h5-size;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
@ -37,14 +37,14 @@
  &:hover {
    text-decoration: none;
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
  }
  &.selected,
  &[aria-selected=true],
  &[aria-current]:not([aria-current=false]) {
-    color: $text-white;
+    color: var(--color-state-selected-primary-text);
-    background-color: $bg-blue;
+    background-color: var(--color-state-selected-primary-bg);
  }
  .count {
@ -59,7 +59,6 @@
    bottom: 2px;
    z-index: -1;
    display: inline-block;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-filter-item-bar-bg);
    background-color: darken($gray-100, 2%);
  }
 }
--- a/src/navigation/menu.scss
+++ b/src/navigation/menu.scss
@ -5,8 +5,8 @@
 .menu {
  margin-bottom: $spacer-3;
  list-style: none;
-  background-color: $bg-white;
+  background-color: var(--color-bg-primary);
-  border: $border;
+  border: $border-width $border-style var(--color-border-primary);
  border-radius: $border-radius;
 }
@ -14,8 +14,8 @@
  position: relative;
  display: block;
  padding: $spacer-2 $spacer-3;
-  color: $text-black;
+  color: var(--color-text-primary);
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-secondary);
  &:first-child {
    border-top: 0;
@ -36,19 +36,19 @@
  &:focus,
  &:hover {
    text-decoration: none;
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-state-hover-secondary-bg);
    background-color: $gray-100;
    outline: none;
  }
  &:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-bg-secondary);
  }
  &.selected,
  &[aria-selected=true],
  &[aria-current]:not([aria-current=false]) {
    cursor: default;
    background-color: var(--color-menu-bg-active);
    &::before {
      position: absolute;
@ -58,7 +58,7 @@
      width: 2px;
      content: "";
      // stylelint-disable-next-line primer/colors
-      background-color: #f9826c; // custom coral
+      background-color: var(--color-menu-border-active);
    }
  }
@ -66,7 +66,7 @@
    width: 16px;
    margin-right: $spacer-2;
    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-icon-tertiary);
    text-align: center;
  }
@ -78,7 +78,7 @@
  .menu-warning {
    float: right;
    // stylelint-disable-next-line primer/colors
-    color: $red-900;
+    color: var(--color-auto-red-9);
  }
  .avatar {
@ -88,7 +88,7 @@
  &.alert {
    .Counter {
-      color: $text-red;
+      color: var(--color-text-danger);
    }
  }
 }
@ -100,8 +100,8 @@
  margin-bottom: 0;
  font-size: inherit;
  font-weight: $font-weight-bold;
-  color: $text-black;
+  color: var(--color-menu-heading-text);
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-secondary);
  &:hover {
    text-decoration: none;
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 .SideNav {
-  background-color: $bg-gray-light;
+  background-color: var(--color-bg-secondary);
 }
 .SideNav-item {
@ -12,11 +12,11 @@
  width: 100%;
  // stylelint-disable-next-line primer/spacing
  padding: 12px $spacer-3;
-  color: $text-black;
+  color: var(--color-text-primary);
  text-align: left;
  background-color: transparent;
  border: 0;
-  border-top: $border-width $border-style $border-gray-light;
+  border-top: $border-width $border-style var(--color-border-secondary);
  &:first-child {
    border-top: 0;
@ -25,7 +25,7 @@
  &:last-child {
    // makes sure there is a "bottom border" in case the list is not long enough
    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 $border-width 0 $border-color;
+    box-shadow: 0 $border-width 0 var(--color-border-primary);
  }
  // Bar on the left
@ -46,23 +46,22 @@
 .SideNav-item:hover,
 .SideNav-item:focus {
  text-decoration: none;
-  // stylelint-disable-next-line primer/colors
+  background-color: var(--color-state-hover-secondary-bg);
  background-color: $gray-100;
  outline: none;
 }
 .SideNav-item:active {
-  background-color: $bg-gray-light;
+  background-color: var(--color-bg-secondary);
 }
 .SideNav-item[aria-current]:not([aria-current=false]),
 .SideNav-item[aria-selected="true"] {
-  background-color: $bg-white;
+  background-color: var(--color-sidenav-selected-bg);
  // Bar on the left
  &::before {
    // stylelint-disable-next-line primer/colors
-    background-color: #f9826c; // custom coral
+    background-color: var(--color-sidenav-border-active);
  }
 }
@ -73,7 +72,7 @@
 .SideNav-icon {
  width: 16px;
  margin-right: $spacer-2;
-  color: $text-gray-light;
+  color: var(--color-text-tertiary);
 }
 // Sub Nav
@ -85,7 +84,7 @@
  display: block;
  width: 100%;
  padding: $spacer-1 0;
-  color: $text-blue;
+  color: var(--color-text-link);
  text-align: left;
  background-color: transparent;
  border: 0;
@ -93,7 +92,7 @@
 .SideNav-subItem:hover,
 .SideNav-subItem:focus {
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  text-decoration: none;
  outline: none;
 }
@ -101,5 +100,5 @@
 .SideNav-subItem[aria-current]:not([aria-current=false]),
 .SideNav-subItem[aria-selected="true"] {
  font-weight: $font-weight-semibold;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
 }
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@ -10,7 +10,7 @@
 .subnav-bordered {
  // stylelint-disable-next-line primer/spacing
  padding-bottom: 20px;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 }
 .subnav-flush {
@ -25,8 +25,8 @@
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
-  border: $border;
+  border: $border-width $border-style var(--color-border-primary);
  + .subnav-item {
    // stylelint-disable-next-line primer/spacing
@ -36,17 +36,16 @@
  &:hover,
  &:focus {
    text-decoration: none;
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
  }
  &.selected,
  &[aria-selected=true],
  &[aria-current]:not([aria-current=false]) {
    z-index: 2;
-    color: $text-white;
+    color: var(--color-state-selected-primary-text);
-    background-color: $bg-blue;
+    background-color: var(--color-state-selected-primary-bg);
-    // stylelint-disable-next-line primer/borders
+    border-color: var(--color-state-selected-primary-border);
    border-color: $blue-600;
  }
  &:first-child {
@ -69,7 +68,7 @@
 .subnav-search-input {
  width: 320px;
  padding-left: $spacer-5;
-  color: $text-gray;
+  color: var(--color-text-secondary);
 }
 .subnav-search-input-wide {
@ -82,15 +81,13 @@
  left: 8px;
  display: block;
  // stylelint-disable-next-line primer/colors
-  color: $gray-400;
+  color: var(--color-icon-tertiary);
  text-align: center;
  pointer-events: none;
 }
 .subnav-search-context {
  .btn {
    // stylelint-disable-next-line primer/colors
    color: $gray-700;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@ -3,7 +3,7 @@
 .tabnav {
  margin-top: 0;
  margin-bottom: $spacer-3;
-  border-bottom: $border;
+  border-bottom: $border-width $border-style var(--color-border-primary);
 }
 .tabnav-tabs {
@ -20,38 +20,46 @@
  font-size: $h5-size;
  // stylelint-disable-next-line primer/typography
  line-height: 23px;
-  color: $text-gray-dark;
+  color: var(--color-text-secondary);
  text-decoration: none;
  background-color: transparent;
  border: $border-width $border-style transparent;
  border-bottom: 0;
  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  &.selected,
  &[aria-selected=true],
  &[aria-current]:not([aria-current=false]) {
-    background-color: $bg-white;
+    color: var(--color-text-primary);
-    border-color: $border-gray;
+    background-color: var(--color-bg-canvas); // cover bottom border
    border-color: var(--color-border-primary);
    border-radius: $border-radius $border-radius 0 0;
    .octicon {
      color: inherit;
    }
  }
  &:hover,
  &:focus {
-    color: $text-gray;
+    color: var(--color-text-primary);
    text-decoration: none;
    transition-duration: 0.1s;
  }
  &:active {
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
  }
  .octicon {
    margin-right: $spacer-1;
    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-icon-tertiary);
  }
  .Counter {
    margin-left: $spacer-1;
    color: inherit;
  }
 }
@ -67,7 +75,7 @@
  // stylelint-disable-next-line primer/spacing
  margin-left: 10px;
  font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  > .octicon {
    // stylelint-disable-next-line primer/spacing
@ -78,7 +86,7 @@
 // When tabnav-extra are anchors
 // stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: $text-blue;
+  color: var(--color-text-link);
  text-decoration: none;
 }
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@ -3,7 +3,7 @@
  overflow-x: auto;
  overflow-y: hidden;
  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-color;
+  box-shadow: inset 0 -1px 0 var(--color-border-secondary);
  justify-content: space-between;
 }
@ -16,36 +16,36 @@
  font-size: $body-font-size;
  // stylelint-disable-next-line primer/typography
  line-height: 30px;
-  color: $text-black;
+  color: var(--color-underlinenav-text);
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  // stylelint-disable-next-line primer/borders
-  border-bottom: 2px $border-style rgba($border-gray-dark, 0);
+  border-bottom: 2px $border-style transparent;
  transition: border-bottom-color 0.36s ease-in;
  &:hover,
  &:focus {
    color: var(--color-underlinenav-text-hover);
    text-decoration: none;
-    border-bottom-color: $border-gray-dark;
+    border-bottom-color: var(--color-border-tertiary);
    outline: 1px dotted transparent; // Support Firefox custom colors
    outline-offset: -1px;
-    transition-timing-function: ease-out;
+    transition: border-bottom-color 0.12s ease-out;
    transition-duration: 0.12s;
  }
  &.selected,
  &[role=tab][aria-selected=true],
  &[aria-current]:not([aria-current=false]) {
    font-weight: $font-weight-bold;
    color: var(--color-underlinenav-text-active);
    // stylelint-disable-next-line primer/borders
    border-bottom-color: #f9826c; // custom coral
    outline: 1px dotted transparent; // Support Firefox custom colors
    outline-offset: -1px;
    .UnderlineNav-octicon {
-      color: $text-gray;
+      color: var(--color-text-tertiary);
    }
  }
 }
@ -69,11 +69,16 @@
 .UnderlineNav-octicon {
  margin-right: $spacer-1;
  // stylelint-disable-next-line primer/colors
-  color: $gray-400;
+  color: var(--color-underlinenav-icon);
 }
 .UnderlineNav .Counter {
  margin-left: $spacer-1;
  color: var(--color-underlinenav-counter-text);
  &--primary {
    color: var(--color-counter-primary-text);
  }
 }
 .UnderlineNav-container {
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@ -11,7 +11,7 @@
    font-style: normal;
    // stylelint-disable-next-line primer/typography
    line-height: 20px;
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
@ -24,27 +24,27 @@
    &:hover,
    &:focus {
      text-decoration: none;
-      border-color: $border-color;
+      border-color: var(--color-border-primary);
      outline: 0;
      transition-duration: 0.1s;
    }
    &:active {
-      border-color: $border-gray-light;
+      border-color: var(--color-border-secondary);
      transition: none;
    }
  }
  .previous_page,
  .next_page {
-    color: $text-blue;
+    color: var(--color-text-link);
  }
  .current,
  .current:hover,
  [aria-current]:not([aria-current=false]) {
-    color: $text-white;
+    color: var(--color-state-selected-primary-text);
-    background-color: $bg-blue;
+    background-color: var(--color-state-selected-primary-bg);
    border-color: transparent;
  }
@ -54,7 +54,7 @@
  .gap:hover,
  .disabled:hover,
  [aria-disabled=true]:hover {
-    color: $text-gray-light;
+    color: var(--color-text-disabled);
    cursor: default;
    border-color: transparent;
  }
--- a/src/popover/popover.scss
+++ b/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: $border-black-fade;
+    border-bottom-color: var(--color-border-overlay);
  }
  &::after {
@ -33,7 +33,12 @@
    // stylelint-disable-next-line primer/borders
    border: 7px $border-style transparent;
    // stylelint-disable-next-line primer/borders
-    border-bottom-color: $bg-white;
+    border-bottom-color: var(--color-bg-overlay);
  }
  // TODO: Refactor so that .Popover is not dependant on .Box
  &.Box {
    background-color: var(--color-bg-overlay);
  }
 }
@ -49,13 +54,13 @@
  &::before {
    bottom: -$spacer-3;
-    border-top-color: $border-black-fade;
+    border-top-color: var(--color-border-overlay);
  }
  &::after {
    bottom: -14px;
    // stylelint-disable-next-line primer/borders
-    border-top-color: $bg-white;
+    border-top-color: var(--color-bg-overlay);
  }
 }
@ -128,13 +133,13 @@
 .Popover-message--right-bottom {
  &::before {
    right: -$spacer-3;
-    border-left-color: $border-black-fade;
+    border-left-color: var(--color-border-overlay);
  }
  &::after {
    right: -14px;
    // stylelint-disable-next-line primer/borders
-    border-left-color: $bg-white;
+    border-left-color: var(--color-bg-overlay);
  }
 }
@ -144,13 +149,13 @@
 .Popover-message--left-bottom {
  &::before {
    left: -$spacer-3;
-    border-right-color: $border-black-fade;
+    border-right-color: var(--color-border-overlay);
  }
  &::after {
    left: -14px;
    // stylelint-disable-next-line primer/borders
-    border-right-color: $bg-white;
+    border-right-color: var(--color-bg-overlay);
  }
 }
--- a/src/progress/progress.scss
+++ b/src/progress/progress.scss
@ -5,7 +5,7 @@
  height: 8px;
  overflow: hidden;
  // stylelint-disable-next-line primer/colors
-  background-color: $gray-200;
+  background-color: var(--color-auto-gray-2);
  border-radius: $border-radius;
  outline: 1px solid transparent; // Support Firefox custom colors
 }
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
  left: 0;
  pointer-events: none;
  content: "";
-  background-color: $bg-black-fade;
+  background-color: var(--color-select-menu-backdrop-bg);
  @include breakpoint(sm) {
    display: none;
@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
  overflow: hidden; // Enables border radius on scrollable child elements
  pointer-events: auto;
  flex-direction: column;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
  border: $border-width $border-style var(--color-select-menu-backdrop-border);
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius * 2;
-  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: var(--color-select-menu-shadow);
  box-shadow: 0 0 18px rgba($black, 0.4);
  animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
  @keyframes SelectMenu-modal-animation {
@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
    max-height: $SelectMenu-max-height;
    margin: $spacer-2 0 $spacer-3 0;
    font-size: $font-size-small;
-    border: $border;
+    border-color: var(--color-border-overlay);
    border-radius: $border-radius;
-    box-shadow: $box-shadow-large;
+    box-shadow: var(--color-shadow-large);
    animation-name: SelectMenu-modal-animation--sm;
  }
 }
@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
  padding: $spacer-3;
  flex: none; // fixes header from getting squeezed in Safari iOS
  align-items: center;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
  @include breakpoint(sm) {
    // stylelint-disable-next-line primer/spacing
@ -127,7 +127,7 @@ $SelectMenu-max-height: 480px !default;
  margin: -$spacer-3;
  line-height: 1;
  // stylelint-disable-next-line primer/colors
-  color: $gray-light;
+  color: var(--color-icon-tertiary);
  background-color: transparent;
  border: 0;
@ -145,7 +145,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
  padding: $spacer-3;
  margin: 0;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
  @include breakpoint(sm) {
    padding: $spacer-2;
@ -174,7 +174,7 @@ $SelectMenu-max-height: 480px !default;
  flex: auto;
  overflow-x: hidden;
  overflow-y: auto;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
@ -188,12 +188,12 @@ $SelectMenu-max-height: 480px !default;
  width: 100%;
  padding: $spacer-3;
  overflow: hidden;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
  border: 0;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
  @include breakpoint(sm) {
    // stylelint-disable-next-line primer/spacing
@ -235,7 +235,7 @@ $SelectMenu-max-height: 480px !default;
  overflow-x: auto;
  overflow-y: hidden;
  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-light;
+  box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
  -webkit-overflow-scrolling: touch;
  // Hide scrollbar so it doesn't cover the text
@ -253,12 +253,12 @@ $SelectMenu-max-height: 480px !default;
  padding: $spacer-2 $spacer-3;
  font-size: $font-size-small;
  font-weight: $font-weight-semibold;
-  color: $text-gray-light;
+  color: var(--color-text-tertiary);
  text-align: center;
  background-color: transparent;
  border: 0;
  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-light;
+  box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
  @include breakpoint(sm) {
    flex: none;
@ -271,14 +271,14 @@ $SelectMenu-max-height: 480px !default;
  &[aria-selected="true"] {
    z-index: 1; // Keeps box-shadow visible when hovering
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
    cursor: default;
-    background-color: $bg-white;
+    background-color: var(--color-bg-overlay);
    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px $border-gray-light;
+    box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary);
    @include breakpoint(sm) {
-      border-color: $border-gray-light;
+      border-color: var(--color-select-menu-border-secondary);
      box-shadow: none;
    }
  }
@ -292,8 +292,8 @@ $SelectMenu-max-height: 480px !default;
  // stylelint-disable-next-line primer/spacing
  padding: 7px $spacer-3;
  text-align: center;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
 }
 // Blankslate and Loading
@ -304,7 +304,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
  padding: $spacer-4 $spacer-3;
  text-align: center;
-  background-color: $bg-white;
+  background-color: var(--color-bg-overlay);
 }
 // Divider
@ -316,13 +316,13 @@ $SelectMenu-max-height: 480px !default;
  margin: 0;
  font-size: $font-size-small;
  font-weight: $font-weight-semibold;
-  color: $text-gray-light;
+  color: var(--color-text-tertiary);
-  background-color: $bg-gray;
+  background-color: var(--color-bg-tertiary);
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
  // Borderless
  .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style $border-gray-light;
+    border-top: $border-width $border-style var(--color-select-menu-border-secondary);
    &:empty {
      padding: 0;
@ -339,9 +339,9 @@ $SelectMenu-max-height: 480px !default;
  z-index: 0; // Avoid top border from getting covered by the negative margin of the list
  padding: $spacer-2 $spacer-3;
  font-size: $font-size-small;
-  color: $text-gray-light;
+  color: var(--color-text-tertiary);
  text-align: center;
-  border-top: $border-width $border-style $border-gray-light;
+  border-top: $border-width $border-style var(--color-select-menu-border-secondary);
  @include breakpoint(sm) {
    // stylelint-disable-next-line primer/spacing
@ -389,7 +389,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-item[aria-checked=true] {
  font-weight: $font-weight-semibold;
-  color: $text-gray-dark;
+  color: var(--color-text-primary);
  .SelectMenu-icon--check {
    visibility: visible;
@ -404,7 +404,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled=true] {
-  color: $text-gray-light;
+  color: var(--color-text-disabled);
  pointer-events: none;
 }
@ -415,34 +415,33 @@ $SelectMenu-max-height: 480px !default;
@media (hover: hover) {
  body:not(.intent-mouse) .SelectMenu-closeButton:focus,
  .SelectMenu-closeButton:hover {
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
  }
  .SelectMenu-closeButton:active {
-    color: $text-gray;
+    color: var(--color-text-secondary);
  }
  body:not(.intent-mouse) .SelectMenu-item:focus,
  .SelectMenu-item:hover {
-    background-color: $bg-gray;
+    background-color: var(--color-state-hover-secondary-bg);
  }
  .SelectMenu-item:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-bg-secondary);
  }
  body:not(.intent-mouse) .SelectMenu-tab:focus {
-    // stylelint-disable-next-line primer/colors
+    background-color: var(--color-select-menu-tap-focus-bg);
    background-color: $blue-100;
  }
  .SelectMenu-tab:hover {
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
  }
  .SelectMenu-tab:not([aria-selected="true"]):active {
-    color: $text-gray-dark;
+    color: var(--color-text-primary);
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
  }
 }
@ -454,13 +453,13 @@ $SelectMenu-max-height: 480px !default;
  // Android
  .SelectMenu-item:focus,
  .SelectMenu-item:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-bg-secondary);
  }
  // iOS Safari
  // :active would work if ontouchstart is added to the button
  // Instead this tweaks the "native" highlight color
  .SelectMenu-item {
-    -webkit-tap-highlight-color: rgba($gray-300, 0.5);
+    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
  }
 }
--- a/src/subhead/subhead.scss
+++ b/src/subhead/subhead.scss
@ -3,7 +3,7 @@
  display: flex;
  padding-bottom: $spacer-2;
  margin-bottom: $spacer-3;
-  border-bottom: $border;
+  border-bottom: $border-width $border-style var(--color-border-secondary);
  flex-flow: row wrap;
 }
@ -22,13 +22,13 @@
 // Make the text bold and red for dangerous content
 .Subhead-heading--danger {
  font-weight: $font-weight-bold;
-  color: $text-red;
+  color: var(--color-text-danger);
 }
 // One-liner of supporting text
 .Subhead-description {
  font-size: $body-font-size;
-  color: $text-gray;
+  color: var(--color-text-secondary);
  flex: 1 100%;
 }
--- a/src/support/index.scss
+++ b/src/support/index.scss
@ -1,11 +1,10 @@
 // variables
@import "./variables/typography.scss";
@import "./variables/colors.scss";
@import "./variables/layout.scss";
@import "./variables/misc.scss";
 // mixins
@import "./mixins/color-modes.scss";
@import "./mixins/typography.scss";
@import "./mixins/layout.scss";
@import "./mixins/buttons.scss";
@import "./mixins/misc.scss";
--- a/src/support/mixins/buttons.scss
+++ b/src/support/mixins/buttons.scss
@ -1,172 +0,0 @@
 // TODO: See if the mixins below can be deprecated
 // Might still be needed for .btn-blue
 // ------------------------------------------------------------------
 // Button color generator for primary and themed buttons
 // New button hotness
@mixin btn-solid($color, $bg, $bg2) {
  color: $color;
  background-color: $bg2;
  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
  @if $bg == $gray-000 {
    &:focus,
    &.focus {
      box-shadow: $btn-input-focus-shadow;
    }
    &:hover,
    &.hover {
      background-color: darken($bg2, 3%);
      background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
      background-position: 0 -$em-spacer-5;
      border-color: rgba($black, 0.35);
    }
    &:active,
    &.selected,
    &[aria-selected=true],
    [open] > & {
      background-color: darken(desaturate($bg, 10%), 6%);
      background-image: none;
      border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
      box-shadow: $btn-active-shadow;
    }
    &:disabled,
    &.disabled,
    &[aria-disabled=true] {
      color: rgba($color, 0.4);
      background-color: $bg2;
      background-image: none;
      border-color: $border-color-button;
      box-shadow: none;
    }
  }
  @else {
    &:focus,
    &.focus {
      box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
    }
    &:hover,
    &.hover {
      background-color: darken($bg2, 2%);
      background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
      background-position: 0 -$em-spacer-5;
      border-color: $black-fade-50;
    }
    &:active,
    &.selected,
    &[aria-selected=true],
    [open] > & {
      background-color: darken(mix($bg, $bg2, 50%), 7%);
      background-image: none;
      border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
      box-shadow: $btn-active-shadow;
    }
    &:disabled,
    &.disabled,
    &[aria-disabled=true] {
      color: rgba($color, 0.75);
      background-color: mix($bg2, $white, 50%);
      background-image: none;
      border-color: $border-color-button;
      box-shadow: none;
    }
    .Counter {
      color: darken($bg, 8%);
      background-color: $white;
    }
  }
 }
 // Inverse button hover style
@mixin btn-inverse($color, $bg, $bg2) {
  color: $color;
  background-color: $bg;
  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
  &:focus {
    box-shadow: 0 0 0 0.2em rgba($color, 0.4);
  }
  &:hover {
    color: $text-white;
    background-color: $color;
    background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
    border-color: $black-fade-50;
    .Counter {
      color: $text-white;
    }
  }
  &:active,
  &.selected,
  &[aria-selected=true],
  [open] > & {
    color: $text-white;
    background-color: darken($color, 5%);
    background-image: none;
    border-color: $black-fade-50;
    box-shadow: $btn-active-shadow;
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    color: rgba($color, 0.4);
    background-color: $bg2;
    background-image: none;
    border-color: $border-color-button;
    box-shadow: none;
  }
 }
 // Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
  color: $text-color;
  background-color: $bg-color;
  background-image: none;
  .Counter {
    background-color: rgba($black, 0.07);
  }
  &:hover,
  &:active,
  &.selected,
  &[aria-selected=true],
  [open] > & {
    color: $bg-color;
    background-color: $text-color;
    background-image: none;
    border-color: $text-color;
    .Counter {
      color: $text-color;
      background-color: $bg-color;
    }
  }
  &:focus {
    border-color: $text-color;
    box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
  }
  &:disabled,
  &.disabled,
  &[aria-disabled=true] {
    color: $black-fade-30;
    background-color: $bg-white;
    border-color: $black-fade-15;
    box-shadow: none;
  }
 }
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@ -0,0 +1,100 @@
@mixin color-mode-theme($theme-name, $type, $include-root: false) {
  @if $include-root {
    :root,
    [data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
      @content;
    }
  }
  @else {
    [data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
      @content;
    }
  }
  @media (prefers-color-scheme: light) {
    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
      @content;
    }
  }
  @media (prefers-color-scheme: dark) {
    [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
      @content;
    }
  }
 }
@mixin color-mode($mode) {
  @if $mode == light {
    :root,
    [data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
      @content;
    }
  }
  @else {
    [data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
      @content;
    }
  }
  @media (prefers-color-scheme: light) {
    [data-color-mode="auto"][data-light-theme*="#{$mode}"] {
      @content;
    }
  }
  @media (prefers-color-scheme: dark) {
    [data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
      @content;
    }
  }
 }
 // This mixin takes a map of color mode vars and splits them into dark and light mode
 // The goal is to reduce the amount of dark/light mode selectors compiled
 //
 // Example input for $color-map
 //
 // @include color-variables(("custom-css-variable-1": (
 //     light: var(--color-scale-gray-3),
 //     dark: var(--color-scale-gray-5)
 //   ),
 //   "custom-css-variable-2": (
 //     light: var(--color-scale-gray-2),
 //     dark: var(--color-scale-gray-6)
 //   ),
 //   "custom-css-variable-3": (
 //     light: var(--color-scale-gray-2),
 //     dark: var(--color-scale-gray-6)
 //   )
 // ));
@mixin color-variables($color-map) {
  // Create map to store incoming variables
  $dark-colors: ();
  $light-colors: ();
  @each $name, $value in $color-map {
    @each $type, $color in $value {
      @if $type == dark {
        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
      }
      @else {
        $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
      }
    }
  }
  $mode-colors: (
    dark: $dark-colors,
    light: $light-colors
  );
  // Loop through sorted list
  @each $mode, $variables in $mode-colors {
    @include color-mode($mode) {
      @each $prop, $val in $variables {
        #{$prop}: $val;
      }
    }
  }
 }
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@ -1,29 +1,26 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
+@mixin double-caret($background: var(--color-bg-primary), $border: var(--color-border-primary)) {
  &::after,
  &::before {
    position: absolute;
    top: 11px;
    right: 100%;
-    left: -16px;
+    left: -8px;
    display: block;
-    width: 0;
+    width: 8px;
-    height: 0;
+    height: 16px;
    pointer-events: none;
    content: " ";
-    border-color: transparent;
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    border-style: solid solid outset;
  }
  &::after {
-    margin-top: 1px;
+    margin-left: 1px;
-    margin-left: 2px;
+    background-color: var(--color-bg-primary);
-    border-width: 7px;
+    background-image: linear-gradient($background, $background);
    border-right-color: $foreground;
  }
  &::before {
-    border-width: 8px;
+    background-color: $border;
    border-right-color: $background;
  }
 }
--- a/src/support/variables/color-system.scss
+++ b/src/support/variables/color-system.scss
@ -1,243 +0,0 @@
 // Black based on same hue as $gray-900
 $black: #1b1f23 !default;
 $white: #fff !default;
 //
 //
 // -------- Grays --------
 $gray-000:        #fafbfc !default;
 $gray-100:        #f6f8fa !default;
 $gray-200:        #e1e4e8 !default;
 $gray-300:        #d1d5da !default;
 $gray-400:        #959da5 !default;
 $gray-500:        #6a737d !default;
 $gray-600:        #586069 !default;
 $gray-700:        #444d56 !default;
 $gray-800:        #2f363d !default;
 $gray-900:        #24292e !default; // body font color
 // -------- Blue --------
 $blue-000:        #f1f8ff !default;
 $blue-100:        #dbedff !default;
 $blue-200:        #c8e1ff !default;
 $blue-300:        #79b8ff !default;
 $blue-400:        #2188ff !default;
 $blue-500:        #0366d6 !default; // Default: Passes AA with #fff
 $blue-600:        #005cc5 !default;
 $blue-700:        #044289 !default;
 $blue-800:        #032f62 !default;
 $blue-900:        #05264c !default; // Passes with 1/2/300 blues
 // -------- Green --------
 $green-000:       #f0fff4 !default;
 $green-100:       #dcffe4 !default;
 $green-200:       #bef5cb !default;
 $green-300:       #85e89d !default;
 $green-400:       #34d058 !default;
 $green-500:       #28a745 !default; // Default. passes AA Large
 $green-600:       #22863a !default; // Text green, passes AA on #fff
 $green-700:       #176f2c !default;
 $green-800:       #165c26 !default;
 $green-900:       #144620 !default;
 // -------- Yellow --------
 $yellow-000:      #fffdef !default;
 $yellow-100:      #fffbdd !default;
 $yellow-200:      #fff5b1 !default;
 $yellow-300:      #ffea7f !default;
 $yellow-400:      #ffdf5d !default;
 $yellow-500:      #ffd33d !default;
 $yellow-600:      #f9c513 !default;
 $yellow-700:      #dbab09 !default;
 $yellow-800:      #b08800 !default;
 $yellow-900:      #735c0f !default;
 // -------- Orange --------
 $orange-000:      #fff8f2 !default;
 $orange-100:      #ffebda !default;
 $orange-200:      #ffd1ac !default;
 $orange-300:      #ffab70 !default;
 $orange-400:      #fb8532 !default;
 $orange-500:      #f66a0a !default; // Default. passes AA Large with #fff
 $orange-600:      #e36209 !default;
 $orange-700:      #d15704 !default;
 $orange-800:      #c24e00 !default;
 $orange-900:      #a04100 !default;
 // -------- Red --------
 $red-000:         #ffeef0 !default;
 $red-100:         #ffdce0 !default;
 $red-200:         #fdaeb7 !default;
 $red-300:         #f97583 !default;
 $red-400:         #ea4a5a !default;
 $red-500:         #d73a49 !default; // Default. passes AA
 $red-600:         #cb2431 !default;
 $red-700:         #b31d28 !default;
 $red-800:         #9e1c23 !default;
 $red-900:         #86181d !default;
 // -------- Purple --------
 $purple-000:      #f5f0ff !default;
 $purple-100:      #e6dcfd !default;
 $purple-200:      #d1bcf9 !default;
 $purple-300:      #b392f0 !default;
 $purple-400:      #8a63d2 !default;
 $purple-500:      #6f42c1 !default; // passes AA with #fff
 $purple-600:      #5a32a3 !default;
 $purple-700:      #4c2889 !default;
 $purple-800:      #3a1d6e !default;
 $purple-900:      #29134e !default;
 // -------- Pink --------
 $pink-000:      #ffeef8 !default;
 $pink-100:      #fedbf0 !default;
 $pink-200:      #f9b3dd !default;
 $pink-300:      #f692ce !default;
 $pink-400:      #ec6cb9 !default;
 $pink-500:      #ea4aaa !default;
 $pink-600:      #d03592 !default;
 $pink-700:      #b93a86 !default;
 $pink-800:      #99306f !default;
 $pink-900:      #6d224f !default;
 // -------- Fades --------
 $black-fade-15:      rgba($black, 0.15) !default;
 $black-fade-30:      rgba($black, 0.3) !default;
 $black-fade-50:      rgba($black, 0.5) !default;
 $black-fade-70:      rgba($black, 0.7) !default;
 $black-fade-85:      rgba($black, 0.85) !default;
 $white-fade-15:      rgba($white, 0.15) !default;
 $white-fade-30:      rgba($white, 0.3) !default;
 $white-fade-50:      rgba($white, 0.5) !default;
 $white-fade-70:      rgba($white, 0.7) !default;
 $white-fade-85:      rgba($white, 0.85) !default;
 // -------- Color defaults --------
 $red:         $red-500 !default;
 $purple:      $purple-500 !default;
 $blue:        $blue-500 !default;
 $green:       $green-500 !default;
 $yellow:      $yellow-500 !default;
 $orange:      $orange-500 !default;
 $gray-dark:   $gray-900 !default;
 $gray-light:  $gray-400 !default;
 $gray:        $gray-500 !default;
 // -------- Color gradient maps --------
 $grays: (
  0: $gray-000,
  1: $gray-100,
  2: $gray-200,
  3: $gray-300,
  4: $gray-400,
  5: $gray-500,
  6: $gray-600,
  7: $gray-700,
  8: $gray-800,
  9: $gray-900,
 ) !default;
 $blues: (
  0: $blue-000,
  1: $blue-100,
  2: $blue-200,
  3: $blue-300,
  4: $blue-400,
  5: $blue-500,
  6: $blue-600,
  7: $blue-700,
  8: $blue-800,
  9: $blue-900,
 ) !default;
 $greens: (
  0: $green-000,
  1: $green-100,
  2: $green-200,
  3: $green-300,
  4: $green-400,
  5: $green-500,
  6: $green-600,
  7: $green-700,
  8: $green-800,
  9: $green-900,
 ) !default;
 $yellows: (
  0: $yellow-000,
  1: $yellow-100,
  2: $yellow-200,
  3: $yellow-300,
  4: $yellow-400,
  5: $yellow-500,
  6: $yellow-600,
  7: $yellow-700,
  8: $yellow-800,
  9: $yellow-900,
 ) !default;
 $oranges: (
  0: $orange-000,
  1: $orange-100,
  2: $orange-200,
  3: $orange-300,
  4: $orange-400,
  5: $orange-500,
  6: $orange-600,
  7: $orange-700,
  8: $orange-800,
  9: $orange-900,
 ) !default;
 $reds: (
  0: $red-000,
  1: $red-100,
  2: $red-200,
  3: $red-300,
  4: $red-400,
  5: $red-500,
  6: $red-600,
  7: $red-700,
  8: $red-800,
  9: $red-900,
 ) !default;
 $purples: (
  0: $purple-000,
  1: $purple-100,
  2: $purple-200,
  3: $purple-300,
  4: $purple-400,
  5: $purple-500,
  6: $purple-600,
  7: $purple-700,
  8: $purple-800,
  9: $purple-900,
 ) !default;
 $pinks: (
  0: $pink-000,
  1: $pink-100,
  2: $pink-200,
  3: $pink-300,
  4: $pink-400,
  5: $pink-500,
  6: $pink-600,
  7: $pink-700,
  8: $pink-800,
  9: $pink-900,
 ) !default;
 $hue-maps: (
  "gray": $grays,
  "blue": $blues,
  "green": $greens,
  "yellow": $yellows,
  "orange": $oranges,
  "red": $reds,
  "purple": $purples,
  "pink": $pinks,
 ) !default;
--- a/src/support/variables/colors.scss
+++ b/src/support/variables/colors.scss
@ -1,55 +0,0 @@
@import "color-system.scss";
 // Color variables
 // Border colors
 $border-white:       $white !default;
 $border-black-fade:  $black-fade-15 !default;
 $border-white-fade:  $white-fade-15 !default;
 $border-gray-dark:   $gray-300 !default;
 $border-gray-darker: $gray-700 !default;
 $border-gray-light:  lighten($gray-200, 3%) !default;
 $border-gray:        $gray-200 !default;
 $border-blue:        $blue-500 !default;
 $border-blue-light:  $blue-200 !default;
 $border-green:       $green-400 !default;
 $border-green-light: desaturate($green-300, 40%) !default;
 $border-purple:      $purple !default;
 $border-red:         $red !default;
 $border-red-light:   $red-300 !default;
 $border-yellow:      $yellow-600 !default;
 // Background colors
 $bg-white:          $white !default;
 $bg-black:          $black !default;
 $bg-black-fade:     $black-fade-50 !default;
 $bg-blue-light:     $blue-000 !default;
 $bg-blue:           $blue-500 !default;
 $bg-gray-dark:      $gray-900 !default;
 $bg-gray-light:     $gray-000 !default;
 $bg-gray:           $gray-100 !default;
 $bg-green:          $green-500 !default;
 $bg-green-light:    $green-100 !default;
 $bg-orange:         $orange-700 !default;
 $bg-purple:         $purple-500 !default;
 $bg-purple-light:   $purple-000 !default;
 $bg-pink:           $pink-500 !default;
 $bg-red:            $red-500 !default;
 $bg-red-light:      $red-000 !default;
 $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
 $bg-yellow-dark:    $yellow-700 !default;
 // Text colors
 $text-black:        $black !default;
 $text-white:        $white !default;
 $text-blue:         $blue-500 !default;
 $text-gray-dark:    $gray-900 !default;
 $text-gray-light:   $gray-500 !default;
 $text-gray:         $gray-600 !default;
 $text-green:        $green-600 !default;
 $text-orange:       $orange-900 !default;
 $text-orange-light: $orange-600 !default;
 $text-purple:       $purple !default;
 $text-pink:         $pink-500 !default;
 $text-red:          $red-600 !default;
 $text-yellow:       $yellow-800 !default;
--- a/Show More
+++ b/Show More