Typography Sass API

Variables

disable-text-container

$disable-text-container: false !default;

Used By

• @mixin typography-variables

disable-mark

$disable-mark: false !default;

disable-headline-1

$disable-headline-1: false !default;

Used By

• @mixin typography-base-styles

disable-headline-2

$disable-headline-2: false !default;

Used By

• @mixin typography-base-styles

disable-headline-3

$disable-headline-3: false !default;

Used By

• @mixin typography-base-styles

disable-headline-4

$disable-headline-4: false !default;

Used By

• @mixin typography-base-styles

disable-headline-5

$disable-headline-5: false !default;

Used By

• @mixin typography-base-styles

disable-headline-6

$disable-headline-6: false !default;

Used By

• @mixin typography-base-styles

disable-subtitle-1

$disable-subtitle-1: false !default;

Used By

• @mixin typography-base-styles

disable-subtitle-2

$disable-subtitle-2: false !default;

Used By

• @mixin typography-base-styles

disable-body-1

$disable-body-1: false !default;

Used By

• @mixin typography-base-styles

disable-body-2

$disable-body-2: false !default;

Used By

• @mixin typography-base-styles

disable-caption

$disable-caption: false !default;

Used By

• @mixin typography-base-styles

disable-overline

$disable-overline: false !default;

Used By

• @mixin typography-base-styles

font-weight-thin

$font-weight-thin: 100 !default;

font-weight-light

$font-weight-light: 300 !default;

font-weight-regular

$font-weight-regular: 400 !default;

font-weight-medium

$font-weight-medium: 500 !default;

font-weight-bold

$font-weight-bold: 700 !default;

font-weight-semi-bold

$font-weight-semi-bold: 800 !default;

font-weight-black

$font-weight-black: 900 !default;

font-weights

$font-weights: (
  thin: $font-weight-thin,
  light: $font-weight-light,
  regular: $font-weight-regular,
  medium: $font-weight-medium,
  bold: $font-weight-bold,
  semi-bold: $font-weight-semi-bold,
  "black": $font-weight-black,
) !default;

Used By

• @mixin css-utils

text-alignments

$text-alignments: left center right !default;

Used By

• @mixin css-utils

text-decorations

$text-decorations: underline overline line-through none !default;

Used By

• @mixin css-utils

text-transforms

$text-transforms: capitalize uppercase lowercase !default;

Used By

• @mixin css-utils

font-styles

$font-styles: normal italic oblique !default;

Used By

• @mixin css-utils

font-family

$font-family: Roboto, sans-serif !default;

Examples

Changing the Font

@use "@react-md/core" with (
  $font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
);

Used By

• @mixin typography-variables

font-size

$font-size: 1rem !default;

font-weight

$font-weight: $font-weight-regular !default;

Used By

• @mixin css-utils
• @mixin typography-variables

line-height

$line-height: 1.5rem !default;

base-recommended-font-styles

$base-recommended-font-styles: (
  font-family: var(--rmd-font-family),
  overflow: inherit,
  overflow-wrap: break-word,
  text-overflow: inherit,
  -moz-osx-font-smoothing: grayscale,
  -webkit-font-smoothing: antialiased,
);

base-custom-font-styles

$base-custom-font-styles: () !default;

base-font-styles

$base-font-styles: map.merge(
  $base-recommended-font-styles,
  $base-custom-font-styles
);

Used By

• @mixin avatar-styles
• @mixin typography-base-styles

headline-1-recommended-styles

$headline-1-recommended-styles: (
  font-size: 6rem,
  line-height: 6rem,
  font-weight: map.get($font-weights, light),
  letter-spacing: _get-letter-spacing(-1.5, 6),
);

headline-1-custom-styles

$headline-1-custom-styles: () !default;

headline-1-styles

$headline-1-styles: map.merge(
  $headline-1-recommended-styles,
  $headline-1-custom-styles
) !default;

Used By

• @mixin typography-base-styles

headline-2-recommended-styles

$headline-2-recommended-styles: (
  font-size: 3.75rem,
  line-height: 3.75rem,
  font-weight: map.get($font-weights, light),
  letter-spacing: _get-letter-spacing(-0.5, 3.75),
);

headline-2-custom-styles

$headline-2-custom-styles: () !default;

headline-2-styles

$headline-2-styles: map.merge(
  $headline-2-recommended-styles,
  $headline-2-custom-styles
) !default;

Used By

• @mixin typography-base-styles

headline-3-recommended-styles

$headline-3-recommended-styles: (
  font-size: 3rem,
  line-height: 3.125rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: normal,
);

headline-3-custom-styles

