@material/theme - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

		{
		"name": "@material/theme",
		"description": "The Material Components for the web theming system",
		"version": "1.0.0",
		"version": "1.1.0",
		"license": "MIT",
		@@ -6,0 +6,0 @@ "keywords": [

README.md

		@@ -51,2 +51,20 @@ <!--docs:

		### Text styles

		The text styles (referred to as `<TEXT_STYLE>` below) used in the color system:

		Text style \| Description
		--- \| ---
		`primary` \| Used for most text (e.g., `text-primary-on-light`)
		`secondary` \| Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)
		`hint` \| Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)
		`disabled` \| Used for text in disabled components and content (e.g., `text-disabled-on-light`)
		`icon` \| Used for icons (e.g., `text-icon-on-light`)

		Here are the example usages of `primary` text style:

		* CSS Custom property: `--mdc-theme-text-primary-on-light`
		* Class name: `mdc-theme--text-primary-on-light`
		* Property name used in Sass: `text-primary-on-light`

		### Non-Sass customization
		@@ -58,4 +76,2 @@

		A note about `<TEXT_STYLE>`, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.

		CSS Custom property \| Description
		@@ -70,9 +86,7 @@ --- \| ---
		`--mdc-theme-on-surface` \| Text color on top of a surface background
		`--mdc-theme-text-<TEXT_STYLE>-on-light` \| Text color for TEXT_STYLE on top of light background
		`--mdc-theme-text-<TEXT_STYLE>-on-dark` \| Text color for TEXT_STYLE on top of dark background
		`--mdc-theme-text-<TEXT_STYLE>-on-light` \| Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).
		`--mdc-theme-text-<TEXT_STYLE>-on-dark` \| Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).

		#### CSS Classes

		> A note about `<TEXT_STYLE>`, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.

		CSS Class \| Description
		@@ -89,4 +103,4 @@ --- \| ---
		`mdc-theme--secondary-bg` \| Sets the background color to the theme secondary color
		`mdc-theme--text-<TEXT_STYLE>-on-light` \| Sets text to a suitable color for TEXT_STYLE on top of light background
		`mdc-theme--text-<TEXT_STYLE>-on-dark` \| Sets text to a suitable color for TEXT_STYLE on top of dark background
		`mdc-theme--text-<TEXT_STYLE>-on-light` \| Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).
		`mdc-theme--text-<TEXT_STYLE>-on-dark` \| Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).

		@@ -103,4 +117,2 @@ ### Sass Mixins, Variables, and Functions

		A note about `<TEXT_STYLE>`, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.

		Property Name \| Description
		@@ -112,4 +124,4 @@ --- \| ---
		`surface` \| The theme surface color
		`text-<TEXT_STYLE>-on-light` \| TEXT_STYLE on top of a light background
		`text-<TEXT_STYLE>-on-dark` \| TEXT_STYLE on top of a dark background
		`text-<TEXT_STYLE>-on-light` \| TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).
		`text-<TEXT_STYLE>-on-dark` \| TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).
		`on-primary` \| A text/iconography color that is usable on top of primary color
		@@ -119,3 +131,35 @@ `on-secondary` \| A text/iconography color that is usable on top of secondary color

		#### `mdc-theme-prop` with CSS Custom Properties

		> Note The Sass map `$style` argument is intended only for use with color mixins.

		The `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:

		Fields \| Description
		--- \| ---
		`varname` \| The name of a CSS custom property
		`fallback` \| A fallback value for the CSS custom property

		For example, the following Sass...

		```
		.foo {
		@include mdc-theme-prop(color, (
		varname: --foo-color,
		fallback: red,
		));
		}
		```

		...will produce the following CSS...

		```
		.foo {
		color: red;
		color: var(--foo-color, red);
		}
		```

		The above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.

		#### `mdc-theme-luminance($color)`
		@@ -122,0 +166,0 @@

_functions.scss