Skip to content

Commit

Permalink
docs(typography): Added examples for overriding typography styles
Browse files Browse the repository at this point in the history
Closes #1147
  • Loading branch information
mlaursen committed May 13, 2021
1 parent d700b58 commit 57033bd
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 1 deletion.
Expand Up @@ -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).
4 changes: 4 additions & 0 deletions packages/typography/README.md
Expand Up @@ -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
Expand Down
59 changes: 58 additions & 1 deletion packages/typography/src/_variables.scss
Expand Up @@ -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
Expand Down

1 comment on commit 57033bd

@vercel
Copy link

@vercel vercel bot commented on 57033bd May 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.