Boolean
$disable-text-container: false !default;
Boolean
$disable-mark: false !default;
Boolean
$disable-headline-1: false !default;
Boolean
$disable-headline-2: false !default;
Boolean
$disable-headline-3: false !default;
Boolean
$disable-headline-4: false !default;
Boolean
$disable-headline-5: false !default;
Boolean
$disable-headline-6: false !default;
Boolean
$disable-subtitle-1: false !default;
Boolean
$disable-subtitle-2: false !default;
Boolean
$disable-body-1: false !default;
Boolean
$disable-body-2: false !default;
Boolean
$disable-caption: false !default;
Boolean
$disable-overline: false !default;
Number
$font-weight-thin: 100 !default;
Number
$font-weight-light: 300 !default;
Number
$font-weight-regular: 400 !default;
Number
$font-weight-medium: 500 !default;
Number
$font-weight-bold: 700 !default;
Number
$font-weight-semi-bold: 800 !default;
Number
$font-weight-black: 900 !default;
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;
List
$text-alignments: left center right !default;
List
$text-decorations: underline overline line-through none !default;
List
$text-transforms: capitalize uppercase lowercase !default;
List
$font-styles: normal italic oblique !default;
String
$font-family: Roboto, sans-serif !default;
@use "@react-md/core" with (
$font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
);
Number
$font-size: 1rem !default;
Number
$font-weight: $font-weight-regular !default;
Number
$line-height: 1.5rem !default;
Map
$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,
);
Map
$base-custom-font-styles: () !default;
Map
$base-font-styles: map.merge(
$base-recommended-font-styles,
$base-custom-font-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),
);
Map
$headline-1-custom-styles: () !default;
Map
$headline-1-styles: map.merge(
$headline-1-recommended-styles,
$headline-1-custom-styles
) !default;
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),
);
Map
$headline-2-custom-styles: () !default;
Map
$headline-2-styles: map.merge(
$headline-2-recommended-styles,
$headline-2-custom-styles
) !default;
Map
$headline-3-recommended-styles: (
font-size: 3rem,
line-height: 3.125rem,
font-weight: map.get($font-weights, regular),
letter-spacing: normal,
);
Map
$headline-3-custom-styles: () !default;
Map
$headline-3-styles: map.merge(
$headline-3-recommended-styles,
$headline-3-custom-styles
) !default;
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),
);
Map
$headline-4-custom-styles: () !default;
Map
$headline-4-styles: map.merge(
$headline-4-recommended-styles,
$headline-4-custom-styles
) !default;
Map
$headline-5-recommended-styles: (
font-size: 1.5rem,
line-height: 2rem,
font-weight: map.get($font-weights, regular),
letter-spacing: normal,
);
Map
$headline-5-custom-styles: () !default;
Map
$headline-5-styles: map.merge(
$headline-5-recommended-styles,
$headline-5-custom-styles
) !default;
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),
);
Map
$headline-6-custom-styles: () !default;
Map
$headline-6-styles: map.merge(
$headline-6-recommended-styles,
$headline-6-custom-styles
) !default;
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),
);
Map
$subtitle-1-custom-styles: () !default;
Map
$subtitle-1-styles: map.merge(
$subtitle-1-recommended-styles,
$subtitle-1-custom-styles
) !default;
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),
);
Map
$subtitle-2-custom-styles: () !default;
Map
$subtitle-2-styles: map.merge(
$subtitle-2-recommended-styles,
$subtitle-2-custom-styles
) !default;
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),
);
Map
$body-1-custom-styles: () !default;
Map
$body-1-styles: map.merge(
$body-1-recommended-styles,
$body-1-custom-styles
) !default;
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),
);
Map
$body-2-custom-styles: () !default;
Map
$body-2-styles: map.merge(
$body-2-recommended-styles,
$body-2-custom-styles
) !default;
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),
);
Map
$caption-custom-styles: () !default;
Map
$caption-styles: map.merge(
$caption-recommended-styles,
$caption-custom-styles
) !default;
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),
);
Map
$overline-custom-styles: () !default;
Map
$overline-styles: map.merge(
$overline-recommended-styles,
$overline-custom-styles
) !default;
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,
)
);
Map
$button-custom-styles: () !default;
Map
$button-styles: map.merge(
$button-recommended-styles,
$button-custom-styles
) !default;
Map
$mark-recommended-styles: (
background: transparent,
color: var(--rmd-mark-color, theme.theme-get-var(inverse-color)),
font: inherit,
font-weight: $font-weight-bold,
);
Map
$mark-custom-styles: () !default;
Map
$mark-styles: map.merge($mark-recommended-styles, $mark-custom-styles) !default;
Number
$text-container-padding: 1rem !default;
Number
$text-line-length: calc(65ch + $text-container-padding * 2) !default;
List
$typography-variables: (
line-length,
text-container-padding,
font-size,
font-family,
font-weight,
line-height,
mark-color
);
mixin
@mixin typography-set-var($name, $value) { … }
mixin
@mixin typography-use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin typography-text-container-styles($disable-layer: false, $disabled: $disable-text-container) { … }
Name | Description | Type | Default Value |
---|---|---|---|
$disable-layer | Boolean | false | |
$disabled | Boolean | $disable-text-container |
mixin
@mixin typography-base-styles($disable-layer: false) { … }
mixin
@mixin typography-mark-styles($disable-layer: false, $disabled: $disable-mark) { … }
mixin
@mixin text-overflow($white-space: nowrap) { … }
mixin
@mixin line-clamp($lines: 2) { … }
mixin
@mixin typography-variables { … }
mixin
@mixin typography-html-body-styles { … }
mixin
@mixin typography-styles($disable-layer: false) { … }
function
@function typography-get-var($name, $fallback: null) { … }
String
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