@material/theme - npm Package Compare versions

Comparing version 0.33.0 to 0.34.0

package.json

		{
		"name": "@material/theme",
		"description": "The Material Components for the web theming system",
		"version": "0.33.0",
		"version": "0.34.0",
		"license": "Apache-2.0",
		@@ -6,0 +6,0 @@ "keywords": [

README.md

		@@ -51,3 +51,3 @@ <!--docs:
		```
		npm install --save @material/theme
		npm install @material/theme
		```
		@@ -76,14 +76,2 @@

		MDC Theme also exposes _light_ and _dark_ variants of the primary and secondary colors. By default, these values are
		computed by lightening and darkening the main primary/secondary colors in Sass, but you can override them if desired:

		```scss
		$mdc-theme-primary-light: #ce93d8; // Purple 200
		$mdc-theme-primary-dark: #6a1b9a; // Purple 800
		$mdc-theme-secondary-light: #ffd180; // Orange A100
		$mdc-theme-secondary-dark: #ff6d00; // Orange A700

		@import "@material/theme/mdc-theme";
		```

		The text color, for text placed on top of these selected theme colors, is programmatically computed based on color contrast. We follow the Web Content Accessibility Guidelines 2.0.
		@@ -100,7 +88,3 @@
		`--mdc-theme-primary` \| The theme primary color
		`--mdc-theme-primary-light` \| The theme primary color (light variant)
		`--mdc-theme-primary-dark` \| The theme primary color (dark variant)
		`--mdc-theme-secondary` \| The theme secondary color
		`--mdc-theme-secondary-light` \| The theme secondary color (light variant)
		`--mdc-theme-secondary-dark` \| The theme secondary color (dark variant)
		`--mdc-theme-background` \| The theme background color
		@@ -122,14 +106,6 @@ `--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR>` \| Text color for TEXT_STYLE on top of THEME_COLOR background
		`mdc-theme--primary` \| Sets the text color to the theme primary color
		`mdc-theme--primary-light` \| Sets the text color to the theme primary color (light variant)
		`mdc-theme--primary-dark` \| Sets the text color to the theme primary color (dark variant)
		`mdc-theme--secondary` \| Sets the text color to the theme secondary color
		`mdc-theme--secondary-light` \| Sets the text color to the theme secondary color (light variant)
		`mdc-theme--secondary-dark` \| Sets the text color to the theme secondary color (dark variant)
		`mdc-theme--background` \| Sets the background color to the theme background color
		`mdc-theme--primary-bg` \| Sets the background color to the theme primary color
		`mdc-theme--primary-light-bg` \| Sets the background color to the theme primary color (light variant)
		`mdc-theme--primary-dark-bg` \| Sets the background color to the theme primary color (dark variant)
		`mdc-theme--secondary-bg` \| Sets the background color to the theme secondary color
		`mdc-theme--secondary-light-bg` \| Sets the background color to the theme secondary color (light variant)
		`mdc-theme--secondary-dark-bg` \| Sets the background color to the theme secondary color (dark variant)
		`mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR>` \| Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background
		@@ -154,7 +130,3 @@ `mdc-theme--text-<TEXT_STYLE>-on-light` \| Sets text to a suitable color for TEXT_STYLE on top of light background
		`primary` \| The theme primary color
		`primary-light` \| The theme primary color (light variant)
		`primary-dark` \| The theme primary color (dark variant)
		`secondary` \| The theme secondary color
		`secondary-light` \| The theme secondary color (light variant)
		`secondary-dark` \| The theme secondary color (dark variant)
		`background` \| The theme background color
		@@ -200,23 +172,2 @@ `text-<TEXT_STYLE>-on-<THEME_COLOR>` \| TEXT_STYLE on top of THEME_COLOR background

		#### `mdc-theme-light-variant($color)` and `mdc-theme-dark-variant($color)`

		Function \| Description
		--- \| ---
		`mdc-theme-dark-variant($color, $num-indexes)` \| Darken a color by a certain number of indexes within its tonal palette
		`mdc-theme-light-variant($color, $num-indexes)` \| Lighten a color by a certain number of indexes within its tonal palette

		Both functions are luminance-aware, and will always return a color that is visually distinct from both the input color
		_and_ the other function.

		That is, if the color passed to `mdc-theme-dark-variant()` is already so dark that darkening it by the requested amount
		would return `#000000`, the function will _lighten_ the color instead.

		Similarly, if the color passed to `mdc-theme-light-variant()` is already so light that lightening it by the requested
		amount would return `#ffffff`, the function will _darken_ the color instead.

		To avoid having both functions return the same color in cases of extremely high or low input luminance,
		`mdc-theme-dark-variant()` will return a color that is _twice_ (×2) as dark as requested when the input is already very
		light. Likewise, `mdc-theme-light-variant()` will return a color that is _twice_ (×2) as light as requested when the
		input is already very dark. This ensures that the _light_ variant will always be lighter than the _dark_ variant.

		#### `mdc-theme-prop-value($property)`
		@@ -223,0 +174,0 @@

_functions.scss