Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@material/typography
Advanced tools
@material/typography - npm Package Compare versions
Comparing version 0.34.0 to 0.35.0
| { | ||
| "name": "@material/typography", | ||
| "description": "Typography classes, mixins, and variables for Material Components for the web", | ||
| "version": "0.34.0", | ||
| "version": "0.35.0", | ||
| "license": "Apache-2.0", | ||
@@ -6,0 +6,0 @@ "keywords": [ |
114
README.md
@@ -14,28 +14,18 @@ <!--docs: | ||
| MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from ten styles: | ||
| MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles: | ||
| * Display 4 | ||
| * Display 3 | ||
| * Display 2 | ||
| * Display 1 | ||
| * Headline | ||
| * Title | ||
| * Subheading 2 | ||
| * Subheading 1 | ||
| * Headline 1 | ||
| * Headline 2 | ||
| * Headline 3 | ||
| * Headline 4 | ||
| * Headline 5 | ||
| * Headline 6 | ||
| * Subtitle 1 | ||
| * Subtitle 2 | ||
| * Body 1 | ||
| * Body 2 | ||
| * Body 1 | ||
| * Caption | ||
| * Button | ||
| * Overline | ||
| ### Usage | ||
| ```html | ||
| <head> | ||
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> | ||
| </head> | ||
| <body class="mdc-typography"> | ||
| <h1 class="mdc-typography--display4">Big header</h1> | ||
| </body> | ||
| ``` | ||
| ## Design & API Documentation | ||
@@ -60,4 +50,2 @@ | ||
| ### Load Roboto | ||
| We recommend you load Roboto from Google Fonts | ||
@@ -70,3 +58,3 @@ | ||
| <body class="mdc-typography"> | ||
| <h1 class="mdc-typography--display4">Big header</h1> | ||
| <h1 class="mdc-typography--headline1">Big header</h1> | ||
| </body> | ||
@@ -84,14 +72,15 @@ ``` | ||
| `mdc-typography` | Sets the font to Roboto | ||
| `mdc-typography--display4` | Sets font properties as Display 4 | ||
| `mdc-typography--display3` | Sets font properties as Display 3 | ||
| `mdc-typography--display2` | Sets font properties as Display 2 | ||
| `mdc-typography--display1` | Sets font properties as Display 1 | ||
| `mdc-typography--headline` | Sets font properties as Headline | ||
| `mdc-typography--title` | Sets font properties as Title | ||
| `mdc-typography--subheading2` | Sets font properties as Subheading 2 | ||
| `mdc-typography--subheading1` | Sets font properties as Subheading 1 | ||
| `mdc-typography--headline1` | Sets font properties as Headline 1 | ||
| `mdc-typography--headline2` | Sets font properties as Headline 2 | ||
| `mdc-typography--headline3` | Sets font properties as Headline 3 | ||
| `mdc-typography--headline4` | Sets font properties as Headline 4 | ||
| `mdc-typography--headline5` | Sets font properties as Headline 5 | ||
| `mdc-typography--headline6` | Sets font properties as Headline 6 | ||
| `mdc-typography--subtitle1` | Sets font properties as Subtitle 1 | ||
| `mdc-typography--subtitle2` | Sets font properties as Subtitle 2 | ||
| `mdc-typography--body1` | Sets font properties as Body 1 | ||
| `mdc-typography--body2` | Sets font properties as Body 2 | ||
| `mdc-typography--body1` | Sets font properties as Body 1 | ||
| `mdc-typography--caption` | Sets font properties as Caption | ||
| `mdc-typography--button` | Sets font properties as Button | ||
| `mdc-typography--overline` | Sets font properties as Overline | ||
@@ -110,15 +99,54 @@ ### Sass Variables and Mixins | ||
| These styles can be used as the `$style` argument for `mdc-typography` mixin. | ||
| These styles can be used as the `$style` argument for the `mdc-typography` mixin. | ||
| * `display4` | ||
| * `display3` | ||
| * `display2` | ||
| * `display1` | ||
| * `headline` | ||
| * `title` | ||
| * `subheading2` | ||
| * `subheading1` | ||
| * `headline1` | ||
| * `headline2` | ||
| * `headline3` | ||
| * `headline4` | ||
| * `headline5` | ||
| * `headline6` | ||
| * `subtitle1` | ||
| * `subtitle2` | ||
| * `body1` | ||
| * `body2` | ||
| * `body1` | ||
| * `caption` | ||
| * `button` | ||
| * `overline` | ||
| #### Overriding Styles | ||
| All styles can be overridden using Sass global variables _before_ the component is imported by setting a global | ||
| variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties | ||
| you want to override for a particular style. | ||
| Example: Overriding the button `font-size` and `text-transform` properties. | ||
| ```scss | ||
| $mdc-typography-styles-button: ( | ||
| font-size: 16px, | ||
| text-transform: none, | ||
| ); | ||
| @import "@material/button/mdc-button"; | ||
| ``` | ||
| Example: Overriding the global `font-family` property. | ||
| ```scss | ||
| $mdc-typography-font-family: "Arial, Helvetica, sans-serif"; | ||
| ... | ||
| @import ... | ||
| ``` | ||
| Example: Overriding the `font-family` property for `headline1` and `headline2`. | ||
| ```scss | ||
| $mdc-typography-styles-headline1: ( | ||
| font-family: "Arial, Helvetica, sans-serif"; | ||
| ); | ||
| $mdc-typography-styles-headline2: ( | ||
| font-family: "Arial, Helvetica, sans-serif"; | ||
| ); | ||
| ... | ||
| @import ... | ||
| ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by26.74%
20843
- Number of package files
- increased by14.29%
8
- Lines of code
- increased by4.73%
155
- Number of lines in readme file
- increased by23.33%
148
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes