Boolean$disable-text-container: false !default;Set this to true to disable the styles for the TextContainer component
Boolean$disable-mark: false !default;Set this to true to disable the Mark component styles.
Boolean$disable-headline-1: false !default;Set this to true to disable the headline-1 typography styles
Boolean$disable-headline-2: false !default;Set this to true to disable the headline-2 typography styles
Boolean$disable-headline-3: false !default;Set this to true to disable the headline-3 typography styles
Boolean$disable-headline-4: false !default;Set this to true to disable the headline-4 typography styles
Boolean$disable-headline-5: false !default;Set this to true to disable the headline-5 typography styles
Boolean$disable-headline-6: false !default;Set this to true to disable the headline-6 typography styles
Boolean$disable-subtitle-1: false !default;Set this to true to disable the subtitle-1 typography styles
Boolean$disable-subtitle-2: false !default;Set this to true to disable the subtitle-2 typography styles
Boolean$disable-body-1: false !default;Set this to true to disable the body-1 typography styles
Boolean$disable-body-2: false !default;Set this to true to disable the body-2 typography styles
Boolean$disable-caption: false !default;Set this to true to disable the caption typography styles
Boolean$disable-overline: false !default;Set this to true to disable the overline typography styles
Number$font-weight-thin: 100 !default;The thin font-weight.
Number$font-weight-light: 300 !default;The light font-weight.
Number$font-weight-regular: 400 !default;The regular font-weight.
Number$font-weight-medium: 500 !default;The medium font-weight.
Number$font-weight-bold: 700 !default;The bold font-weight.
Number$font-weight-semi-bold: 800 !default;The semi-bold font-weight.
Number$font-weight-black: 900 !default;The black font-weight.
Map$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;A Map of all the font weights.
List$text-alignments: left center right !default;Use to generate the cssUtils({ textAlignment }) styles and is applied to
text-align.
List$text-decorations: underline overline line-through none !default;Use to generate the cssUtils({ textDecoration }) styles and is applied to
text-decoration.
List$text-transforms: capitalize uppercase lowercase !default;Use to generate the cssUtils({ textTransform }) styles and is applied to
text-transform.
List$font-styles: normal italic oblique !default;Use to generate the cssUtils({ fontStyle }) styles and is applied to
font-style.
String$font-family: Roboto, sans-serif !default;The font family to use throughout the entire application.
@use "@react-md/core" with (
$font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
);Number$font-size: 1rem !default;The default font-size to use throughout the app. This probably shouldn't change.
Number$font-weight: $font-weight-regular !default;The default font-weight to use throughout the app. This probably shouldn't change.
Number$line-height: 1.5rem !default;The default line-height to use throughout the app.
Map$base-recommended-font-styles: (
font-family: var(--rmd-font-family),
overflow-wrap: break-word,
text-overflow: inherit,
-moz-osx-font-smoothing: grayscale,
-webkit-font-smoothing: antialiased,
);The base styles for typography.
Map$base-custom-font-styles: () !default;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.
Map$base-font-styles: map.merge(
$base-recommended-font-styles,
$base-custom-font-styles
);The default typography styles.
Map$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),
);The default recommended headline-1 typography styles.
Map$headline-1-custom-styles: () !default;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.
Map$headline-1-styles: map.merge(
$headline-1-recommended-styles,
$headline-1-custom-styles
) !default;The default headline-1 typography styles.
Map$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),
);The default recommended headline-2 typography styles.
Map$headline-2-custom-styles: () !default;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.
Map$headline-2-styles: map.merge(
$headline-2-recommended-styles,
$headline-2-custom-styles
) !default;The default headline-2 typography styles.
Map$headline-3-recommended-styles: (
font-size: 3rem,
line-height: 3.125rem,
font-weight: map.get($font-weights, regular),
letter-spacing: normal,
);The default recommended headline-3 typography styles.
Map$headline-3-custom-styles: () !default;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.
Map$headline-3-styles: map.merge(
$headline-3-recommended-styles,
$headline-3-custom-styles
) !default;The default headline-3 typography styles.
Map$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),
);The default recommended headline-4 typography styles.
Map$headline-4-custom-styles: () !default;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.
Map$headline-4-styles: map.merge(
$headline-4-recommended-styles,
$headline-4-custom-styles
) !default;The default headline-4 typography styles.
Map$headline-5-recommended-styles: (
font-size: 1.5rem,
line-height: 2rem,
font-weight: map.get($font-weights, regular),
letter-spacing: normal,
);The default recommended headline-5 typography styles.
Map$headline-5-custom-styles: () !default;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.
Map$headline-5-styles: map.merge(
$headline-5-recommended-styles,
$headline-5-custom-styles
) !default;The default headline-5 typography styles.
Map$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),
);The default recommended headline-6 typography styles.
Map$headline-6-custom-styles: () !default;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.
Map$headline-6-styles: map.merge(
$headline-6-recommended-styles,
$headline-6-custom-styles
) !default;The default headline-6 typography styles.
Map$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),
);The default recommended subtitle-1 typography styles.
Map$subtitle-1-custom-styles: () !default;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.
Map$subtitle-1-styles: map.merge(
$subtitle-1-recommended-styles,
$subtitle-1-custom-styles
) !default;The default subtitle-1 typography styles.
Map$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),
);The default recommended subtitle-2 typography styles.
Map$subtitle-2-custom-styles: () !default;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.
Map$subtitle-2-styles: map.merge(
$subtitle-2-recommended-styles,
$subtitle-2-custom-styles
) !default;The default subtitle-2 typography styles.
Map$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),
);The default recommended body-1 typography styles.
Map$body-1-custom-styles: () !default;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.
Map$body-1-styles: map.merge(
$body-1-recommended-styles,
$body-1-custom-styles
) !default;The default body-1 typography styles.
Map$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),
);The default recommended body-2 typography styles.
Map$body-2-custom-styles: () !default;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.
Map$body-2-styles: map.merge(
$body-2-recommended-styles,
$body-2-custom-styles
) !default;The default body-2 typography styles.
Map$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),
);The default recommended caption typography styles.
Map$caption-custom-styles: () !default;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.
Map$caption-styles: map.merge(
$caption-recommended-styles,
$caption-custom-styles
) !default;The default caption typography styles.
Map$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),
);The default recommended overline typography styles.
Map$overline-custom-styles: () !default;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.
Map$overline-styles: map.merge(
$overline-recommended-styles,
$overline-custom-styles
) !default;The default overline typography styles.
Map$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,
)
);The default recommended button typography styles.
Map$button-custom-styles: () !default;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.
Map$button-styles: map.merge(
$button-recommended-styles,
$button-custom-styles
) !default;The default button typography styles.
Map$mark-recommended-styles: (
background: transparent,
color: var(--rmd-mark-color, theme.theme-get-var(inverse-color)),
font: inherit,
font-weight: $font-weight-bold,
);The default recommended mark typography styles.
Map$mark-custom-styles: () !default;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.
Map$mark-styles: map.merge($mark-recommended-styles, $mark-custom-styles) !default;The default mark typography styles.
Number$text-container-padding: 1rem !default;The default padding to apply to the TextContainer.
Number$text-line-length: calc(65ch + $text-container-padding * 2) !default;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.
List$typography-variables: (
line-length,
text-container-padding,
font-size,
font-family,
font-weight,
line-height,
mark-color
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin typography-set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin typography-use-var($property, $name: $property, $fallback: null) { … }mixin@mixin typography-text-container-styles($disable-layer: false, $disabled: $disable-text-container) { … }This should only be used if not using the typography-styles mixin.
mixin@mixin typography-base-styles($disable-layer: false) { … }This should only be used if not using the typography-styles mixin.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set to | Boolean | false |
mixin@mixin typography-mark-styles($disable-layer: false, $disabled: $disable-mark) { … }This should only be used if not using the typography-styles mixin.
mixin@mixin text-overflow($white-space: nowrap) { … }Used to enable text-overflow for an element.
mixin@mixin line-clamp($lines: 2) { … }Used to apply line-clamp to an element.
| Name | Description | Type | Default Value |
|---|---|---|---|
$lines | The max number of lines before applying the text-overflow behavior. | Number | 2 |
mixin@mixin typography-variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin typography-html-body-styles { … }This should only be used if not using the core.styles and
core.css-reset mixins.
mixin@mixin typography-styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set to | Boolean | false |
function@function typography-get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |