Merge branch 'main' into tobiasahlin/add-medium-to-mktg-typescale

.changeset/proud-lions-bake.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Documentation: Remove deprecated faded borders documentation

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 bg-yellow" href="#small">
-  <!-- <%= octicon "zap",  class: "CircleBadge-icon text-white" %> -->
-  <svg class="CircleBadge-icon text-white 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-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>
 ```
 
 ### Medium
 
 ```html live
-<div class="CircleBadge CircleBadge--medium bg-gray-dark">
+<div class="CircleBadge CircleBadge--medium color-bg-tertiary">
   <img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
 </div>
 ```

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 text-gray-light">
+      <div class="text-small color-text-tertiary">
         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 text-gray-light">
+      <div class="text-small color-text-tertiary">
         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 text-gray-light">
+      <div class="text-small color-text-tertiary">
         Description
       </div>
     </div>
@@ -510,7 +510,7 @@ Using flexbox along with form, button, and link styles, you can create more comp
         Check it
       </label>
     </form>
-    <button class="btn-link select-menu-button muted-link">
+    <button class="btn-link select-menu-button Link--muted">
       Select menu
     </button>
   </div>

docs/content/components/dropdown.md

@@ -37,7 +37,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="text-gray p-2 d-inline" aria-haspopup="true">
+    <summary class="color-text-secondary p-2 d-inline" aria-haspopup="true">
       Dropdown
       <div class="dropdown-caret"></div>
     </summary>

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 text-gray pl-2">hours per week</span>
+        <span class="text-small color-text-secondary pl-2">hours per week</span>
       </span>
     </label>
   </div>

docs/content/components/labels.md

@@ -81,7 +81,7 @@ Issue labels are used for adding labels to issues and pull requests. They also c
 <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-gray-dark mr-1">🚂 deploy: train</span>
+<span class="IssueLabel color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
 ```
 
 If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
@@ -90,7 +90,7 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
 <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-gray-dark mr-1">🚂 deploy: train</span>
+<span class="IssueLabel IssueLabel--big color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
 ```
 
 ## States
@@ -180,9 +180,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 bg-green text-white">22</span>
-<span class="Counter mr-1 bg-red text-white">22</span>
-<span class="Counter mr-1 bg-purple text-white">22</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>
 ```
 
 ## Diffstat
@@ -196,12 +196,12 @@ Diffstats show how many deletions or additions a diff has. It's typically a row
 </span>
 ```
 
-Use the `text-green` and `text-red` utilities to add additional information about the size of the diff.
+Use the `color-text-success` and `color-text-danger` utilities to add additional information about the size of the diff.
 
 ```html live
 <span class="diffstat">
-    <span class="text-green">+7</span>
-    <span class="text-red">−2</span>
+    <span class="color-text-success">+7</span>
+    <span class="color-text-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>

docs/content/components/loaders.md

@@ -21,6 +21,6 @@ It can also be used in combination with other components.
 ```html live
 <h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
 <span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
-<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
 <button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
 ```

docs/content/components/navigation.md

@@ -256,7 +256,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
     </svg>
   </a>
   <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
-    With a label <span class="Label bg-blue">label</span>
+    With a label <span class="Label">label</span>
   </a>
   <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
     With a counter <span class="Counter ml-1">16</span>
@@ -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="bg-gray-light border p-3" style="max-width: 360px">
-  <h5 class="text-gray mb-2 pb-1 border-bottom">Menu</h5>
+<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>
   <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 bg-white border-top py-3" style="padding-left: 44px">
+  <nav class="SideNav color-bg-primary 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>

docs/content/components/progress.md

@@ -39,7 +39,7 @@ 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 text-gray mr-2">4 of 16</span>
+<span class="text-small color-text-secondary 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>

docs/content/components/select-menu.md

@@ -214,9 +214,9 @@ The list of items is arguably the most important subcomponent within the menu. B
             <path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
           </svg>
         </button>
-        <button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label bg-blue">label</span></button>
+        <button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label">label</span></button>
         <button class="SelectMenu-item" role="menuitem">
-          With a counter <span class="Counter bg-gray-2 ml-1">16</span>
+          With a counter <span class="Counter ml-1">16</span>
         </button>
         <button class="SelectMenu-item d-block" role="menuitem">
           <h5>With a heading</h5>
@@ -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 bg-red-0 text-red">Message goes here</div>
+        <div class="SelectMenu-message color-bg-danger color-text-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 text-gray">We didn’t find any matching repositories that you can commit to.</p>
+          <p class="mb-3 color-text-secondary">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>

docs/content/components/timeline.md

@@ -17,9 +17,9 @@ The `TimelineItem` component is used to display items on a vertical timeline, co
   </div>
 
   <div class="TimelineItem-body">
-    <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
-    <a href="#" class="text-bold link-gray-dark">hot potato</a>
-    <a href="#" class="link-gray">Just now</a>
+    <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
+    <a href="#" class="text-bold Link--primary">hot potato</a>
+    <a href="#" class="Link--secondary">Just now</a>
   </div>
 </div>
 ```
@@ -49,7 +49,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
 ```html live
 <!-- Colorful TimelineItem Badge -->
 <div class="TimelineItem">
-  <div class="TimelineItem-badge bg-red text-white">
+  <div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
@@ -59,7 +59,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
   </div>
 </div>
 <div class="TimelineItem">
-  <div class="TimelineItem-badge bg-green text-white">
+  <div class="TimelineItem-badge color-bg-success-inverse color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
@@ -68,18 +68,19 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
     Green background when opened or passed events occur
   </div>
 </div>
-<div class="TimelineItem">
-  <div class="TimelineItem-badge bg-purple text-white">
+<!-- TODO: Replace bg-purple in V2
+  <div class="TimelineItem">
+  <div class="TimelineItem-badge bg-purple color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
   </div>
   <div class="TimelineItem-body">
     Purple background used when pull requests are merged
   </div>
-</div>
+</div> -->
 <div class="TimelineItem">
-  <div class="TimelineItem-badge bg-blue text-white">
+  <div class="TimelineItem-badge color-bg-info-inverse color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
@@ -135,9 +136,9 @@ Sometimes you want to give ownership to an event by displaying an [Avatar]() of
     </div>
 
     <div class="TimelineItem-body">
-      <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
-      <a href="#" class="text-bold link-gray-dark">hot potato</a>
-      <a href="#" class="link-gray">Just now</a>
+      <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
+      <a href="#" class="text-bold Link--primary">hot potato</a>
+      <a href="#" class="Link--secondary">Just now</a>
     </div>
   </div>
 </div>
@@ -149,7 +150,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
 
 ```html live
 <div class="TimelineItem">
-  <div class="TimelineItem-badge bg-red text-white">
+  <div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
@@ -160,7 +161,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
 </div>
 <div class="TimelineItem-break ml-0"></div>
 <div class="TimelineItem">
-  <div class="TimelineItem-badge bg-green text-white">
+  <div class="TimelineItem-badge color-bg-success-inverse color-text-white">
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
     </svg>
@@ -181,9 +182,9 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
   </a>
 
   <div class="TimelineItem-body">
-    <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
-    <a href="#" class="text-bold link-gray-dark">hot potato</a>
-    <a href="#1" class="link-gray">Just now</a>
+    <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
+    <a href="#" class="text-bold Link--primary">hot potato</a>
+    <a href="#1" class="Link--secondary">Just now</a>
   </div>
 </div>
 ```