Spelling (#1981)

Signed-off-by: Josh Soref <jsoref@users.noreply.github.com>

Co-authored-by: Josh Soref <jsoref@users.noreply.github.com>

CHANGELOG.md

@@ -317,7 +317,7 @@
 
 ### Patch Changes
 
-- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecyle milestones for statuses.
+- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses.
 
 * [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module
 

docs/content/components/blankslate.md

@@ -112,7 +112,7 @@ Add an additional optional class to the `.blankslate` to change its appearance.
 
 ### Add border
 
-To add a border, wrap the blankstate component with the [Box component](/components/box).
+To add a border, wrap the blankslate component with the [Box component](/components/box).
 
 ```html live
 <div class="Box">

docs/content/components/box.md

@@ -96,7 +96,7 @@ Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
 
 ### Box row markup structure
 
-Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
+Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
 
 Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `<div>` for your rows, you may want to place your rows inside a parent `<div>` so that the first and last rows are styled appropriately.
 

docs/content/components/buttons.md

@@ -88,7 +88,7 @@ Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 
 ### 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.
+Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrease 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.
 

docs/content/components/markdown.md

@@ -457,7 +457,7 @@ Inline code inside table cells should still be distinguishable.
 
 | Language    | Code               |
 |-------------|--------------------|
-| Javascript  | `var foo = "bar";` |
+| JavaScript  | `var foo = "bar";` |
 | Ruby        | `foo = "bar"`      |
 
 ----------------

docs/content/components/pagination.md

@@ -29,7 +29,7 @@ To do this, add anchor links to the `pagination` element. Previous and Next butt
 
 As always, make sure to include the appropriate `aria` attributes to make the element accessible.
 
-- Add `aria-label="Pagination"` to the the `paginate-container` element.
+- Add `aria-label="Pagination"` to the `paginate-container` element.
 - Add `aria-label="Page X"` to each anchor link.
 
 ```html live

docs/content/getting-started/index.md

@@ -115,7 +115,7 @@ sass:
   implementation: sass-embedded
 ```
 
-Since Github pages is currently [locked to version `1.5.2` of `jekyll-sass-converter`](https://pages.github.com/versions/). If you run into errors you should look into [using the built CSS](#using-primer-css-on-a-static-site).
+Since GitHub pages is currently [locked to version `1.5.2` of `jekyll-sass-converter`](https://pages.github.com/versions/). If you run into errors you should look into [using the built CSS](#using-primer-css-on-a-static-site).
 
 ## Using Primer CSS on a static site
 

docs/content/principles/accessibility.md

@@ -55,7 +55,7 @@ The `tabindex` attribute should only be used when absolutely necessary.
 
 - `tabindex=0/-1` makes an element focusable, while `tabindex=0` also includes the element in the normal tab order. In both cases, keyboard triggers of the element still require scripting, so where possible, use [interactive content](http://w3c.github.io/html/dom.html#kinds-of-content-interactive-content) instead.
 
-- `tabindex=1+` takes an element to the very front of the default tab order. When it's applied, the element's visual positioning is no longer indicative of its tab order, and the only way to find out where an element is would be by tabbing through the page. Therefore, unless a page is carefully designed around elements with positive tabindex, it is very error-proned, and thus currently prohibited in github.com.
+- `tabindex=1+` takes an element to the very front of the default tab order. When it's applied, the element's visual positioning is no longer indicative of its tab order, and the only way to find out where an element is would be by tabbing through the page. Therefore, unless a page is carefully designed around elements with positive tabindex, it is very error-prone, and thus currently prohibited in github.com.
 
 Finally, bear in mind that some assistive technologies have keyboard combinations of their own that will override the combination on the web page, so don't rely on keyboard shortcuts as the only alternative to mouse actions.
 

docs/content/principles/index.md

@@ -78,7 +78,7 @@ Components make it easier to mark up a set of elements that are commonly grouped
 
 Components should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [uppercase](https://en.wikipedia.org/wiki/Uppercase) for the block name, hyphens and lowercase for elements, and double-hyphens and lowercase for modifiers. When a block class requires two words use [Pascal case](https://en.wikipedia.org/wiki/PascalCase), for example `ProgressBar`. When an element or modifier class requires two words use [camel case](https://en.wikipedia.org/wiki/camelCase), for example `[Component]-closeButton` or `[Component]--extraLarge`.
 
-* **Block**: A block includes all of the base styles you want shared across every variation of a component. Minimal thematic styling should be applied to blocks, particularly when variations of a component include visual variations. Apply additional styles with modifers rather than overriding base styles.
+* **Block**: A block includes all of the base styles you want shared across every variation of a component. Minimal thematic styling should be applied to blocks, particularly when variations of a component include visual variations. Apply additional styles with modifiers rather than overriding base styles.
 * **Element**: An element is part of a component. Elements should work together with other elements and can have modifiers. Element styles should not override block styles - this often results in applying more styles directly to elements rather than having styles flow down from the parent level.
 * **Modifier**: A modifier is a variation that can be applied to the base component or to an element within the component. Modifiers shouldn't override block styles, they should add onto them.
 

docs/content/principles/scss.md

@@ -1,6 +1,6 @@
 ---
 title: SCSS
-path: priniciples/scss
+path: principles/scss
 ---
 
  

docs/content/support/v18-migration.mdx

@@ -27,7 +27,7 @@ See [color utility classes](/utilities/colors) for a list of all the functional
 | `.color-text-inverse`   | `.color-fg-on-emphasis` |
 | `.color-text-white`     | n/a*                    |
 
-* Often `.color-text-white` can be replaced with `.color-fg-on-emphasis`, but there are some cases where that's not ideal. If in doubt, plase reach out the the `#primer` team.
+* Often `.color-text-white` can be replaced with `.color-fg-on-emphasis`, but there are some cases where that's not ideal. If in doubt, please reach out to the `#primer` team.
 
 ### Icon
 

docs/content/utilities/padding.md

@@ -98,7 +98,7 @@ All padding utilities can be adjusted per [breakpoint](/support/breakpoints) usi
 - On **sm to lg** screens it gives the element padding of `$spacer-6`
 - On **lg and wider** screens, it gives the element padding of `$spacer-3`
 
-It's the equvilent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.
+It's the equivalent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.
 
 ```html live
 <div class="p-responsive color-bg-attention">

docs/src/stories/components/Forms/Textarea.stories.jsx

@@ -48,7 +48,7 @@ export default {
       }
     },
     hideWebKit: {
-      description: 'hude WebKit autofill icon',
+      description: 'hide WebKit autofill icon',
       control: {type: 'boolean'},
       table: {
         category: 'Interactive'

docs/src/stories/components/Layout/LayoutBeta.stories.jsx

@@ -144,7 +144,7 @@ export default {
         type: 'inline-radio'
       },
       description:
-        'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
+        'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.',
       table: {
         category: 'Pane'
       }
@@ -223,7 +223,7 @@ export default {
         type: 'inline-radio'
       },
       description:
-        'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
+        'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.',
       table: {
         category: 'Footer'
       }

docs/src/stories/components/Layout/PageLayout.stories.jsx

@@ -129,7 +129,7 @@ export default {
       control: {
         type: 'inline-radio'
       },
-      description: 'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
+      description: 'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.',
       table: {
         category: 'Pane'
       }
@@ -198,7 +198,7 @@ export default {
       control: {
         type: 'inline-radio'
       },
-      description: 'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
+      description: 'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.',
       table: {
         category: 'Footer'
       }

docs/src/stories/playground/Prototyping.stories.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs'
 
 # Primer CSS Playground
 
-The Playground file contains an empty story configured to promote quick design prototyping with Primer CSS. It can be used with or without controls/args, and there are no rules! Work directly in the Playground file for temporary drafting and collaborating. If what you're building is more permanant, create a folder under Components or Patterns and move your work there.
+The Playground file contains an empty story configured to promote quick design prototyping with Primer CSS. It can be used with or without controls/args, and there are no rules! Work directly in the Playground file for temporary drafting and collaborating. If what you're building is more permanent, create a folder under Components or Patterns and move your work there.
 
 Use this guide as a reference for code snippets, Storybook controls, and configuring conditional logic for interactive prototypes
 
@@ -230,7 +230,7 @@ export const PlaygroundTemplate = ({slot}) => {
 
 ### Interactive prototyping
 
-Sometimes you may want to prototype interations without relying on Storybook controls. One example of this is rendering a `button` that toggles an overlay to open. You can achieve this with a `boolean` control, but in this case you want to be able to click the button in the prototype (just like an interactive prototype in Figma)
+Sometimes you may want to prototype interactions without relying on Storybook controls. One example of this is rendering a `button` that toggles an overlay to open. You can achieve this with a `boolean` control, but in this case you want to be able to click the button in the prototype (just like an interactive prototype in Figma)
 
 #### Collapse/expand
 
@@ -389,4 +389,4 @@ export const PlaygroundTemplate = ({backgroundColor}) => {
 
 #### Color Playground
 
-If you'e just working with color, Color Playground is a quick start template for manipulating `ColorBlock`. Repeat `<ColorBlock />` as many times as you need to test combinations.
+If you're just working with color, Color Playground is a quick start template for manipulating `ColorBlock`. Repeat `<ColorBlock />` as many times as you need to test combinations.

docs/src/stories/ui-patterns/ActionList/API.stories.mdx

@@ -4,7 +4,7 @@ import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 ### Action list
 
-`ActionList` CSS is primarily used as the building blocks for compositional components, such as NavigationList. Below is an overview of how the markup may look for specific kinds of implementions and contexts.
+`ActionList` CSS is primarily used as the building blocks for compositional components, such as NavigationList. Below is an overview of how the markup may look for specific kinds of implementations and contexts.
 
 An action list is a vertical list of interactive <strong>actions</strong> or <strong>options</strong>.
 

script/bundle-size-report.js

@@ -16,7 +16,7 @@ function getBundles(path) {
   const meta = JSON.parse(fs.readFileSync(join(path, './dist/meta.json')))
   let metaBundles = Object.values(meta.bundles)
 
-  // fitler out support bundles, since they don't generate CSS
+  // filter out support bundles, since they don't generate CSS
   metaBundles = metaBundles.filter(bundle => !isSupportBundleName(bundle.name))
   const bundles = {}
   for (const bundle of metaBundles) {

script/stylelint-remove-disables.js

@@ -12,7 +12,7 @@ const REMOVED = `===REMOVED@${Date.now()}===`
 
 execFile('stylelint', ['--rd', '--quiet', '--formatter', 'json', process.argv[2]], (error, stdout) => {
 
-  // Filter to only needless diables comments
+  // Filter to only needless disables comments
   const results = JSON.parse(stdout)
     .filter(result => result.warnings.length > 0)
     .map(({source, warnings}) => {

src/actionlist/action-list-item-divider.scss

@@ -1,4 +1,4 @@
-// emtpy divider
+// empty divider
 
 .ActionList-sectionDivider {
   // has children

src/actionlist/action-list-tree.scss

@@ -121,7 +121,7 @@
     }
     // end copy
 
-    // nesting (infinate levels)
+    // nesting (infinite levels)
     // target items inside expanded subgroup
     &[aria-expanded] {
       .ActionList--subGroup {

src/forms/form-validation.scss

@@ -295,7 +295,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 }
 
-// Used in our boxed-group-less form styles. Give the sumbit button enough space
+// Used in our boxed-group-less form styles. Give the submit button enough space
 // to breathe without the need for the extra hr.
 .form-action-spacious {
   // stylelint-disable-next-line primer/spacing

src/labels/labels.scss

@@ -7,7 +7,7 @@
 
 // Default label
 
-.label, // TODO: Deprecte
+.label, // TODO: Deprecate
 .Label {
   @include labels-base;
 

src/markdown/images.scss

@@ -24,7 +24,7 @@
   .emoji {
     max-width: none;
     vertical-align: text-top;
-    // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
+    // Override `<img>` styles so Emojis don't clash with zebra striping in our tables
     background-color: transparent;
   }
 

src/select-menu/select-menu.scss

@@ -31,7 +31,7 @@ $SelectMenu-max-height: 480px !default;
 
 // Backdrop
 //
-// Adds a dark, semi transparent "cover" underneat the modal. Only visible for xs.
+// Adds a dark, semi transparent "cover" underneath the modal. Only visible for xs.
 
 .SelectMenu::before {
   position: absolute;

src/support/variables/layout.scss

@@ -157,7 +157,7 @@ $responsive-variants: (
   xl: '-xl',
 ) !default;
 
-// responive utility position values
+// responsive utility position values
 $responsive-positions: (
   static,
   relative,

src/utilities/layout.scss

@@ -85,7 +85,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
 
-    // Auto varients
+    // Auto variants
     .width#{$variant}-auto { width: auto !important; }
 
     /* Set the direction to rtl */