fix typos in documentation (#232)

Resolve typos found within Addons.mdx ScaleOverriding.mdx and Tokens.mdx

src/stories/Overview/Addons.mdx

@@ -20,7 +20,7 @@ Optics provides a few addons for integrating Third-Party tools with your applica
 If your application uses Tom Select, you can import the styles from Tom Select along with the Design Systems tokens applied to it by placing this after importing the base design system.
 
 ```css
-@import '@rolemodel/optic';
+@import '@rolemodel/optics';
 @import 'tom-select/dist/scss/tom-select';
 
 @import '@rolemodel/optics/dist/scss/addons/tom-select';
@@ -33,7 +33,7 @@ Panel provide styles that are intended to accompany the rails configuration and
 If your application uses this implementation, you can import the styles via:
 
 ```css
-@import '@rolemodel/optic';
+@import '@rolemodel/optics';
 
 @import '@rolemodel/optics/dist/scss/addons/panel';
 ```

src/stories/Overview/ScaleOverriding.mdx

@@ -10,7 +10,7 @@ There are multiple scales in Optics. Unit Scales exist to allow adjusting font a
 
 A Unit Scale is defined for both font sizes and spacing variables. All values are multiplied by their respective units which default as `1rem` (equivelant to `10px`)
 
-If you want to change the font or spacing scale globally, or within the context of a specific component, you can't just set the `--op-space-scale-unit` because the css variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this.
+If you want to change the font or spacing scale globally, or within the context of a specific component, you can't just set the `--op-space-scale-unit` because the CSS variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this.
 
 ```css
 .card--condensed {

src/stories/Overview/Tokens.mdx

@@ -17,7 +17,7 @@ Tokens are defined in `src/core/tokens`
 - Color scale tokens are defined in `src/core/tokens/scale_color_tokens.scss`
 - Dark mode tokens are defined in `src/core/tokens/dark_mode_tokens.scss`
 
-There are also a few component specific tokens that are defined in their respective component file, but those are not indented to be global or used outside of that file.
+There are also a few component specific tokens that are defined in their respective component file, but those are not intended to be global or used outside of that file.
 
 There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization.
 
@@ -152,7 +152,7 @@ The Component name becomes the category and in some cases, the sub category.
   <div>value</div>
 </p>
 
-Additionally, components may implement a "public" and "private" API of tokens. These are internal to the component and intented to provide an easy to use interface for customizing the component.
+Additionally, components may implement a "public" and "private" API of tokens. These are internal to the component and intended to provide an easy to use interface for customizing the component.
 
 The "Private" API is not meant to be set by the user, but rather is used internally by the component.
 These tokens follow a structure like `--__prefix-component-name-sub-name-variant-qualifier-variant: value`