Merge pull request #1056 from primer/users/yaili/css-docs-tweaks

Small text updates in docs

Author: simurai

docs/content/components/avatars.md

@@ -183,7 +183,7 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
 </div>
 ```
 
-## Circle Badge
+## Circle badge
 
 `.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.
 

docs/content/components/boxed-groups.md

@@ -1,5 +1,5 @@
 ---
-title: Boxed groups
+title: Boxed groups (deprecated)
 path: components/boxed-group
 status: Deprecated
 source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/boxed-groups.scss'

docs/content/components/buttons.md

@@ -57,7 +57,7 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
 
 Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
 
-[Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) 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.
+[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>

docs/content/components/loaders.md

@@ -8,7 +8,7 @@ bundle: loaders
 
 Loaders inform users that an action is still in progress and might take a while to complete.
 
-## Animated Ellipsis
+## Animated ellipsis
 
 Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
 

docs/content/components/progress.md

@@ -6,15 +6,15 @@ source: 'https://github.com/primer/css/tree/master/src/progress'
 bundle: progress
 ---
 
-Use Progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
+Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
 
 ```html live
 <span class="Progress">
   <span class="bg-green" style="width: 50%;"></span>
 </span>
 ```
 
-## Large Progress
+## Large progress
 
 Large progress bars are slightly taller than the default.
 
@@ -24,7 +24,7 @@ Large progress bars are slightly taller than the default.
 </span>
 ```
 
-## Small Progress
+## Small progress
 
 Large progress bars are shorter than the default.
 
@@ -34,7 +34,7 @@ Large progress bars are shorter than the default.
 </span>
 ```
 
-## Inline Progress
+## Inline progress
 
 For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
 

docs/content/components/select-menu.md

@@ -1,5 +1,5 @@
 ---
-title: Select Menu
+title: Select menu
 status: New
 source: 'https://github.com/primer/css/tree/master/src/select-menu'
 bundle: select-menu
@@ -9,7 +9,7 @@ The `SelectMenu` component provides advanced support for navigation, filtering,
 
 ## Basic example
 
-Use a `<details>` element to toggle the Select Menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
+Use a `<details>` element to toggle the select menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
 
 ```html live
 <details class="details-reset details-overlay" open>
@@ -47,7 +47,7 @@ Add a `.SelectMenu-header` to house a clear title and a close button. Note that
 
 ## Right aligned
 
-In case the Select Menu should be aligned to the right, use `SelectMenu right-0`.
+In case the select menu should be aligned to the right, use `SelectMenu right-0`.
 
 ```html live
 <div class="d-flex flex-justify-end position-relative">
@@ -217,7 +217,7 @@ The list of items is arguably the most important subcomponent within the menu. B
 
 ## Divider
 
-The Select Menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
+The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
 
 ```html live
 <details class="details-reset details-overlay" open>
@@ -294,7 +294,7 @@ Use a `.SelectMenu-footer` at the bottom for additional information. As a side e
 
 ## Filter
 
-If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
+If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the select menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
 
 ```html live
 <details class="details-reset details-overlay" open>
@@ -351,7 +351,7 @@ If the list is expected to get long, consider adding a `.SelectMenu-filter` inpu
 
 ## Tabs
 
-Sometimes you need two or more lists of items in your Select Menu, e.g. branches and tags. Select Menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
+Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
 
 ```html live
 <details class="details-reset details-overlay" open>
@@ -491,7 +491,7 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
 
 ## Blankslate
 
-Sometimes a Select Menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
+Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
 
 ```html live
 <details class="details-reset details-overlay" open>

docs/content/support/typography.md

@@ -7,7 +7,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/typogra
 bundle: support
 ---
 
-## Type Scale
+## Type scale
 
 The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
 
@@ -65,7 +65,7 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 ```
 
-## Typography Mixins
+## Typography mixins
 
 Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/utilities/typography#heading-utilities). which requires no additional CSS.
 

docs/content/utilities/animations.md

@@ -11,7 +11,7 @@ Animations are reusable animation classes that you can use to emphasize an eleme
 
 
 
-## Fade In
+## Fade in
 
 The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
 
@@ -23,7 +23,7 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r
 </span>
 ```
 
-## Fade Out
+## Fade out
 
 The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
 
@@ -35,7 +35,7 @@ The `.anim-fade-out` class is used to fade out an element on the page. This will
 </span>
 ```
 
-## Fade Up
+## Fade up
 
 The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
 
@@ -47,7 +47,7 @@ The `.anim-fade-up` class is used to reveal an element on the page by sliding it
 </div>
 ```
 
-## Fade Down
+## Fade down
 
 The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
 
@@ -59,7 +59,7 @@ The `.anim-fade-down` class is used to slide an element down hiding it. You shou
 </div>
 ```
 
-## Scale In
+## Scale in
 
 The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
 
@@ -70,7 +70,7 @@ The `.anim-scale-in` class will scale the element in. This is useful on menus wh
 </div>
 ```
 
-## Grow X
+## Grow x
 
 The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
 

docs/content/utilities/borders.mdx

@@ -10,7 +10,7 @@ bundle: utilities
 import {palettes, borders} from '../../src/color-variables'
 import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
 
-Utilities for borders, border radius, and box shadows.
+Utilities for borders, and border radius.
 
 ## Default border
 

docs/content/utilities/box-shadow.md

@@ -96,7 +96,7 @@ These shadows are used for marketing content, UI screenshots, and content that a
 </div>
 ```
 
-## Extra Large
+## Extra large
 
 Extra large box shadows are even more diffused.
 

docs/content/utilities/marketing-borders.md

@@ -1,5 +1,5 @@
 ---
-title: Marketing Borders
+title: Marketing borders (deprecated)
 sort_title: Borders Marketing
 path: utilities/marketing-borders
 status: Deprecated

docs/content/utilities/typography.md

@@ -145,7 +145,7 @@ Remove bullets from an unordered list or numbers from an ordered list by applyin
 </ul>
 ```
 
-## Text Shadows
+## Text shadows
 
 Text shadows can be used to help readability and to add some depth on colored backgrounds.
 

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

@@ -25,7 +25,7 @@
       url: /utilities/animations
     - title: Borders
       url: /utilities/borders
-    - title: Marketing borders
+    - title: Marketing borders (deprecated)
       url: /utilities/marketing-borders
     - title: Box shadow
       url: /utilities/box-shadow
@@ -75,7 +75,7 @@
       url: /components/box-overlay
     - title: Box
       url: /components/box
-    - title: Boxed groups
+    - title: Boxed groups (deprecated)
       url: /components/boxed-groups
     - title: Branch name
       url: /components/branch-name