$headline-3-custom-styles: () !default;

headline-3-styles

$headline-3-styles: map.merge(
  $headline-3-recommended-styles,
  $headline-3-custom-styles
) !default;

Used By

• @mixin typography-base-styles

headline-4-recommended-styles

$headline-4-recommended-styles: (
  font-size: 2.125rem,
  line-height: 2.5rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: _get-letter-spacing(0.25, 2.125),
);

headline-4-custom-styles

$headline-4-custom-styles: () !default;

headline-4-styles

$headline-4-styles: map.merge(
  $headline-4-recommended-styles,
  $headline-4-custom-styles
) !default;

Used By

• @mixin typography-base-styles

headline-5-recommended-styles

$headline-5-recommended-styles: (
  font-size: 1.5rem,
  line-height: 2rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: normal,
);

headline-5-custom-styles

$headline-5-custom-styles: () !default;

headline-5-styles

$headline-5-styles: map.merge(
  $headline-5-recommended-styles,
  $headline-5-custom-styles
) !default;

Used By

• @mixin typography-base-styles

headline-6-recommended-styles

$headline-6-recommended-styles: (
  font-size: 1.25rem,
  line-height: 2rem,
  font-weight: map.get($font-weights, medium),
  letter-spacing: _get-letter-spacing(0.25, 1.25),
);

headline-6-custom-styles

$headline-6-custom-styles: () !default;

headline-6-styles

$headline-6-styles: map.merge(
  $headline-6-recommended-styles,
  $headline-6-custom-styles
) !default;

Used By

• @mixin typography-base-styles
• @mixin link-styles

subtitle-1-recommended-styles

$subtitle-1-recommended-styles: (
  font-size: 1rem,
  line-height: 1.75rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: _get-letter-spacing(0.15, 1),
);

subtitle-1-custom-styles

$subtitle-1-custom-styles: () !default;

subtitle-1-styles

$subtitle-1-styles: map.merge(
  $subtitle-1-recommended-styles,
  $subtitle-1-custom-styles
) !default;

Used By

• @mixin typography-base-styles

subtitle-2-recommended-styles

$subtitle-2-recommended-styles: (
  font-size: 0.875rem,
  line-height: 1.375rem,
  font-weight: map.get($font-weights, medium),
  letter-spacing: _get-letter-spacing(0.1, 0.875),
);

subtitle-2-custom-styles

$subtitle-2-custom-styles: () !default;

subtitle-2-styles

$subtitle-2-styles: map.merge(
  $subtitle-2-recommended-styles,
  $subtitle-2-custom-styles
) !default;

Used By

• @mixin typography-base-styles
• @mixin list-styles

body-1-recommended-styles

$body-1-recommended-styles: (
  font-size: 1rem,
  line-height: 1.5rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: _get-letter-spacing(0.5, 0.875),
);

body-1-custom-styles

$body-1-custom-styles: () !default;

body-1-styles

$body-1-styles: map.merge(
  $body-1-recommended-styles,
  $body-1-custom-styles
) !default;

Used By

• @mixin typography-base-styles

body-2-recommended-styles

$body-2-recommended-styles: (
  font-size: 0.875rem,
  line-height: 1.25rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: _get-letter-spacing(0.25, 0.875),
);

body-2-custom-styles

$body-2-custom-styles: () !default;

body-2-styles

$body-2-styles: map.merge(
  $body-2-recommended-styles,
  $body-2-custom-styles
) !default;

Used By

• @mixin typography-base-styles

caption-recommended-styles

$caption-recommended-styles: (
  font-size: 0.75rem,
  line-height: 1.25rem,
  font-weight: map.get($font-weights, regular),
  letter-spacing: _get-letter-spacing(0.4, 0.75),
);

caption-custom-styles

$caption-custom-styles: () !default;

caption-styles

$caption-styles: map.merge(
  $caption-recommended-styles,
  $caption-custom-styles
) !default;

Used By

• @mixin typography-base-styles

overline-recommended-styles

$overline-recommended-styles: (
  font-size: 0.75rem,
  line-height: 2rem,
  font-weight: map.get($font-weights, medium),
  letter-spacing: _get-letter-spacing(2, 0.75),
);

overline-custom-styles

$overline-custom-styles: () !default;

overline-styles

$overline-styles: map.merge(
  $overline-recommended-styles,
  $overline-custom-styles
) !default;

Used By

• @mixin typography-base-styles

button-recommended-styles

