The font family to use throughout the entire application.
$rmd-typography-font-family: Roboto, sans-serif !default;The max length a line of text can be on mobile devices.
$rmd-typography-mobile-max-line-length: 17em !default;The max length a line of text can be on larger screens (mostly desktops or landscape tablets).
$rmd-typography-desktop-max-line-length: 40em !default;The device width that should be used to swap between the mobile and desktop text container widths.
$rmd-typography-text-container-breakpoint: 37.5rem !default;The base styles for typography.
$rmd-typography-base: (
font-family: $rmd-typography-font-family,
-moz-osx-font-smoothing: grayscale,
-webkit-font-smoothing: antialiased,
);The thin font weight to use.
$rmd-typography-thin: 100 !default;The light font weight to use.
$rmd-typography-light: 300 !default;The regular font weight to use.
$rmd-typography-regular: 400 !default;The medium font weight to use.
$rmd-typography-medium: 500 !default;The bold font weight to use.
$rmd-typography-bold: 700 !default;The semi-bold font weight to use.
$rmd-typography-semi-bold: 800 !default;The darkest font weight to use.
$rmd-typography-black: 900 !default;A Map of all the font weights.
$rmd-typography-font-weights: (
thin: $rmd-typography-thin,
light: $rmd-typography-light,
regular: $rmd-typography-regular,
medium: $rmd-typography-medium,
bold: $rmd-typography-bold,
semi-bold: $rmd-typography-semi-bold,
black: $rmd-typography-black,
) !default;A list of the "default" font weights that are normally included within an app. This is really only used for hosting fonts on your own server.
Each value in this should be one of the keys in $rmd-typography-font-weights.
$rmd-typography-default-font-weights: light regular medium bold !default;A map of colors that should be added for the Text component. If you aren't going to use the color prop on the Text component, set this value to an empty map to reduce your bundle size by a slight amount.
$rmd-typography-colors: (
secondary: text-secondary-on-background,
hint: text-hint-on-background,
theme-primary: primary,
theme-secondary: secondary,
theme-warning: warning,
theme-error: error,
) !default;A list of text-align styles to generate. If you don't want the helper classes for text alignment, set this to an empty list to reduce your bundle size by a slight amount.
$rmd-typography-alignments: left center right !default;A list of text-decoration to apply. If you don't want the helper classes for text decoration, set this to an empty list to reduce your bundle size by a slight amount.
$rmd-typography-decorations: underline overline line-through !default;A list of text-transform to apply. If you don't want the helper classes for text transformation, set this to an empty list to reduce your bundle size by a slight amount.
$rmd-typography-transforms: capitalize uppercase lowercase !default;A list of font-style to apply. If you don't want the helper classes for the font styles, set this to an empty list to reduce your bundle size by a slight amount.
$rmd-typography-font-styles: normal italic oblique !default;A Map of font weights to a font file suffix for a Google font.
$rmd-typography-google-font-weight-suffixes: (
thin: '-Thin',
light: '-Light',
regular: '-Regular',
medium: '-Medium',
bold: '-Bold',
semi-bold: '-SemiBold',
black: '-Black',
) !default;Since v3.1.0
The default styles for the headline-1 typography type. These styles can be overridden by the $rmd-typography-headline-1-styles variable.
$rmd-typography-default-headline-1-styles: (
font-size: 6rem,
line-height: 6rem,
font-weight: map.get($rmd-typography-font-weights, light),
letter-spacing: rmd-typography-get-letter-spacing(-1.5, 6),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-1-styles.
$rmd-typography-headline-1-styles: () !default;Since v3.1.0
The default styles for the headline-2 typography type. These styles can be overridden by the $rmd-typography-headline-2-styles variable.
$rmd-typography-default-headline-2-styles: (
font-size: 3.75rem,
line-height: 3.75rem,
font-weight: map.get($rmd-typography-font-weights, light),
letter-spacing: rmd-typography-get-letter-spacing(-0.5, 3.75),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-2-styles.
$rmd-typography-headline-2-styles: () !default;Since v3.1.0
The default styles for the headline-3 typography type. These styles can be overridden by the $rmd-typography-headline-3-styles variable.
$rmd-typography-default-headline-3-styles: (
font-size: 3rem,
line-height: 3.125rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: normal,
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-3-styles.
$rmd-typography-headline-3-styles: () !default;Since v3.1.0
The default styles for the headline-4 typography type. These styles can be overridden by the $rmd-typography-headline-4-styles variable.
$rmd-typography-default-headline-4-styles: (
font-size: 2.125rem,
line-height: 2.5rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: rmd-typography-get-letter-spacing(0.25, 2.125),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-4-styles.
$rmd-typography-headline-4-styles: () !default;Since v3.1.0
The default styles for the headline-5 typography type. These styles can be overridden by the $rmd-typography-headline-5-styles variable.
$rmd-typography-default-headline-5-styles: (
font-size: 1.5rem,
line-height: 2rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: normal,
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-5-styles.
$rmd-typography-headline-5-styles: () !default;Since v3.1.0
The default styles for the headline-6 typography type. These styles can be overridden by the $rmd-typography-headline-6-styles variable.
$rmd-typography-default-headline-6-styles: (
font-size: 1.25rem,
line-height: 2rem,
font-weight: map.get($rmd-typography-font-weights, medium),
letter-spacing: rmd-typography-get-letter-spacing(0.25, 1.25),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-headline-6-styles.
$rmd-typography-headline-6-styles: () !default;Since v3.1.0
The default styles for the subtitle-1 typography type. These styles can be overridden by the $rmd-typography-subtitle-1-styles variable.
$rmd-typography-default-subtitle-1-styles: (
font-size: 1rem,
line-height: 1.75rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: rmd-typography-get-letter-spacing(0.15, 1),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-subtitle-1-styles.
$rmd-typography-subtitle-1-styles: () !default;Since v3.1.0
The default styles for the subtitle-2 typography type. These styles can be overridden by the $rmd-typography-subtitle-2-styles variable.
$rmd-typography-default-subtitle-2-styles: (
font-size: 0.875rem,
line-height: 1.375rem,
font-weight: map.get($rmd-typography-font-weights, medium),
letter-spacing: rmd-typography-get-letter-spacing(0.1, 0.875),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-subtitle-2-styles.
$rmd-typography-subtitle-2-styles: () !default;Since v3.1.0
The default styles for the body-1 typography type. These styles can be overridden by the $rmd-typography-body-1-styles variable.
$rmd-typography-default-body-1-styles: (
font-size: 1rem,
line-height: 1.5rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: rmd-typography-get-letter-spacing(0.5, 0.875),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-body-1-styles.
$rmd-typography-body-1-styles: () !default;Since v3.1.0
The default styles for the body-2 typography type. These styles can be overridden by the $rmd-typography-body-2-styles variable.
$rmd-typography-default-body-2-styles: (
font-size: 0.875rem,
line-height: 1.25rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: rmd-typography-get-letter-spacing(0.25, 0.875),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-body-2-styles.
$rmd-typography-body-2-styles: () !default;Since v3.1.0
The default styles for the caption typography type. These styles can be overridden by the $rmd-typography-caption-styles variable.
$rmd-typography-default-caption-styles: (
font-size: 0.75rem,
line-height: 1.25rem,
font-weight: map.get($rmd-typography-font-weights, regular),
letter-spacing: rmd-typography-get-letter-spacing(0.4, 0.75),
text-decoration: inherit,
text-transform: inherit,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-caption-styles.
$rmd-typography-caption-styles: () !default;Since v3.1.0
The default styles for the button typography type. These styles can be overridden by the $rmd-typography-button-styles variable.
$rmd-typography-default-button-styles: (
font-size: 0.875rem,
line-height: 2.25rem,
font-weight: map.get($rmd-typography-font-weights, medium),
letter-spacing: rmd-typography-get-letter-spacing(1.25, 0.875),
text-decoration: none,
text-transform: uppercase,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-button-styles.
$rmd-typography-button-styles: () !default;Since v3.1.0
The default styles for the overline typography type. These styles can be overridden by the $rmd-typography-overline-styles variable.
$rmd-typography-default-overline-styles: (
font-size: 0.75rem,
line-height: 2rem,
font-weight: map.get($rmd-typography-font-weights, medium),
letter-spacing: rmd-typography-get-letter-spacing(2, 0.75),
text-decoration: none,
text-transform: uppercase,
);Since v3.1.0
A map of styles that will be merged with and override any of the $rmd-typography-default-overline-styles.
$rmd-typography-overline-styles: () !default;A Map containing of all the typography styles in react-md with reasonable defaults.
$rmd-typography-headline-1-styles$rmd-typography-headline-2-styles$rmd-typography-headline-3-styles$rmd-typography-headline-4-styles$rmd-typography-headline-5-styles$rmd-typography-headline-6-styles$rmd-typography-body-1-styles$rmd-typography-body-2-styles$rmd-typography-button-styles$rmd-typography-caption-styles$rmd-typography-overline-styles$rmd-typography-styles: rmd-typography-set-styles(
$rmd-typography-base,
(
headline-1: $rmd-typography-default-headline-1-styles,
headline-2: $rmd-typography-default-headline-2-styles,
headline-3: $rmd-typography-default-headline-3-styles,
headline-4: $rmd-typography-default-headline-4-styles,
headline-5: $rmd-typography-default-headline-5-styles,
headline-6: $rmd-typography-default-headline-6-styles,
subtitle-1: $rmd-typography-default-subtitle-1-styles,
subtitle-2: $rmd-typography-default-subtitle-2-styles,
body-1: $rmd-typography-default-body-1-styles,
body-2: $rmd-typography-default-body-2-styles,
caption: $rmd-typography-default-caption-styles,
button: $rmd-typography-default-button-styles,
overline: $rmd-typography-default-overline-styles,
)
);@use 'react-md' as *;
@each $style in map-keys($rmd-typography-styles) {
.#{$style} {
@include rmd-typography($style);
}
}
@use 'react-md' as * with (
$rmd-typography-headline-1-styles: (
font-size: 4rem,
line-height: 4rem,
margin: 0,
),
$rmd-typography-headline-2-styles: (
font-size: 3.5rem,
line-height: 3.5rem,
margin: 0,
),
$rmd-typography-headline-3-styles: (
margin: 0,
),
$rmd-typography-headline-4-styles: (
margin: 0,
),
$rmd-typography-headline-5-styles: (
margin: 0,
),
$rmd-typography-headline-6-styles: (
margin: 0,
)
);
@each $style in map-keys($rmd-typography-styles) {
.#{$style} {
@include rmd-typography($style);
}
}
A Map of all the "themeable" parts of the typography package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-typography-theme-values: (
line-width: $rmd-typography-desktop-max-line-length,
mobile-line-width: $rmd-typography-mobile-max-line-length,
desktop-line-width: $rmd-typography-desktop-max-line-length,
) !default;Creates the styles for one of the typography's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the typography's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The typography theme style type to update.
This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Applies each property value from the $rmd-typography-styles map that matches the style name.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style | The typography style to get value(s) for. This should be one of the keys from the | String | — |
$properties | A list of properties to get and create. When no properties are provided, it will default to using | String... | font-size |
@use 'react-md' as *;
.body-1-font-size {
// when no properties are provided, it will default to font-size
@include rmd-typography-value(body-1);
}
.headline-4-letter-spacing {
@include rmd-typography-value(headline-4, letter-spacing);
}
.caption-styles {
@include rmd-typography-value(
caption,
font-size,
letter-spacing,
line-height
);
}
Applies the base typography styles to an element.
@use 'react-md' as *;
.custom-class-name {
@include rmd-typography-base;
font-size: 1.3rem;
}
Applies one of the provided material design styles to an element.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style | One of the typography styles from | String | — |
$omit | A list of keys to omit | List | — |
Creates the base styles required for the text container. These styles are used to be able to center the text in a container once the max-width value has also been applied.
This will generate the styles to apply to an element that will set the max width for legibility. By default, this will create styles that change based on the provided $mobile-breakpoint and apply different max widths on a media query. This feature can be disabled by setting the $mobile-breakpoint or the $desktop-max-width parameters to null.
Unlike everything else in react-md, the text container relies on having the box-sizing set to content-box so that the text contents can be centered correctly with a max width and padding. When this is set to border-box,
you will lose the padding real estate in your text container which is something that might not be desired. Keeping this as content-box will allow padding to be applied without shrinking the max line length.
| Name | Description | Type | Default Value |
|---|---|---|---|
$mobile-max-width | The max width for a line of text on mobile devices. This number is recommended to be between 17em and 18em. | Number | $rmd-typography-mobile-max-line-length |
$desktop-max-width | The max width for a line of text on desktop screens. This number is recommended to be between 38em and 42em. | Number | $rmd-typography-desktop-max-line-length |
$mobile-breakpoint | The breakpoint for switching between a mobile device and a desktop screen. This is used to automatically change the max line-width for better legibility. | Number | $rmd-typography-text-container-breakpoint |
@use 'react-md' as *;
.blog {
@include rmd-text-container-base;
@include rmd-text-container-auto;
}
.title {
@include rmd-typography(headline-2);
}
.paragraph {
@include rmd-typography(headline-4);
@media (max-width: 800px) {
@include rmd-typography(headline-5);
}
}
@use "react-md" as *;
<main class="blog">
<h1 class="title">Blog Title</h1>
<p class="paragraph">Lorem ipsum...</p>
<p class="paragraph">Lorem ipsum...</p>
</main>
Creates all the styles for the text container component.
A simple mixin that can be used to update an element to ellipsis text when it is too long.
@use 'react-md' as *;
.truncate-this {
@include rmd-typography-text-overflow-ellipsis;
width: 5rem;
}
A simple mixin that allows you to use the -webkit-box behavior for overflowing text that spans multiple lines
| Name | Description | Type | Default Value |
|---|---|---|---|
$lines | The number of lines that the text should be clamped to. | String|Number | 2 |
Creates all the typography styles from the react-md typography variables.
Creates the font face declaration for a Google font with a provided font weight. This will need to be called multiple times if you are including multiple font weights.
This should only be used if you are hosting the Google font locally instead of through the Google fonts service.
| Name | Description | Type | Default Value |
|---|---|---|---|
$font-name | The font name to use. | String | Roboto |
$font-weight | The font weight to use. | String | map-get($rmd-typography-font-weights, regular) |
$font-url-or-prefix | This is either a font url prefix for the folder containing the font on your server or a url string to the font icon file on your server. If you are using create-react-app, you must use the url string approach for it to be correctly included in the build process. If this value is null, it will default to have '/fonts/' prefix and then a caterpillar-cased string. See the examples above for more details. | String | null |
@use 'react-md' as *;
@include rmd-typography-google-font-face(Roboto, regular, null);
@include rmd-typography-google-font-face('Source Code Pro', regular, null);
Generates all the font faces (with font weights) for a Google font. This should only be used if you are hosting the Google font on your own servers instead of through the Google fonts service.
If you are using create-react-app, you must provide the $font-url-prefix-or-url-map as a Map of urls to have the font files correctly included and bundled during your build. See the examples for more details.
| Name | Description | Type | Default Value |
|---|---|---|---|
$font-name | The font name to use. | String | Roboto |
$weights | A list of font weights to use. These should be one of the | List | $rmd-typography-default-font-weights |
$font-url-prefix-or-url-map | This is either a font url prefix for the folder containing the font on your server or a url string to the font icon file on your server. If you are using create-react-app, you must use the url string approach for it to be correctly included in the build process. If this value is null, it will default to have '/fonts/' prefix and then a caterpillar-cased string. See the | Map|String | null |
@use 'react-md' as *;
// This example will assume that your fonts have been downloaded and
// copied into a `public/fonts` directory within create-react-app.
// The fonts will not be bundled with your normal build process and just
// will be static assets.
// The next 3 lines are equivalent
@include rmd-typography-host-google-font;
@include rmd-typography-host-google-font(
Roboto,
$rmd-typography-default-font-weights,
null
);
@include rmd-typography-host-google-font(
Roboto,
$rmd-typography-default-font-weights,
'/fonts/roboto'
);
@include rmd-typography-host-google-font('Source Code Pro');
@use 'react-md' as *;
// Since it might be useful to include the font in the normal build
// process to hash and prefix the urls as needed, you can also use
// relative paths instead of absolute paths.
// This example will assume you are working within a `src/fonts.scss` file
// and have copied your fonts into a `src/fonts` directory
// Note the `~./`. This will resolve this import to the `src` directory
// within create-react-app
@include rmd-typography-host-google-font(
Roboto,
$rmd-typography-default-font-weights,
'~./fonts/roboto'
);
@include rmd-typography-host-google-font(
'Source Code Pro',
regular,
'~./fonts/source-code-pro'
);
@use 'react-md' as *;
// This is going to assume you have downloaded the material-icons zip with
// all the icon font files and copied it into `src/fonts/material-icons` and
// you are including the fonts in `src/index.scss`
@include rmd-typography-host-google-font(
Roboto,
$rmd-typography-default-font-weights,
(
light: url(/fonts/roboto/Roboto-Light.ttf),
regular: url(/fonts/roboto/Roboto-Regular.ttf),
medium: url(/fonts/roboto/Roboto-Medium.ttf),
bold: url(/fonts/roboto/Roboto-Bold.ttf),
)
);
@include rmd-typography-host-google-font(
SourceCodePro,
$rmd-typography-default-font-weights,
(
light: url(/fonts/source-code-pro/SourceCodePro-Light.ttf),
regular: url(/fonts/source-code-pro/SourceCodePro-Regular.ttf),
medium: url(/fonts/source-code-pro/SourceCodePro-Medium.ttf),
bold: url(/fonts/source-code-pro/SourceCodePro-Bold.ttf),
)
);
This function is used to quickly get one of the typography's theme values.
This is really just for the rmd-typography-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the typography's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the typography's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-typography-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the typography's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |
Gets the Google font suffix for the provided font weight.
Stringthe suffix for the provided font weight.
| Name | Description | Type | Default Value |
|---|---|---|---|
$weight | The font weight to get a font suffix string for.
This should be one of the | String | — |
Gets the current typography style from the $rmd-typography-styles variable.
Stringthe typography style value.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style | One of the keys for the | String | — |
$property | One of the property values to extract. | String | — |
@use 'react-md' as *;
.test {
font-size: rmd-typography-value(headline-1, font-size);
line-height: rmd-typography-value(headline-4, line-height);
}
Gets the global variable value for a provided typography style name. This assumes that the global variable exists already.
Mapa map of the style properties from the global typography variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style | The typography style name to return a variable for | String | — |
A utility function to help merge typography styles together with global definition overrides.
Mapa Map of the base-styles and additional styles merged together
| Name | Description | Type | Default Value |
|---|---|---|---|
$base-styles | The base styles to merge with | Map | — |
$additional-styles | Any additional styles to merge with | Map | — |
A small utility function to get the letter spacing based on tracking and font-size
Numberthe letter spacing value in em
| Name | Description | Type | Default Value |
|---|---|---|---|
$tracking | The tracking to use | Number | — |
$font-size | The font size to use | Number | — |