RMD-358 optics documentation fixes (GH-239) (#239)

* fix typos in documentation

* change to tokens, change language used in documentation

* change to documentation

* change from PopperJS to Floating UI

* move line 449 to line 450

src/core/tokens/dark_mode_tokens.scss

@@ -447,6 +447,9 @@
 }
 
 @mixin encoded-images {
+  /**
+  * @tokens Encoded Images
+  */
   --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
 }
 

src/stories/Components/Accordion/Accordion.mdx

@@ -60,9 +60,9 @@ Additional content can be included within the `summary` element in any order. An
 
 ## Accordion API
 
-Styles are built on css variables scoped to the accordion.
+Styles are built on CSS variables scoped to the accordion.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -81,7 +81,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The accordion classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The accordion classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior. You can modify all accordion behavior by overriding the `%accordion-global` placeholder selector and setting any properties:
 

src/stories/Components/Alert/Alert.mdx

@@ -41,27 +41,27 @@ Alert can be used as a standalone component, however, it does have a few depende
 
 ### Warning
 
-`.alert-warning` Provides a warning styled message
+`.alert-warning` Provides a warning styled message.
 
 <Canvas of={AlertStories.Warning} />
 
 ### Danger
 
-`.alert-danger` Provides a danger styled message
+`.alert-danger` Provides a danger styled message.
 
 `.alert-alert` is an alias for `.alert-danger`. Since RoleModel commonly uses [Rails](https://rubyonrails.org/) to develop projects, adding this alias allows this to be used for flash messages without having to change the default in rails. [Devise](https://github.com/heartcombo/devise) is also commonly used and cannot easily be configured away from this.
 
 <Canvas of={AlertStories.Danger} />
 
 ### Info
 
-`.alert-info` Provides an info styled message
+`.alert-info` Provides an info styled message.
 
 <Canvas of={AlertStories.Info} />
 
 ### Notice
 
-`.alert-notice` Provides a notice styled message
+`.alert-notice` Provides a notice styled message.
 
 <Canvas of={AlertStories.Notice} />
 
@@ -79,19 +79,19 @@ Alert can be used as a standalone component, however, it does have a few depende
 
 ### No Icon
 
-The icon is optional
+The icon is optional.
 
 <Canvas of={AlertStories.NoIcon} />
 
 ### No Title
 
-The title is optional
+The title is optional.
 
 <Canvas of={AlertStories.NoTitle} />
 
 ### Dismissible
 
-If your application needs to allow dismissing these alerts, you can add a second icon/button after the messages section and add functionality via JS
+If your application needs to allow dismissing these alerts, you can add a second icon/button after the messages section and add functionality via JS.
 
 <Canvas of={AlertStories.Dismissible} />
 
@@ -131,7 +131,7 @@ icon, title, and the final (dismissible close) icon are all optional.
   }}
 ></div>
 
-The alert classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The alert classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple alert classes to share the same behavior. You can modify all alerts behavior by overriding the `%alert-global` placeholder selector and setting any properties:
 
@@ -141,7 +141,7 @@ This allows multiple alert classes to share the same behavior. You can modify al
 }
 ```
 
-If you need to override the behavior of a particular alert style, you can open the respective class and set or change properties
+If you need to override the behavior of a particular alert style, you can open the respective class and set or change properties.
 
 ```css
 // This will only affect the warning alert, but not danger, info, or notice.

src/stories/Components/Avatar/Avatar.mdx

@@ -13,7 +13,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
   }}
 ></div>
 
-Avatar classes can be used on `a` or `div` html elements with an `img` within it.They provide consistent and composable styling for application avatars or profile pictures.
+Avatar classes can be used on `a` or `div` html elements with an `img` within it. They provide consistent and composable styling for application avatars or profile pictures.
 
 When using on an `a` element, the avatar will support a hover and focus state.
 When using on a `div` element, the avatar will not support a hover or focus state.
