All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
import type when possible
(ba96bb6)eslint
(8111cd3)Typography
(30cf056)prettier after upgrading to v2.4.0
(06110af)stylelint
(22d1598)lib.d.tsprop-types package.sassdoc for new module system
(4746d26)yarn format to include new files
(48d3d7f)sassdoc and variables to use
everything.scss
(a0f0699)sass
(5376be1)Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
typedoc
(cf54c35)Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
Note: Version bump only for package @react-md/typography
sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
The typography package is kind of new for the v2 release since there weren't any
components beforehand for typography. This package exports three components:
Text, TextContainer, and SrOnly. The Text component can be used to
render any of the typography styles. The TextContainer component is used to
create a centered block of text that uses the recommended line-width for
legibility on different device sizes. Finally, the SrOnly component allows for
text to only be visible to screen readers.
In addition, the naming for the different typography styles have been renamed for the updated Material Design guidelines for typography.
All the default typography styles can be configured by declaring global variables that will be merged with the recommended values:
$rmd-typography-headline-1$rmd-typography-headline-2$rmd-typography-headline-3$rmd-typography-headline-4$rmd-typography-headline-5$rmd-typography-headline-6$rmd-typography-subtitle-1$rmd-typography-subtitle-2$rmd-typography-body-1$rmd-typography-body-2$rmd-typography-button$rmd-typography-caption$rmd-typography-overlinepx to rem and em for typographytransition-timing-function that was applied to all
elements and pseudo elementsmin-width and font-size on the htmlhtml and body that is in the
@react-md/utils package nowreact-md-typography-utilities mixin$rmd-typography-text-container-breakpoint: 37.5rem !default - breakpoint to
use for switching the typography max line-length from mobile to desktop$rmd-typography-font-weights - a map of all the available font weights which
can be overridden$rmd-typography-default-font-weights: light regular medium bold !default all
the default available font weights$rmd-typography-thin: 100 default - the thin font weight value$rmd-typography-black: 900 !default - the darkest font weight value@function rmd-typography-theme - gets one of the theme values and validates
that the theme name is valid@function rmd-typography-theme-var - gets one of the theme values as a css
variable with a fallback value and validates that the theme name is valid@function rmd-typography-value - most likely mostly internal, but allows you
to get one of the typography values based on the type@mixin rmd-typography-theme - applies one of the theme values to a css
property as a css variable@mixin rmd-typography-theme-update-var - updates one of the theme values as
a css variable@mixin rmd-typography-value - applies the specifified typography type to an
element with an optional list of properties to use@mixin rmd-typography-base - applies the base typography to an element@mixin rmd-typography - the inverse of rmd-typography-value that will
default to apply all styles to an element@mixin rmd-text-container-base - the default styles for creating a text
container@mixin rmd-text-container-auto- generally used with the
rmd-text-container-base mixin to automatically update the max line-width
based on media size@mixin rmd-text-overflow-ellispis - updates a class name or selector so that
long text will be overflown with an ellipsis$md-font-family was renamed to $rmd-typography-font-family but keeps the
same default value of Roboto, sans-serif$md-typography-max-line-length was renamed and split into
$rmd-typography-mobile-max-line-length and
$rmd-typography-desktop-max-line-length with defaults of 17em and 40em
respectively$md-font-light was renamed to $rmd-typography-light$md-font-regular was renamed to $rmd-typography-regular$md-font-medium was renamed to $rmd-typography-medium$md-font-bold was renamed to $rmd-typography-bold$md-font-semibold was renamed to $rmd-typography-semi-bold and changed the
default value from 600 to 800host-google-font was renamed to rmd-typography-host-google-fonthost-material-icons was renamed to rmd-icon-host-google-icons but is now
part of the @react-md/icon package$md-typography-extended since global namespace is no longer touched$md-typography-include-text-container since it is always created now
for the TextContainer component$md-typography-include-utilities since there are no longer any
utilities$md-font-name variable$md-html-min-width variable$md-display-4-font-size$md-display-4-line-height$md-display-3-font-size$md-display-3-line-height$md-display-2-font-size$md-display-2-line-height$md-display-1-font-size$md-display-1-line-height$md-headline-font-size$md-headline-line-height$md-title-font-size$md-title-line-height$md-subheading-mobile-font-size$md-subheading-desktop-font-size:$md-subheading-2-line-height$md-subheading-1-line-height$md-body-mobile-font-size$md-body-desktop-font-size$md-body-2-line-height$md-body-1-line-height$md-caption-font-size$md-font-size-base and $md-line-height variablesreact-md-typography-mobile, react-md-typography-desktop, and
react-md-typography-media mixins since the typography no longer changes
based on device sizereact-md-theme-typography mixin