angular-material-css-vars - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "angular-material-css-vars",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Little library to use css variables for @angular/material",
@@ -5,0 +5,0 @@ "author": "johannesjo <[e-mail]> (http://super-productivity.com)",

README.md

@@ -1,24 +0,78 @@
-# Angular Material CSS Vars
+# AngularMaterialCssVars
+You want to style your angular material dynamically with all the colors in the rainbow and don't really care about IE11 (support for css variables is required)? Look no further!
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.3.
+[Check out the Demo!](https://johannesjo.github.io/angular-material-css-vars/)
 
-## Code scaffolding
+## Setup
+1. Install:
+    ```bash
+    npm i angular-material-css-vars -S
+    ```
+2. If @angular/material is already configured remove `@import '~@angular/material/theming';` from your main stylesheet file if present.
+3. Add this to your main stylesheet instead:
+    ```scss
+    @import '~angular-material-css-vars/main';
+    @include initMaterialCssVars();
+    ```
+4. Then use it like so:
+    ```typescript
+    import {MaterialCssVarsService} from 'angular-material-css-vars';
+    
+    export class SomeComponentOrService {
+      constructor(public materialCssVarsService: MaterialCssVarsService) {
+        const hex = '#3f51b5';
+        this.materialCssVarsService.setDarkTheme(true);
+        this.materialCssVarsService.changePrimaryColor(hex);
+        this.materialCssVarsService.changeAccentColor('#333');
+      }
+    }
+    ```
+## Additional Features
+* Auto or manually set contrast color via 
+  * `switchToDarkContrastColor()`
+  * `switchToLightContrastColor()`
+  * `setAutoContrastEnabled(bool)`
+  * `changeContrastColorThreshold(hueVal: HueValue)`
+* Helper to set all variables
+  * `setVariable(cssVarName: MaterialCssVariables, value: string)`
+  * You can use the `MaterialCssVariables` enum [from here](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/model.ts) to make sure you get the variable name right.
+* Rudimentary dark theme support via body class
+  * `setDarkTheme(isDark: boolean)`
 
-Run `ng generate component component-name --project material-css-vars` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project material-css-vars`.
-> Note: Don't forget to add `--project material-css-vars` or else it will be added to the default project in your `angular.json` file. 
+## Utility
+There are also several [utility functions and mixins](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_public-util.scss).
+```scss
+@import '~angular-material-css-vars/public-util';
 
-## Build
+.with-color {
+  border-color: mat-css-primary-color(300);
+}
 
-Run `ng build material-css-vars` to build the project. The build artifacts will be stored in the `dist/` directory.
+.color-and-contrast {
+  @include mat-css-color-and-contrast(300);
+}
 
-## Publishing
+.with-bg {
+  @include mat-css-bg(300);
+}
+```
+## Initialization Options
+You can provide different options during initialization to change the body class used for the dark theme and to provide different default styles:
+```scss
+@mixin initMaterialCssVars(
+  $default-theme: $css-vars-default-light-theme,
+  $dark-theme-body-class: 'isDarkTheme',
+  $default-theme-text: $css-vars-text
+) {
+  // ...
+}
+``` 
+A full list of the theme map [can be found here](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
 
-After building your library with `ng build material-css-vars`, go to the dist folder `cd dist/material-css-vars` and run `npm publish`.
 
-## Running unit tests
+## Credit...
+...goes to @zbirizdo [project](https://github.com/zbirizdo/material-css-vars) on which parts of this are based which is in turn supposedly based on [this gist](https://gist.github.com/shprink/c7f333e3ad51830f14a6383f3ab35439).
 
-Run `ng test material-css-vars` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Development server
 
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

No alert changes

Improved metrics

Total package byte prevSize

249637

0.81%

Number of lines in readme file

79

216%

No dependency changes