@@ -67,9 +67,9 @@ The avatar classes can be used either on an `a` or `div` element that wraps an `
 
 ## Avatar API
 
-The size and border styles are built on css variables scoped to the avatar.
+The size and border styles are built on CSS variables scoped to the avatar.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -96,7 +96,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The avatar classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The avatar classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior. You can modify all avatar behavior by overriding the `%avatar-global` placeholder selector and setting any properties:
 

src/stories/Components/Badge/Badge.mdx

@@ -84,7 +84,7 @@ Badge can be used as a standalone component, however, it does have a few depende
 
 <Canvas of={BadgeStories.NotificationButton} />
 
-## Customizing badge styles
+## Customizing Badge styles
 
 <div
   dangerouslySetInnerHTML={{
@@ -95,7 +95,7 @@ Badge can be used as a standalone component, however, it does have a few depende
   }}
 ></div>
 
-The badge classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The badge classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple badge classes to share the same behavior. You can modify all badges behavior by overriding the `%badge-global` placeholder selector and setting any properties:
 

src/stories/Components/Breadcrumbs/Breadcrumbs.mdx

@@ -57,9 +57,9 @@ Breadcrumbs can be used as a standalone component, however, it does have a few d
 
 ## Breadcrumb API
 
-Styles are built on css variables scoped to the breadcrumbs.
+Styles are built on CSS variables scoped to the breadcrumbs.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -79,7 +79,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The breadcrumbs classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The breadcrumbs classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior. You can modify all breadcrumbs behavior by overriding the `%breadcrumbs-global` placeholder selector and setting any properties:
 

src/stories/Components/Button/Button.mdx

@@ -63,9 +63,9 @@ Note: `.btn-delete` also works for backwards compatibility, but `.btn-destructiv
 
 ### No Border
 
-`.btn--no-border` This is a modifier which can be used with all button classes except destructive. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations.
+`.btn--no-border` This is a modifier which can be used with all button classes except destructive and warning. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations.
 
-Note: `.btn-destructive` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or destructive buttons is not considered a good pattern and can easily lead to confusion so it has been disabled.
+Note: `.btn-destructive` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or destructive buttons are not considered a good pattern and can easily lead to confusion so are not available.
 
 <Canvas of={ButtonStories.NoBorder} />
 
@@ -149,7 +149,7 @@ Here are the variables and states used
   }}
 ></div>
 
-The button classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The button classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple button classes to share the same behavior. You can modify all buttons behavior by overriding the `%btn-global` placeholder selector and setting any properties:
 

src/stories/Components/ButtonGroup/ButtonGroup.mdx

@@ -80,9 +80,9 @@ Button Group can be used as a standalone component, however, it does have a few
 
 ## Button Group API
 
-Styles are built on css variables scoped to the button group.
+Styles are built on CSS variables scoped to the button group.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css

src/stories/Components/Card/Card.mdx

@@ -77,7 +77,7 @@ Card can be used as a standalone component, however, it does have a few dependen
   }}
 ></div>
 
-The card classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The card classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple card classes to share the same behavior. You can modify all cards behavior by overriding the `%card-global` placeholder selector and setting any properties:
 

src/stories/Components/ConfirmDialog/ConfirmDialog.mdx

@@ -48,9 +48,9 @@ Confirm Dialog can be used as a standalone component, however, it does have a fe
 
 ## Confirm Dialog API
 
-Styles are built on css variables scoped to the confirm dialog.
+Styles are built on CSS variables scoped to the confirm dialog.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -69,7 +69,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The classes are built on [sass placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The classes are built on [SASS placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows classes to share the same behavior. You can modify all dialogs behavior by overriding the `%confirm-dialog-wrapper-global` and `%confirm-dialog-global` placeholder selectors and setting any properties:
 

src/stories/Components/Divider/Divider.mdx

@@ -37,13 +37,13 @@ Divider can be used as a standalone component, however, it does have a few depen
 
 ### Default
 
-`.divider` Provides a basic horizontal divider
+`.divider` Provides a basic horizontal divider.
 
 <Canvas of={DividerStories.Default} />
 
 ### Vertical
 
-`.divider-vertical` Provides a basic vertical divider
+`.divider-vertical` Provides a basic vertical divider.
 
 <Canvas of={DividerStories.Vertical} />
 
@@ -61,9 +61,9 @@ Divider can be used as a standalone component, however, it does have a few depen
 
 ## Divider API
 
-The size and spacing styles are built on css variables scoped to the divider.
+The size and spacing styles are built on CSS variables scoped to the divider.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -88,7 +88,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The divider classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The divider classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior. You can modify all divider behavior by overriding the `%divider-global` placeholder selector and setting any properties:
 

src/stories/Components/Form/Form.mdx

@@ -18,7 +18,7 @@ import { createAlert } from '../Alert/Alert.js'
   }}
 ></div>
 
