docs(typography): Added examples for overriding typography styles

Closes #1147

packages/documentation/src/components/Demos/Typography/TextExamples.md

@@ -2,3 +2,6 @@ There are 13 different typography styles provided by `react-md` and the material
 design specifications. You can use the `Text` component exported from this
 package to apply a specific style or use the `rmd-typoraphy` mixin within SCSS
 files.
+
+If you want to change the typography styles, check out the
+[$rmd-typography-styles documentation](/packages/typography/sassdoc#typography-variable-rmd-typography-styles).

packages/typography/README.md

@@ -10,6 +10,10 @@ to help add typography throughout your app. There is also an accessibility
 helper component named `SrOnly` that allows you to display text to screen
 readers only.
 
+If you'd like to change the typography values, check out the
+[SassDoc page](https://react-md.dev/packages/typography/sassdoc) on the
+documentation site.
+
 ## Installation
 
 ```sh

packages/typography/src/_variables.scss

@@ -222,7 +222,64 @@ $rmd-typography-google-font-weight-suffixes: (
   black: '-Black',
 ) !default;
 
-/// A Map of all the typography styles in react-md
+/// A Map containing of all the typography styles in react-md with reasonable
+/// defaults. Unlike most variables within react-md, this Map is not
+/// configurable itself and instead you can create global variables to override
+/// the styles for all the different typography styles. The global variables
+/// should be a Map of styles to apply, merge, and override the default styles
+/// with the name format of: `rmd-typography-styles-{{NAME}}`. Here's a list of
+/// all the possible variables:
+///
+/// - `$rmd-typography-styles-headline-1`
+/// - `$rmd-typography-styles-headline-2`
+/// - `$rmd-typography-styles-headline-3`
+/// - `$rmd-typography-styles-headline-4`
+/// - `$rmd-typography-styles-headline-5`
+/// - `$rmd-typography-styles-headline-6`
+/// - `$rmd-typography-styles-body-1`
+/// - `$rmd-typography-styles-body-2`
+/// - `$rmd-typography-styles-button`
+/// - `$rmd-typography-styles-caption`
+/// - `$rmd-typography-styles-overline`
+///
+/// @example scss - Default Typography Values
+///   @each $style in map-keys($rmd-typography-styles) {
+///     .#{$style} {
+///       @include rmd-typography($style);
+///     }
+///   }
+///
+/// @example scss - Overriding Typography Values
+///   $rmd-typography-styles-headline-1: (
+///     font-size: 4rem,
+///     line-height: 4rem,
+///     margin: 0,
+///   );
+///   $rmd-typography-styles-headline-2: (
+///     font-size: 3.5rem,
+///     line-height: 3.5rem,
+///     margin: 0,
+///   );
+///   $rmd-typography-styles-headline-3: (
+///     margin: 0,
+///   );
+///   $rmd-typography-styles-headline-4: (
+///     margin: 0,
+///   );
+///   $rmd-typography-styles-headline-5: (
+///     margin: 0,
+///   );
+///   $rmd-typography-styles-headline-6: (
+///     margin: 0,
+///   );
+///   // OVERRIDE_VARIABLES
+///
+///   @each $style in map-keys($rmd-typography-styles) {
+///     .#{$style} {
+///       @include rmd-typography($style);
+///     }
+///   }
+///
 ///
 /// @type Map
 /// @prop {Map} headline-1 - The styles for a headline-1