$button-recommended-styles: map.merge(
  $base-font-styles,
  (
    font-size: 0.875rem,
    font-weight: map.get($font-weights, medium),
    letter-spacing: _get-letter-spacing(1.25, 0.875),
    line-height: 2.25rem,
    // buttons with multiple lines of text look terrible because of the large
    // line-height. You normally want to use a different component if the
    // clickable area has so much content to line-wrap
    line-wrap: nowrap,
  )
);

button-custom-styles

$button-custom-styles: () !default;

button-styles

$button-styles: map.merge(
  $button-recommended-styles,
  $button-custom-styles
) !default;

Used By

• @mixin button-text-styles

mark-recommended-styles

$mark-recommended-styles: (
  background: transparent,
  color: var(--rmd-mark-color, theme.theme-get-var(inverse-color)),
  font: inherit,
  font-weight: $font-weight-bold,
);

mark-custom-styles

$mark-custom-styles: () !default;

mark-styles

$mark-styles: map.merge($mark-recommended-styles, $mark-custom-styles) !default;

Used By

• @mixin typography-mark-styles

text-container-padding

$text-container-padding: 1rem !default;

Used By

• @mixin typography-variables

text-line-length

$text-line-length: calc(65ch + $text-container-padding * 2) !default;

Used By

• @mixin typography-variables

typography-variables

$typography-variables: (
  line-length,
  text-container-padding,
  font-size,
  font-family,
  font-weight,
  line-height,
  mark-color
);

Used By

• @function typography-get-var
• @mixin typography-set-var

Mixins

typography-set-var

@mixin typography-set-var($name, $value) { … }

Used By

• @mixin typography-variables

Requires

• @function get-var-name
• @mixin typography-variables

typography-use-var

@mixin typography-use-var($property, $name: $property, $fallback: null) { … }

Used By

• @mixin typography-text-container-styles
• @mixin typography-html-body-styles

Requires

• @function typography-get-var

typography-text-container-styles

@mixin typography-text-container-styles($disable-layer: false, $disabled: $disable-text-container) { … }

See Also

• @mixin typography-styles

Used By

• @mixin typography-styles

Requires

• @mixin typography-use-var

typography-base-styles

@mixin typography-base-styles($disable-layer: false) { … }

See Also

• @mixin typography-styles

Used By

• @mixin typography-styles

Requires

• $base-font-styles
• $disable-headline-1
• $headline-1-styles
• $disable-headline-2
• $headline-2-styles
• $disable-headline-3
• $headline-3-styles
• $disable-headline-4
• $headline-4-styles
• $disable-headline-5
• $headline-5-styles
• $disable-headline-6
• $headline-6-styles
• $disable-subtitle-1
• $subtitle-1-styles
• $disable-subtitle-2
• $subtitle-2-styles
• $disable-body-1
• $body-1-styles
• $disable-body-2
• $body-2-styles
• $disable-caption
• $caption-styles
• $disable-overline
• $overline-styles

typography-mark-styles

@mixin typography-mark-styles($disable-layer: false, $disabled: $disable-mark) { … }

See Also

• @mixin typography-styles

Used By

• @mixin typography-styles

Requires

• $mark-styles

text-overflow

@mixin text-overflow($white-space: nowrap) { … }

line-clamp

@mixin line-clamp($lines: 2) { … }

typography-variables

@mixin typography-variables { … }

Requires

• @mixin typography-set-var
• $font-family
• $avatar-font-size
• $font-weight
• $avatar-line-height
• $disable-text-container
• $text-line-length
• $text-container-padding

typography-html-body-styles

@mixin typography-html-body-styles { … }

Requires

• @mixin typography-use-var

typography-styles

@mixin typography-styles($disable-layer: false) { … }

Requires

• @mixin typography-text-container-styles
• @mixin typography-base-styles
• @mixin typography-mark-styles

Functions

typography-get-var

@function typography-get-var($name, $fallback: null) { … }

Returns — String

Used By

• @mixin typography-use-var

Requires

• @function get-var-name
• @mixin typography-variables

Set this to true to disable the styles for the TextContainer component

Set this to true to disable the Mark component styles.

Set this to true to disable the headline-1 typography styles

Set this to true to disable the headline-2 typography styles

Set this to true to disable the headline-3 typography styles

Set this to true to disable the headline-4 typography styles

Set this to true to disable the headline-5 typography styles

Set this to true to disable the headline-6 typography styles

Set this to true to disable the subtitle-1 typography styles

Set this to true to disable the subtitle-2 typography styles

Set this to true to disable the body-1 typography styles

Set this to true to disable the body-2 typography styles

Set this to true to disable the caption typography styles

Set this to true to disable the overline typography styles

The thin font-weight.

The light font-weight.

The regular font-weight.

The medium font-weight.

