@material/theme - npm Package Compare versions

Comparing version 0.34.0 to 0.35.0

package.json

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

README.md

@@ -19,20 +19,4 @@ <!--docs:
 
-This color palette comprises primary and secondary colors that can be used for illustration or to develop your brand colors.
+The Material Design color system can be used to create a color scheme that reflects your brand or style.
 
-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.
-* 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.
-
-and five text styles:
-
-* Primary: used for most text
-* Secondary: used for text which is lower in the visual hierarchy
-* Hint: used for text hints, such as those in text fields and labels
-* Disabled: used for text in disabled components and content
-* Icon: used for icons
-
-> **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.
-
 ## Design & API Documentation
@@ -57,28 +41,30 @@
 
-### Change Theme Colors
+### Color Scheme
 
-MDC Theme makes it easy to develop your brand colors. You override the default theme color through Sass variables or CSS custom properties. CSS custom properties enables runtime theming.
+You can define the theme color variables before importing any MDC Web components:
 
-> **A note about Sass variables**, you need to define the three theme color variables before importing mdc-theme or any MDC Web components that rely on it, like following:
-
 ```scss
-$mdc-theme-primary: #9c27b0; // Purple 500
-$mdc-theme-secondary: #ffab40; // Orange A200
-$mdc-theme-background: #fff; // White
+$mdc-theme-primary: #fcb8ab;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: #442b2d;
+$mdc-theme-on-secondary: #442b2d;
 
-@import "@material/theme/mdc-theme";
+@import "@material/button/mdc-button";
 ```
 
-> **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.
+We suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.
 
-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
 
+### Advanced customization
+
+Color scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work "out of the box". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.
+
+### Non-Sass customization
+
+Only a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.
+
 #### CSS Custom Properties
 
-> **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`.
+**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
@@ -90,14 +76,11 @@ CSS Custom property | Description
 `--mdc-theme-background` | The theme background color
-`--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR>` | Text color for TEXT_STYLE on top of THEME_COLOR background
+`--mdc-theme-on-primary` | Text color on top of a primary background
+`--mdc-theme-on-secondary` | Text color on top of a secondary 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
 
-### CSS Classes
+#### CSS Classes
 
-MDC Web provides SASS mixins, such as `mdc-button-filled-accessible`, to facilitate customization of some components. For more information, consult the documentation for each component.
+> **A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
-If you want to modify an element, which is not a Material Design component, you can apply the following modifier CSS classes.
-
-> **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`.
-
 CSS Class | Description
@@ -108,5 +91,6 @@ --- | ---
 `mdc-theme--background` | Sets the background color to the theme background color
+`mdc-theme--on-primary` | Sets the text color to the theme on-primary color
+`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color
 `mdc-theme--primary-bg` | Sets the background color to the theme primary color
 `mdc-theme--secondary-bg` | Sets the background color to the theme secondary color
-`mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR>` | Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background
 `mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background
@@ -125,3 +109,3 @@ `mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark 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. `secondary`. When you put it all together it would be `text-hint-on-secondary`.
+**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
@@ -133,6 +117,8 @@ Property Name | Description
 `background` | The theme background color
-`text-<TEXT_STYLE>-on-<THEME_COLOR>` | TEXT_STYLE on top of THEME_COLOR background
 `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
+`on-primary` | A text/iconography color that is usable on top of primary color
+`on-secondary` | A text/iconography color that is usable on top of secondary color
 
+
 #### `mdc-theme-luminance($color)`
@@ -139,0 +125,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45089

decreased by-11.24%

Lines of code

145

decreased by-19.89%

Number of lines in readme file

186

decreased by-7%

No dependency changes