@material/theme - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

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

README.md

		@@ -143,3 +143,3 @@ <!--docs:
		--- \| ---
		`mdc-theme-prop($property, $style, $important)` \| Applies a theme color to a property
		`mdc-theme-prop($property, $style, $important)` \| Applies a theme color or a custom color to a CSS property
		`mdc-theme-dark($root-selector, $compound)` \| Creates a rule that is applied when the current selector is within an Dark Theme context
		@@ -153,3 +153,3 @@

		These properties can be used as the `$property` argument for `mdc-theme-prop` mixin.
		The properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.

		@@ -194,1 +194,22 @@ > A note about `<TEXT_STYLE>` and `<THEME_COLOR>`, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`. `<THEME_COLOR>` represents the lowercase name of the theme colors listed above, e.g. `secondary`. When you put it all together it would be `text-hint-on-secondary`.
		```

		#### `mdc-theme-light-variant` and `mdc-theme-dark-variant`

		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.

_functions.scss