The bold font-weight.

The semi-bold font-weight.

The black font-weight.

A Map of all the font weights.

Use to generate the cssUtils({ textAlignment }) styles and is applied to text-align.

Use to generate the cssUtils({ textDecoration }) styles and is applied to text-decoration.

Use to generate the cssUtils({ textTransform }) styles and is applied to text-transform.

Use to generate the cssUtils({ fontStyle }) styles and is applied to font-style.

The font family to use throughout the entire application.

The default font-size to use throughout the app. This probably shouldn't change.

The default font-weight to use throughout the app. This probably shouldn't change.

The default line-height to use throughout the app.

The base styles for typography.

An optional Map of styles that will be applied to all Typography styles. If a key is provided in this Map, it will override the $base-recommended-font-styles value.

The default typography styles.

The default recommended headline-1 typography styles.

An optional Map of styles that will be applied to all headline-1 styles. If a key is provided in this Map, it will override the $headline-1-recommended-styles value.

The default headline-1 typography styles.

The default recommended headline-2 typography styles.

An optional Map of styles that will be applied to all headline-2 styles. If a key is provided in this Map, it will override the $headline-2-recommended-styles value.

The default headline-2 typography styles.

The default recommended headline-3 typography styles.

An optional Map of styles that will be applied to all headline-3 styles. If a key is provided in this Map, it will override the $headline-3-recommended-styles value.

The default headline-3 typography styles.

The default recommended headline-4 typography styles.

An optional Map of styles that will be applied to all headline-4 styles. If a key is provided in this Map, it will override the $headline-4-recommended-styles value.

The default headline-4 typography styles.

The default recommended headline-5 typography styles.

An optional Map of styles that will be applied to all headline-5 styles. If a key is provided in this Map, it will override the $headline-5-recommended-styles value.

The default headline-5 typography styles.

The default recommended headline-6 typography styles.

An optional Map of styles that will be applied to all headline-6 styles. If a key is provided in this Map, it will override the $headline-6-recommended-styles value.

The default headline-6 typography styles.

The default recommended subtitle-1 typography styles.

An optional Map of styles that will be applied to all subtitle-1 styles. If a key is provided in this Map, it will override the $subtitle-1-recommended-styles value.

The default subtitle-1 typography styles.

The default recommended subtitle-2 typography styles.

An optional Map of styles that will be applied to all subtitle-2 styles. If a key is provided in this Map, it will override the $subtitle-2-recommended-styles value.

The default subtitle-2 typography styles.

The default recommended body-1 typography styles.

An optional Map of styles that will be applied to all body-1 styles. If a key is provided in this Map, it will override the $body-1-recommended-styles value.

The default body-1 typography styles.

The default recommended body-2 typography styles.

An optional Map of styles that will be applied to all body-2 styles. If a key is provided in this Map, it will override the $body-2-recommended-styles value.

The default body-2 typography styles.

The default recommended caption typography styles.

An optional Map of styles that will be applied to all caption styles. If a key is provided in this Map, it will override the $caption-recommended-styles value.

The default caption typography styles.

The default recommended overline typography styles.

An optional Map of styles that will be applied to all overline styles. If a key is provided in this Map, it will override the $overline-recommended-styles value.

The default overline typography styles.

The default recommended button typography styles.

An optional Map of styles that will be applied to all button styles. If a key is provided in this Map, it will override the $button-recommended-styles value.

The default button typography styles.

The default recommended mark typography styles.

An optional Map of styles that will be applied to all mark styles. If a key is provided in this Map, it will override the $mark-recommended-styles value.

The default mark typography styles.

The default padding to apply to the TextContainer.

The TextContainer line length. Since everything has box-sizing: border-box, make sure the width is 65 characters + left and right padding so the text is really 65ch.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

This should only be used if not using the typography-styles mixin.

Set to true to prevent the styles from being wrapped in a @layer declaration.

Set to true to prevent any styles from being generated.

This should only be used if not using the typography-styles mixin.

Set to true to prevent the styles from being wrapped in a @layer declaration.

This should only be used if not using the typography-styles mixin.

Set to true to prevent the styles from being wrapped in a @layer declaration.

Set to true to prevent any styles from being generated.

Used to enable text-overflow for an element.

the white-space value.

Used to apply line-clamp to an element.

The max number of lines before applying the text-overflow behavior.

Conditionally applies the css variables based on feature flags

This should only be used if not using the core.styles and core.css-reset mixins.

Generates all the styles based on feature flags.

Set to true to prevent the styles from being wrapped in a @layer declaration.

a var() statement

The supported variable name

An optional fallback value