Colors V2 docs (#1603)

* Add v18 migration guide * Update colors.mdx * Move theming to support * Delete color-system.mdx * Update nav.yml * Fix color imports in the docs * Create small-papayas-prove.md * Update theming.md * Update colors.mdx * Replace V1 with V2 classes * More docs updates
primer · Sep 17, 2021 · 21c5ebc · 21c5ebc
1 parent 53e78d1
commit 21c5ebc
Show file tree

Hide file tree

Showing 33 changed files with 641 additions and 875 deletions.
diff --git a/.changeset/small-papayas-prove.md b/.changeset/small-papayas-prove.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Update docs with V2 colors
diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md
@@ -210,16 +210,16 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
 <a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
   <img src="https://github.com/travis-ci.png"  class="CircleBadge-icon" alt="">
 </a>
-<a class="CircleBadge CircleBadge--small color-bg-warning-inverse" href="#small">
-  <!-- <%= octicon "zap",  class: "CircleBadge-icon color-text-primary" %> -->
-  <svg class="CircleBadge-icon color-text-primary octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
+<a class="CircleBadge CircleBadge--small color-bg-done-muted" href="#small">
+  <!-- <%= octicon "zap",  class: "CircleBadge-icon color-fg-default" %> -->
+  <svg class="CircleBadge-icon color-fg-default octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
 </a>
 ```
 
 ### Medium
 
 ```html live
-<div class="CircleBadge CircleBadge--medium color-bg-tertiary">
+<div class="CircleBadge CircleBadge--medium color-bg-subtle">
   <img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
 </div>
 ```

diff --git a/docs/content/components/box.md b/docs/content/components/box.md
@@ -472,7 +472,7 @@ A similar approach can be used for buttons with multiple lines of text within a
   <div class="Box-row d-flex flex-items-center">
     <div class="flex-auto">
       <strong>Row title</strong>
-      <div class="text-small color-text-tertiary">
+      <div class="text-small color-fg-subtle">
         Description
       </div>
     </div>
@@ -481,7 +481,7 @@ A similar approach can be used for buttons with multiple lines of text within a
   <div class="Box-row d-flex flex-items-center">
     <div class="flex-auto">
       <strong>Row title</strong>
-      <div class="text-small color-text-tertiary">
+      <div class="text-small color-fg-subtle">
         Description
       </div>
     </div>
@@ -490,7 +490,7 @@ A similar approach can be used for buttons with multiple lines of text within a
   <div class="Box-row d-flex flex-items-center">
     <div class="flex-auto">
       <strong>Row title</strong>
-      <div class="text-small color-text-tertiary">
+      <div class="text-small color-fg-subtle">
         Description
       </div>
     </div>

diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
@@ -5,9 +5,6 @@ status: Stable
 source: 'https://github.com/primer/css/tree/main/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.
 

diff --git a/docs/content/components/dropdown.md b/docs/content/components/dropdown.md
@@ -3,10 +3,6 @@ title: Dropdown
 status: Beta
 ---
 
-<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
@@ -37,7 +33,7 @@ Using a button customized with additional utilities:
 ```html live
 <div style="margin-bottom: 100px">
   <details class="dropdown details-reset details-overlay d-inline-block">
-    <summary class="color-text-secondary p-2 d-inline" aria-haspopup="true">
+    <summary class="color-fg-muted p-2 d-inline" aria-haspopup="true">
       Dropdown
       <div class="dropdown-caret"></div>
     </summary>

diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
@@ -369,7 +369,7 @@ Content that is hidden by default should only be done so if it is non-essential
       <span class="form-checkbox-details text-normal">
         <span class="d-block mb-1">Available hours per week</span>
         <input type="text" name="" class="form-control input-contrast" size="3" />
-        <span class="text-small color-text-secondary pl-2">hours per week</span>
+        <span class="text-small color-fg-muted pl-2">hours per week</span>
       </span>
     </label>
   </div>

diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
@@ -7,10 +7,6 @@ source: 'https://github.com/primer/css/tree/main/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
@@ -78,19 +74,19 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele
 Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
 
 ```html live
-<span class="IssueLabel color-bg-info-inverse color-text-white mr-1">Primer</span>
-<span class="IssueLabel color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
-<span class="IssueLabel color-bg-success-inverse color-text-white mr-1">help wanted</span>
-<span class="IssueLabel color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
+<span class="IssueLabel color-bg-accent-emphasis color-fg-on-emphasis mr-1">Primer</span>
+<span class="IssueLabel color-bg-danger-emphasis color-fg-on-emphasis mr-1">bug 🐛</span>
+<span class="IssueLabel color-bg-success-emphasis color-fg-on-emphasis mr-1">help wanted</span>
+<span class="IssueLabel color-bg-attention-emphasis color-fg-on-emphasis mr-1">🚂 deploy: train</span>
 ```
 
 If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
 
 ```html live
-<span class="IssueLabel IssueLabel--big color-bg-info-inverse color-text-white mr-1">Primer</span>
-<span class="IssueLabel IssueLabel--big color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
-<span class="IssueLabel IssueLabel--big color-bg-success-inverse color-text-white mr-1">help wanted</span>
-<span class="IssueLabel IssueLabel--big color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
+<span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">Primer</span>
+<span class="IssueLabel IssueLabel--big color-bg-danger-emphasis color-fg-on-emphasis mr-1">bug 🐛</span>
+<span class="IssueLabel IssueLabel--big color-bg-success-emphasis color-fg-on-emphasis mr-1">help wanted</span>
+<span class="IssueLabel IssueLabel--big color-bg-attention-emphasis color-fg-on-emphasis mr-1">🚂 deploy: train</span>
 ```
 
 ## States
@@ -180,9 +176,9 @@ You can also have icons and emoji in counters. Or use utilities for counters wit
   10
 </span>
 <span class="Counter mr-1">👍 2</span>
-<span class="Counter mr-1 color-bg-success-inverse color-text-white">22</span>
-<span class="Counter mr-1 color-bg-danger-inverse color-text-white">22</span>
-<span class="Counter mr-1 color-bg-info-inverse color-text-white">22</span>
+<span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis">22</span>
+<span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis">22</span>
+<span class="Counter mr-1 color-bg-accent-emphasis color-fg-on-emphasis">22</span>
 ```
 
 ## Diffstat
@@ -196,12 +192,12 @@ Diffstats show how many deletions or additions a diff has. It's typically a row
 </span>
 ```
 
-Use the `color-text-success` and `color-text-danger` utilities to add additional information about the size of the diff.
+Use the `color-fg-success` and `color-fg-danger` utilities to add additional information about the size of the diff.
 
 ```html live
 <span class="diffstat">
-    <span class="color-text-success">+7</span>
-    <span class="color-text-danger">−2</span>
+    <span class="color-fg-success">+7</span>
+    <span class="color-fg-danger">−2</span>
     <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
       <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
     </span>

diff --git a/docs/content/components/layout.md b/docs/content/components/layout.md
@@ -76,7 +76,7 @@ Flowing as row:
 <div class="Layout">
   <div class="Layout-main border">
     <div class="Layout-main-centered-md">
-      <div class="container-md border color-border-info">
+      <div class="container-md border color-border-accent">
         centered md
       </div>
     </div>
@@ -86,7 +86,7 @@ Flowing as row:
 <div class="Layout">
   <div class="Layout-main border">
     <div class="Layout-main-centered-lg">
-      <div class="container-lg border color-border-info">
+      <div class="container-lg border color-border-accent">
         centered lg
       </div>
     </div>
@@ -96,7 +96,7 @@ Flowing as row:
 <div class="Layout">
   <div class="Layout-main border">
     <div class="Layout-main-centered-xl">
-      <div class="container-xl border color-border-info">
+      <div class="container-xl border color-border-accent">
         centered xl
       </div>
     </div>

diff --git a/docs/content/components/links.md b/docs/content/components/links.md
@@ -6,10 +6,6 @@ source: 'https://github.com/primer/css/tree/main/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. So in most cases the `.Link` class is not really needed.
 
 ```html live
@@ -24,7 +20,7 @@ If you like to override the default link styles you can do so with the following
 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>
+<p class="color-fg-muted">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
 ```
 
 ## Secondary link
@@ -49,7 +45,7 @@ Use `.Link--muted` also removes the underline on hover. Tip: You can also use th
 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 class="color-fg-muted no-underline" href="#url">
   A link with a partial <span class="Link--onHover">Link--onHover</span>
 </a>
 ```
@@ -59,7 +55,7 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove
 The `.Link` class can be nested inside an `<a>` element if only part of it should be styled like a link.
 
 ```html live
-<a class="color-text-primary no-underline" href="#url">
+<a class="color-fg-default no-underline" href="#url">
   A nested <span class="Link">Link</span>
 </a>
 ```
@@ -70,8 +66,8 @@ Link classes in combination with [color utilities](../utilities/colors) lets you
 
 ```html live
 <a class="Link--primary text-bold" href="#url">
-  <svg class="octicon octicon-flame color-text-danger" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
+  <svg class="octicon octicon-flame color-fg-danger" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
   Hot
-  <span class="color-text-secondary">potato</span>
+  <span class="color-fg-muted">potato</span>
 </a>
 ```
diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md
@@ -271,8 +271,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class
 The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
 
 ```html live
-<aside class="color-bg-secondary border p-3" style="max-width: 360px">
-  <h5 class="color-text-secondary mb-2 pb-1 border-bottom">Menu</h5>
+<aside class="color-bg-subtle border p-3" style="max-width: 360px">
+  <h5 class="color-fg-muted mb-2 pb-1 border-bottom">Menu</h5>
   <nav class="SideNav">
     <a class="SideNav-subItem" href="#url">Account</a>
     <a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
@@ -296,7 +296,7 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
     <svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16"  aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
     <span>Profile</span>
   </a>
-  <nav class="SideNav color-bg-primary border-top py-3" style="padding-left: 44px">
+  <nav class="SideNav color-bg-default border-top py-3" style="padding-left: 44px">
     <a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
     <a class="SideNav-subItem" href="#url">Sub item 2</a>
     <a class="SideNav-subItem" href="#url">Sub item 3</a>

diff --git 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 color-bg-success-inverse" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-emphasis" 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 color-bg-success-inverse" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-emphasis" 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 color-bg-success-inverse" style="width: 50%;"></span>
+  <span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
 </span>
 ```
 
@@ -39,9 +39,9 @@ Small progress bars are shorter than the default.
 For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
 
 ```html live
-<span class="text-small color-text-secondary mr-2">4 of 16</span>
+<span class="text-small color-fg-muted mr-2">4 of 16</span>
 <span class="Progress d-inline-flex" style="width: 160px">
-  <span class="Progress-item color-bg-success-inverse" style="width: 25%"></span>
+  <span class="Progress-item color-bg-success-emphasis" style="width: 25%"></span>
 </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 color-bg-success-inverse" style="width: 80%;"></span>
+    <span class="Progress-item color-bg-success-emphasis" style="width: 80%;"></span>
   </span>
 </div>
 ```
@@ -64,10 +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 color-bg-success-inverse" style="width: 50%;"></span>
-    <span class="Progress-item color-bg-warning-inverse" style="width: 25%;"></span>
-    <span class="Progress-item color-bg-danger-inverse" style="width: 15%;"></span>
-    <span class="Progress-item color-bg-info-inverse" style="width: 10%;"></span>
+    <span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
+    <span class="Progress-item color-bg-attention-emphasis" style="width: 25%;"></span>
+    <span class="Progress-item color-bg-danger-emphasis" style="width: 15%;"></span>
+    <span class="Progress-item color-bg-accent-emphasis" style="width: 10%;"></span>
   </span>
 </div>
 ```
diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md
@@ -457,7 +457,7 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
         </button>
       </header>
       <div class="SelectMenu-list">
-        <div class="SelectMenu-message color-bg-danger color-text-danger">Message goes here</div>
+        <div class="SelectMenu-message color-bg-danger-subtle color-fg-danger">Message goes here</div>
         <button class="SelectMenu-item" role="menuitem">Item 1</button>
         <button class="SelectMenu-item" role="menuitem">Item 2</button>
         <button class="SelectMenu-item" role="menuitem">Item 3</button>
@@ -567,7 +567,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
             />
           </svg>
           <h4 class="my-2">No repositories</h4>
-          <p class="mb-3 color-text-secondary">We didn’t find any matching repositories that you can commit to.</p>
+          <p class="mb-3 color-fg-muted">We didn’t find any matching repositories that you can commit to.</p>
           <button type="button" class="btn btn-sm btn-primary">Create a repository</button>
         </div>
       </div>