-Form classes can be used on a variety of `inputs` or `select` html elements.
+Form classes can be used on a variety of `inputs` or `select` HTML elements.
 They provide consistent and composable styling that should address most applications basic needs.
 
 ## Playground
@@ -49,7 +49,7 @@ Form Controls can be used as standalone components, however, they do have a few
 
 ### Input
 
-`.form-control` Provides basic input styles. This can be used on `input` html elements. It works across a variety of types such as `text`, `number`, `password`, `email`, `phone`, `color`, `radio`, and, `checkbox`
+`.form-control` Provides basic input styles. This can be used on `input` HTML elements. It works across a variety of types such as `text`, `number`, `password`, `email`, `phone`, `color`, `radio`, and `checkbox`.
 
 <Canvas of={InputStories.Default} />
 
@@ -67,7 +67,7 @@ Form Controls can be used as standalone components, however, they do have a few
 
 ### Textarea
 
-`textarea.form-control` Provides basic text area styles. This can be used on `textarea` html elements.
+`textarea.form-control` Provides basic text area styles. This can be used on `textarea` HTML elements.
 
 <Canvas of={TextareaStories.Default} />
 <Controls of={TextareaStories.Default} />
@@ -81,7 +81,7 @@ Form Controls can be used as standalone components, however, they do have a few
 
 ### Color
 
-`<input type='color' class='form-control'>` Provides basic color input styles. This can be used on `input` html elements with a type of `color`.
+`<input type='color' class='form-control'>` Provides basic color input styles. This can be used on `input` HTML elements with a type of `color`.
 
 <Canvas of={InputStories.Color} />
 
@@ -143,7 +143,7 @@ See [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/:inde
 
 ## Form API
 
-Styles are built on css variables scoped to the form elements.
+Styles are built on CSS variables scoped to the form elements.
 
 Here are the variables that can be customized.
 
@@ -178,7 +178,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The form classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The form classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior.
 

src/stories/Components/Icon/Icon.mdx

@@ -36,7 +36,7 @@ Icon can be used as a standalone component, however, it does have a few dependen
 
 ### Default
 
-To use an icon, put an element (usually a `span`) with the class of `.material-symbols-outlined` and inner text of whatever icon you which to use I.E. `settings` onto the page.
+To use an icon, put an element (usually a `span`) with the class of `.material-symbols-outlined` and inner text of whatever icon you wish to use I.E. `settings` onto the page.
 
 ```html
 <span class="material-symbols-outlined">settings</span>

src/stories/Components/Modal/Modal.mdx

@@ -13,7 +13,7 @@ import { createAlert } from '../Alert/Alert.js'
   }}
 ></div>
 
-The Modal classes can be used for styling a custom modal. This can be used alongside the rails configuration and javascript implemented by [RoleModel Rails Modal](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/modals)
+The Modal classes can be used for styling a custom modal. This can be used alongside the Rails configuration and Javascript implemented by [RoleModel Rails Modal](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/modals)
 
 ## Selective Imports
 
@@ -70,7 +70,7 @@ The modal styles will still work using the HTML dialog element. Simply add the `
 </dialog>
 ```
 
-You can then use javascript to open the dialog:
+You can then use Javascript to open the dialog:
 
 ```javascript
 const dialog = document.getElementById('my-dialog')
@@ -133,9 +133,9 @@ cancelButton.addEventListener('click', () => {
 
 ## Modal API
 
-Styles are built on css variables scoped to the modal.
+Styles are built on CSS variables scoped to the modal.
 
-Here are the variables that can be customized.
+Here are the variables that can be customized:
 
 {/* prettier-ignore-start */}
 ```css
@@ -163,7 +163,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The classes are built on [sass placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The classes are built on [SASS placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows classes to share the same behavior. You can modify all dialogs behavior by overriding the `%modal-wrapper-global` and `%confirm-dialog-global` placeholder selectors and setting any properties:
 

src/stories/Components/Navbar/Navbar.mdx

@@ -76,7 +76,7 @@ The brand is not required and the navbar content will adjust itself accordingly.
 
 ## Navbar API
 
-Color and hover styles are built on css variables scoped to the navbar.
+Color and hover styles are built on CSS variables scoped to the navbar.
 
 Here are the variables that can be customized.
 
@@ -109,7 +109,7 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The navbar classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The navbar classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
 
 This allows multiple classes to share the same behavior. You can modify all navbar behavior by overriding the `%navbar-global` placeholder selector and setting any properties: