chore: format code with prettier (#141)

Author: json-derulo

.eslintrc.json

@@ -1,17 +1,11 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
+        "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
@@ -38,12 +32,8 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {}
     }
   ]

.github/workflows/verify-build.yml

@@ -3,7 +3,7 @@ name: Verify build
 on:
   workflow_dispatch:
   pull_request_target:
-    types: [ opened, synchronize, reopened ]
+    types: [opened, synchronize, reopened]
 
 jobs:
   build:
@@ -44,3 +44,15 @@ jobs:
 
       - name: test
         run: npm run test -- --watch=false --browsers=ChromeHeadless
+
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: install
+        run: npm ci
+
+      - name: prettier
+        run: npm run prettier-check

README.md

@@ -5,61 +5,70 @@ You want to style your angular material dynamically with all the colors in the r
 [Check out the Demo!](https://johannesjo.github.io/angular-material-css-vars/)
 
 ## Setup
+
 1. Install:
-    ```bash
-    npm i angular-material-css-vars -S
-    ```
+   ```bash
+   npm i angular-material-css-vars -S
+   ```
 2. If @angular/material is already configured remove `@include mat.core()` from your main stylesheet file if present.
 3. Add this to your main stylesheet instead:
-    ```scss
-    @use 'angular-material-css-vars' as mat-css-vars;
- 
-    @include mat-css-vars.init-material-css-vars();
-    ```
+
+   ```scss
+   @use "angular-material-css-vars" as mat-css-vars;
+
+   @include mat-css-vars.init-material-css-vars();
+   ```
+
 4. Add to your main module:
+
 ```typescript
-import {MaterialCssVarsModule} from 'angular-material-css-vars';
+import { MaterialCssVarsModule } from "angular-material-css-vars";
 
 @NgModule({
   imports: [
     MaterialCssVarsModule.forRoot({
       // all optional
       isAutoContrast: true,
-      primary: '#3f51b5',
+      primary: "#3f51b5",
       // ...
     }),
   ],
 })
-export class AppModule {
-}
+export class AppModule {}
 ```
+
 5. If you want to adjust the theme at runtime, you can use `MaterialCssVarsService`:
-    ```typescript
-    import {MaterialCssVarsService} from 'angular-material-css-vars';
-    
-    export class SomeComponentOrService {
-      constructor(public materialCssVarsService: MaterialCssVarsService) {
-        const hex = '#3f51b5';
-        this.materialCssVarsService.setDarkTheme(true);
-        this.materialCssVarsService.setPrimaryColor(hex);
-        this.materialCssVarsService.setAccentColor('#333');
-      }
-    }
-    ```
+
+   ```typescript
+   import { MaterialCssVarsService } from "angular-material-css-vars";
+
+   export class SomeComponentOrService {
+     constructor(public materialCssVarsService: MaterialCssVarsService) {
+       const hex = "#3f51b5";
+       this.materialCssVarsService.setDarkTheme(true);
+       this.materialCssVarsService.setPrimaryColor(hex);
+       this.materialCssVarsService.setAccentColor("#333");
+     }
+   }
+   ```
+
 ## Additional Features
-* Auto or manually set contrast color via 
-  * `setAutoContrastEnabled(bool)`
-  * `setContrastColorThreshold(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)`
+
+- Auto or manually set contrast color via
+  - `setAutoContrastEnabled(bool)`
+  - `setContrastColorThreshold(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)`
 
 ## 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
-@use 'angular-material-css-vars' as mat-css-vars;
+@use "angular-material-css-vars" as mat-css-vars;
 
 .with-color {
   border-color: mat-css-vars.mat-css-color-primary(300);
@@ -77,7 +86,9 @@ There are also several [utility functions and mixins](https://github.com/johanne
 There are also [some additional hacks](additional-hacks.md) (e.g. adding a color to the elevation shadow) available in case you need them.
 
 ## Initialization Options
+
 You can provide different options before initialization to change the body class used for the dark theme and to provide different default styles:
+
 ```scss
 ...
 @use 'angular-material-css-vars' as mat-css-vars with (
@@ -91,20 +102,24 @@ You can provide different options before initialization to change the body class
 ```
 
 ### Set default (fallback palettes)
+
 There are two ways to set the default fallback theme. One is using the `mat-css-palette-defaults` mixin.
+
 ```scss
-@use 'angular-material-css-vars' as mat-css-vars;
-@use '@angular/material' as mat;
+@use "angular-material-css-vars" as mat-css-vars;
+@use "@angular/material" as mat;
 
 @include mat-css-vars.init-material-css-vars();
 
-@include mat-css-vars.mat-css-set-palette-defaults(mat.$light-blue-palette, 'primary');
-@include mat-css-vars.mat-css-set-palette-defaults(mat.$pink-palette, 'accent');
-@include mat-css-vars.mat-css-set-palette-defaults(mat.$red-palette, 'warn');
+@include mat-css-vars.mat-css-set-palette-defaults(mat.$light-blue-palette, "primary");
+@include mat-css-vars.mat-css-set-palette-defaults(mat.$pink-palette, "accent");
+@include mat-css-vars.mat-css-set-palette-defaults(mat.$red-palette, "warn");
 ```
+
 The other is to include your own variables for [$default-light-theme](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
+
 ```scss
-@use 'angular-material-css-vars' as mat-css-vars with (
+@use "angular-material-css-vars" as mat-css-vars with (
   $default-light-theme: (
     --palette-primary-50: mat-css-vars.hex-to-rgb(#e1f5fe),
     --palette-primary-100: mat-css-vars.hex-to-rgb(#b3e5fc),
@@ -120,58 +135,64 @@ The other is to include your own variables for [$default-light-theme](https://gi
 ```
 
 ### Set global density
+
 To set the global density level, just pass the `$density` variable to the `init-material-css-vars()` mixin like the following:
 
 ```scss
-@use 'angular-material-css-vars' as mat-css-vars;
+@use "angular-material-css-vars" as mat-css-vars;
 
 @include mat-css-vars.init-material-css-vars($density: -2);
 ```
 
 ## App Theme Mixins
+
 The `init-material-css-vars` mixin allows content to be passed into it. This allows you to create app themes that can take advantage of the dynamic theme created inside this mixin. It may be possible to do all theming using the utility mixins outlined above, but in other cases, you may need access to the theme palette, including foreground and background palettes.
 
 See the Material guide on [Theming your custom component](https://material.angular.io/guide/theming-your-components) for more information.
 
 ## Font config
+
 If needed the typography can be adjusted as well. You can introduce your own CSS variables, if you wish.
+
 ```scss
-@use 'angular-material-css-vars' as mat-css-vars;
-@use '@angular/material' as mat;
+@use "angular-material-css-vars" as mat-css-vars;
+@use "@angular/material" as mat;
 
 // example
 $custom-typography: mat.define-typography-config(
   // optionally, you introduce your own CSS variables: `$font-family: var(--my-custom-font-family)`
-  $font-family: 'Roboto, monospace',
+  $font-family: "Roboto, monospace",
   $headline: mat.define-typography-level(32px, 48px, 700),
   $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
 @include mat-css-vars.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
   @include app-theme($mat-css-theme);
-};
+}
 
 @mixin app-theme($theme) {
   // Your app theme
 }
 ```
 
 ## Legacy components support
+
 Angular Material v15 introduces MDC based components, which is basically a re-write for a lot of the available components. `angular-material-css-vars` v5+ only supports MDC components.
 
 In case you are still using the legacy components, you can use the package [angular-material-css-vars-legacy](https://github.com/json-derulo/angular-material-css-vars-legacy).
 
 ## Angular compatibility table
 
 | Angular | angular-material-css-vars |
-|---------|---------------------------|
+| ------- | ------------------------- |
 | 16      | 5.x                       |
 | 15      | 4.x                       |
 | 13/14   | 3.x                       |
 | 12      | 2.x                       |
 | 11      | 1.x                       |
 
 ## 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).
 
 ...and to @pedrojrivera without whom there would be no support for @angular/material v12.

additional-hacks.md

@@ -1,13 +1,13 @@
 ## Custom elevation shadow color
+
 In case you also want to add a color to your shadows, you can include the following mixin directly before you execute `@include initMaterialCssVars();`. Thanks goes to @picc09 for finding this out.
 
 ```scss
 $mat-css-palette-foreground: map-merge(
   // if you don't want to enter ALL the properties
   $mat-css-palette-foreground,
   (
-      elevation: var(--your-elevation-color-variable)
-  // ...
+    elevation: var(--your-elevation-color-variable),
   )
 );
 
@@ -28,9 +28,10 @@ $mat-css-palette-foreground: map-merge(
     $color-ambient: rgba($color, $opacity * 0.12);
   }
 
-  box-shadow: #{map-get(_get-umbra-map($color-umbra, $opacity), $zValue)},
-  #{map-get(_get-penumbra-map($color-penumbra, $opacity), $zValue)},
-  #{map-get(_get-ambient-map($color-ambient, $opacity), $zValue)};
+  box-shadow:
+    #{map-get(_get-umbra-map($color-umbra, $opacity), $zValue)},
+    #{map-get(_get-penumbra-map($color-penumbra, $opacity), $zValue)},
+    #{map-get(_get-ambient-map($color-ambient, $opacity), $zValue)};
 }
 
 // finally initialize

angular.json

@@ -22,13 +22,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -98,10 +93,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -125,9 +117,7 @@
             "main": "projects/material-css-vars/src/test.ts",
             "tsConfig": "projects/material-css-vars/tsconfig.spec.json",
             "karmaConfig": "projects/material-css-vars/karma.conf.js",
-            "styles": [
-              "projects/material-css-vars/src/test/global-styles.scss"
-            ]
+            "styles": ["projects/material-css-vars/src/test/global-styles.scss"]
           }
         },
         "lint": {
@@ -147,8 +137,6 @@
     "cache": {
       "enabled": false
     },
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }