[GHI #108] Documentation Updates (#147)

This PR moves Tokens docs from Introduction to Separate page that links to existing token docs. It also adds a note on Compilers and compatibility to introduction and cleans up syntax highlighting and links in other documentation pages

src/stories/1_Introduction.stories.mdx

@@ -23,28 +23,20 @@ npm install @rolemodel/optics
 yarn add @rolemodel/optics
 ```
 
+## Getting Started
+
 ### Import
 
 If you are using webpack to compile, you can add this import to the top of your root level `scss` file.
 
-```scss
-@import '@rolemodel/optics';
-```
-
-If you are using a different compiler such as Dart Sass, you may need to reference the scss file directly.
-
-```scss
-@import '@rolemodel/optics/dist/scss/optics';
+```css
+@import '@rolemodel/optics'; # Using webpack to compile
+// Or
+@import '@rolemodel/optics/dist/scss/optics'; # Using a different compiler such as Dart Sass
 ```
 
-## Tokens
-
-Tokens are defined in `src/core/tokens`
-
-- All core tokens are defined in `src/core/tokens/base_tokens.scss`
-- 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`
+### Note on Compilers
 
-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.
+If you are using a different compiler such as Dart Sass, you will need to reference the scss file directly as shown above.
 
-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.
+Optics does not support using the [SassC::Rails](https://github.com/sass/sassc-rails) compiler. SassC::Rails is built on top of [LibSass](https://sass-lang.com/libsass) which is now deprecated in favor of Dart Sass

src/stories/2_SelectiveImports.stories.mdx

@@ -6,15 +6,15 @@ import { Meta } from '@storybook/addon-docs'
 
 By default, when you import the design system, it will include the basics. CSS reset, All Tokens, Base styles, Utilities, and all Components.
 
-```scss
+```css
 @import '@rolemodel/optics';
 // or
 @import '@rolemodel/optics/dist/scss/optics';
 ```
 
 If your application doesn't need all styles provided, you can import only the files you need like this:
 
-```scss
+```css
 @import 'modern-css-reset/dist/reset';
 
 @import 'core/tokens';
@@ -30,7 +30,7 @@ If your application doesn't need all styles provided, you can import only the fi
 
 Or this:
 
-```scss
+```css
 @import 'modern-css-reset/dist/reset';
 
 @import 'base_tokens';

src/stories/3_Tokens.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs'
+import LinkTo from '@storybook/addon-links/react'
+
+<Meta title="Overview/Tokens" />
+
+# Tokens
+
+Tokens are defined in `src/core/tokens`
+
+- All core tokens are defined in `src/core/tokens/base_tokens.scss`
+- 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 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.
+
+## Base Tokens
+
+- <LinkTo kind="tokens-border--default">Border</LinkTo>
+- <LinkTo kind="tokens-typography-font-family">Font Family</LinkTo>
+- <LinkTo kind="tokens-typography-font-size">Font Size</LinkTo>
+- <LinkTo kind="tokens-typography-font-weight">Font Weight</LinkTo>
+- <LinkTo kind="tokens-typography-letter-spacing">Letter Spacing</LinkTo>
+- <LinkTo kind="tokens-typography-line-height">Line Height</LinkTo>
+- <LinkTo kind="tokens-shadow--x-small">Shadow</LinkTo>
+- <LinkTo kind="tokens-transition--default">Transition</LinkTo>

src/stories/3_Themes.stories.mdx → src/stories/4_Themes.stories.mdx

@@ -25,15 +25,15 @@ This will ignore the system preference and use specified theme mode (I.E. your a
 If you want to customize your application, you can provide your own theme files that serve as overrides to the existing tokens.
 An example implementation your main scss file would look like:
 
-```scss
+```css
 @import '@rolemodel/optics';
 
 @import 'stylesheets/theme/my_app_theme';
 ```
 
 Your custom theme can change any tokens, including colors, radius, fonts, even redefine the luminosity and semantic scales. It generally will look like:
 
-```scss
+```css
 @import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
@@ -81,7 +81,7 @@ This theme would always be included in your application, but only activate when
 </html>
 ```
 
-```scss
+```css
 @import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 

src/stories/5_Addons.stories.mdx → src/stories/6_Addons.stories.mdx

@@ -12,7 +12,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.
 
-```scss
+```css
 @import '@rolemodel/optics/dist/scss/addons/tom-select';
 ```
 
@@ -22,13 +22,13 @@ Modal and Panel provide styles that are intended to accompany the rails configur
 
 If you application uses this implementation, you can import the styles via:
 
-```scss
+```css
 @import '@rolemodel/optics/dist/scss/addons/rails-modal-and-panel';
 ```
 
 You can also import one or the other with:
 
-```scss
+```css
 @import '@rolemodel/optics/dist/scss/addons/rails-modal-and-panel/modal';
 // or
 @import '@rolemodel/optics/dist/scss/addons/rails-modal-and-panel/panel';

src/stories/Font/LineHeight.mdx

@@ -5,8 +5,6 @@ import LinkTo from '@storybook/addon-links/react'
 
 Line height tokens can be used to change the line height of text.
 
-{/* **Note** Not all fonts have the same baseline line height. This can cause alignment issues in your text that may require you to adjust the default line height tokens */}
-
 ## Usage
 
 These tokens can be applied like:

src/stories/Recipes/Layout/Layout.mdx

@@ -40,7 +40,7 @@ The header and footer are sticky and can be used with `page__header` and `page__
 
 ## With Sidebar
 
-For instructions on the sidebar itself, see <LinkTo LinkTo kind="components-sidebar--default-drawer">Sidebar Component</LinkTo>.
+For instructions on the sidebar itself, see <LinkTo kind="components-sidebar--default-drawer">Sidebar Component</LinkTo>.
 
 A layout with a sidebar looks like the following:
 

src/stories/Sidebar/Sidebar.mdx

@@ -5,7 +5,7 @@ import LinkTo from '@storybook/addon-links/react'
 
 Sidebar classes provide simple styling for a navigation sidebar drawer or rail.
 
-For instructions on how to integrate a sidebar into your applications layout, see <LinkTo LinkTo kind="recipes-layout--sidebar">Layout With Sidebar</LinkTo>.
+For instructions on how to integrate a sidebar into your applications layout, see <LinkTo kind="recipes-layout--sidebar">Layout With Sidebar</LinkTo>.
 
 `.sidebar` is the main component that everything is contained within.