@material/theme
Advanced tools
@material/theme - npm Package Compare versions
Comparing version 0.1.7 to 0.2.0
| { | ||
| "name": "@material/theme", | ||
| "description": "The Material Components for the web theming system", | ||
| "version": "0.1.7", | ||
| "version": "0.2.0", | ||
| "license": "Apache-2.0", | ||
@@ -6,0 +6,0 @@ "keywords": [ |
@@ -19,3 +19,3 @@ <!--docs: | ||
| This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. | ||
| This color palette comprises primary and secondary colors that can be used for illustration or to develop your brand colors. | ||
@@ -25,3 +25,3 @@ MDC Theme is a foundational module that themes MDC Web components. The colors in this module are derived from three theme colors: | ||
| * Primary: the primary color used in your application, applies to a number of UI elements. | ||
| * Accent: the accent color used in your application, applies to a number of UI elements. | ||
| * Secondary: the secondary color used in your application, applies to a number of UI elements. (Previously called "accent".) | ||
| * Background: the background color for your application, aka the color on top of which your UI is drawn. | ||
@@ -37,3 +37,3 @@ | ||
| > **A note about Primary**, don't confuse primary color with primary text. The former refers to the primary theme color, that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content. | ||
| > **A note about Primary and Secondary**, don't confuse primary/secondary _color_ with primary/secondary _text_. The former refers to the primary/secondary _theme_ color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content. | ||
@@ -70,5 +70,5 @@ Some components can change their appearance when in a Dark Theme context, aka placed on top of a dark background. There are two ways to specify if a component is in a Dark Theme context. The first is to add `mdc-theme--dark` to a *container* element, which holds the component. The second way is to add `<component_name>--theme-dark` modifier class to the actual component element. For example, `mdc-button--theme-dark` would put the MDC Button in a Dark Theme context. | ||
| ```scss | ||
| $mdc-theme-primary: #9c27b0; | ||
| $mdc-theme-accent: #ffab40; | ||
| $mdc-theme-background: #fff; | ||
| $mdc-theme-primary: #9c27b0; // Purple 500 | ||
| $mdc-theme-secondary: #ffab40; // Orange A200 | ||
| $mdc-theme-background: #fff; // White | ||
@@ -78,4 +78,21 @@ @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. | ||
| > **A note about `$mdc-theme-secondary`**: This variable was previously named `$mdc-theme-accent`. | ||
| > For backward compatibility, `$mdc-theme-accent` still exists, but it is **deprecated**. | ||
| > Apps that previously customized `$mdc-theme-accent` will continue to work, but new apps should use | ||
| > `$mdc-theme-secondary` instead. | ||
| 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. | ||
| https://www.w3.org/TR/WCAG20 | ||
@@ -85,3 +102,3 @@ | ||
| > **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. `accent`. When you put it all together it would be `--mdc-theme-text-hint-on-accent`. | ||
| > **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 `--mdc-theme-text-hint-on-secondary`. | ||
@@ -91,3 +108,7 @@ CSS Custom property | Description | ||
| `--mdc-theme-primary` | The theme primary color | ||
| `--mdc-theme-accent` | The theme accent 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 | ||
@@ -104,3 +125,3 @@ `--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR>` | Text color for TEXT_STYLE on top of THEME_COLOR background | ||
| > **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. `accent`. When you put it all together it would be `mdc-theme--text-hint-on-accent`. | ||
| > **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 `mdc-theme--text-hint-on-secondary`. | ||
@@ -110,6 +131,14 @@ CSS Class | Description | ||
| `mdc-theme--primary` | Sets the text color to the theme primary color | ||
| `mdc-theme--accent` | Sets the text color to the theme accent 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--accent-bg` | Sets the background color to the theme accent 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 | ||
@@ -122,3 +151,3 @@ `mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background | ||
| Mixin | Description | ||
| --- | --- | ||
| --- | --- | ||
| `mdc-theme-prop($property, $style, $important)` | Applies a theme color to a property | ||
@@ -135,3 +164,3 @@ `mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context | ||
| > **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. `accent`. When you put it all together it would be `text-hint-on-accent`. | ||
| > **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`. | ||
@@ -141,3 +170,7 @@ Property Name | Description | ||
| `primary` | The theme primary color | ||
| `accent` | The theme accent 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 | ||
@@ -144,0 +177,0 @@ `text-<TEXT_STYLE>-on-<THEME_COLOR>` | TEXT_STYLE on top of THEME_COLOR background |
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
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
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
Improved metrics
- Total package byte prevSize
- increased by66.73%
65397
- Number of package files
- increased by11.11%
10
- Lines of code
- increased by27.16%
295
- Number of lines in readme file
- increased by20.75%
192