feat: add single SCSS entrypoint

Author: json-derulo

README.md

@@ -9,13 +9,13 @@ You want to style your angular material dynamically with all the colors in the r
     ```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.
+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/main' as mat-css;
+    @use 'angular-material-css-vars' as mat-css-vars;
  
     // init theme
-    @include mat-css.init-material-css-vars(
+    @include mat-css-vars.init-material-css-vars(
       // optional
       $dark-theme-selector: '.isDarkTheme',
       $light-theme-selector: '.isLightTheme',
@@ -69,18 +69,18 @@ export class AppModule {
 ## 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/public-util' as mat-css-utilities;
+@use 'angular-material-css-vars' as mat-css-vars;
 
 .with-color {
-  border-color: mat-css-utilities.mat-css-color-primary(300);
+  border-color: mat-css-vars.mat-css-color-primary(300);
 }
 
 .color-and-contrast {
-  @include mat-css-utilities.mat-css-color-and-contrast(300);
+  @include mat-css-vars.mat-css-color-and-contrast(300);
 }
 
 .with-bg {
-  @include mat-css-utilities.mat-css-bg(300);
+  @include mat-css-vars.mat-css-bg(300);
 }
 ```
 
@@ -90,10 +90,10 @@ There are also [some additional hacks](additional-hacks.md) (e.g. adding a color
 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/main' as mat-css;
+@use 'angular-material-css-vars' as mat-css-vars;
 ...
 
-@include mat-css.init-material-css-vars(
+@include mat-css-vars.init-material-css-vars(
   // $default-light-theme: ... ;
   // $text: ... ;
   $dark-theme-selector: '.isDarkTheme',
@@ -103,16 +103,15 @@ You can provide different options before initialization to change the body class
 ``` 
 To make those variables take effect with your mixins, you need to make sure that they are also defined before using them. E.g.:
 ```scss
-@use 'angular-material-css-vars/main' as mat-css;
-@use 'angular-material-css-vars/public-util' as mat-css-utilities;
+@use 'angular-material-css-vars' as mat-css-vars;
 
-@include mat-css.init-material-css-vars(
+@include mat-css-vars.init-material-css-vars(
   // probably best put in a common variables file and imported before the mixins
   $dark-theme-selector: '.isDarkTheme',
 );
 
 .my-component {
-  @include mat-css-utilities.mat-css-dark-theme {
+  @include mat-css-vars.mat-css-dark-theme {
     // dark theme styles ...  
   } 
 }
@@ -125,51 +124,45 @@ A full list of the theme map [can be found here](https://github.com/johannesjo/a
 ### 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/public-util' as mat-css-utilities;
-@use 'angular-material-css-vars/main' as mat-css-main;
-@use '@angular/material/theming' as mat-theming;
+@use 'angular-material-css-vars' as mat-css-vars;
+@use '@angular/material' as mat;
 
-@include mat-css-main.init-material-css-vars();
+@include mat-css-vars.init-material-css-vars();
 
-@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-light-blue, 'primary');
-@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-pink, 'accent');
-@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-red, '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 [$mat-css-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/main' as mat-css-main;
-@use 'angular-material-css-vars/variables' as mat-css-vars;
-@use 'angular-material-css-vars/public-util' as mat-css-utilities;
+@use 'angular-material-css-vars' as mat-css-vars;
 
 $mat-css-default-light-theme: map-merge(
   // if you don't want to enter ALL the properties
-    mat-css-vars.$default-light-theme,
+  mat-css-vars.$default-light-theme,
   (
-  --palette-primary-50: mat-css-utilities.hex-to-rgb(#e1f5fe),
-  --palette-primary-100: mat-css-utilities.hex-to-rgb(#b3e5fc),
-  --palette-primary-200: mat-css-utilities.hex-to-rgb(#81d4fa),
-  --palette-primary-300: mat-css-utilities.hex-to-rgb(#4fc3f7),
-  --palette-primary-400: mat-css-utilities.hex-to-rgb(#29b6f6),
-  --palette-primary-500: mat-css-utilities.hex-to-rgb(#03a9f4),
-  // ...
+    --palette-primary-50: mat-css-vars.hex-to-rgb(#e1f5fe),
+    --palette-primary-100: mat-css-vars.hex-to-rgb(#b3e5fc),
+    --palette-primary-200: mat-css-vars.hex-to-rgb(#81d4fa),
+    --palette-primary-300: mat-css-vars.hex-to-rgb(#4fc3f7),
+    --palette-primary-400: mat-css-vars.hex-to-rgb(#29b6f6),
+    --palette-primary-500: mat-css-vars.hex-to-rgb(#03a9f4),
+    // ...
   )
 );
 
-@include mat-css-main.init-material-css-vars();
+@include mat-css-vars.init-material-css-vars();
 ```
 
 ### 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/main' as mat-css-main;
+@use 'angular-material-css-vars' as mat-css-vars;
 
-@include mat-css-main.init-material-css-vars($density: -2);
+@include mat-css-vars.init-material-css-vars($density: -2);
 ```
 
-## IE 11
-This lib won't work  with IE11 but thanks to @Coly010 there is [a workaround for that too](https://github.com/johannesjo/angular-material-css-vars/issues/11#issuecomment-572749449).
-
 ## 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.
 
@@ -178,18 +171,17 @@ See the Material guide on [Theming your custom component](https://material.angul
 ## Font config
 If needed the typography can be adjusted as well.
 ```scss
-@use 'angular-material-css-vars/main' as mat-css-main;
+@use 'angular-material-css-vars' as mat-css-vars;
 @use '@angular/material' as mat;
-@use '@angular/material/theming' as mat-theming;
 
 // example
-$custom-typography: mat.mat-typography-config(
+$custom-typography: mat.define-typography-config(
   $font-family: 'Roboto, monospace',
-  $headline: mat-theming.mat-typography-level(32px, 48px, 700),
-  $body-1: mat-theming.mat-typography-level(16px, 24px, 500)
+  $headline: mat.define-typography-level(32px, 48px, 700),
+  $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
-@include mat-css-main.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
+@include mat-css-vars.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
   @include app-theme($mat-css-theme);
 };
 

projects/material-css-vars/index.scss

@@ -0,0 +1,4 @@
+@forward "./src/lib/main";
+@forward "./src/lib/variables";
+@forward "./src/lib/public-util";
+@forward "./src/lib/public-color-util";

projects/material-css-vars/package.json

@@ -28,7 +28,7 @@
   },
   "exports": {
     ".": {
-      "sass": "./src/lib/_main.scss"
+      "sass": "./index.scss"
     },
     "./main": {
       "sass": "./src/lib/_main.scss"

projects/material-css-vars/src/lib/_variables.scss

@@ -247,7 +247,7 @@ $palette-primary: (
     600: var(--palette-primary-contrast-600),
     700: var(--palette-primary-contrast-700),
     800: var(--palette-primary-contrast-800),
-    900: var(--palette-primary-contrast-900b),
+    900: var(--palette-primary-contrast-900),
     A100: var(--palette-primary-contrast-A100),
     A200: var(--palette-primary-contrast-A200),
     A400: var(--palette-primary-contrast-A400),

src/app/app.component.scss

@@ -1,137 +1,136 @@
-@use '../../projects/material-css-vars/src/lib/public-util' as mat-css-utilities;
-@use '../../projects/material-css-vars/src/lib/main' as mat-css-main;
+@use '../../projects/material-css-vars' as mat-css-vars;
 
 $lighter-dark: rgb(88, 88, 88);
 
 .bg-50 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(50);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(50);
 }
 
 .bg-100 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(100);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(100);
 }
 
 .bg-200 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(200);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(200);
 }
 
 .bg-300 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(300);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(300);
 }
 
 .bg-400 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(400);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(400);
 }
 
 .bg-500 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(500);
-  border: 4px dashed mat-css-utilities.mat-css-color-accent();
+  @include mat-css-vars.mat-css-color-and-contrast-primary(500);
+  border: 4px dashed mat-css-vars.mat-css-color-accent();
 }
 
 .bg-600 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(600);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(600);
 }
 
 .bg-700 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(700);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(700);
 }
 
 .bg-800 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(800);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(800);
 }
 
 .bg-900 {
-  @include mat-css-utilities.mat-css-color-and-contrast-primary(900);
+  @include mat-css-vars.mat-css-color-and-contrast-primary(900);
 }
 
 
 .bga-50 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(50);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(50);
 }
 
 .bga-100 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(100);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(100);
 }
 
 .bga-200 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(200);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(200);
 }
 
 .bga-300 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(300);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(300);
 }
 
 .bga-400 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(400);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(400);
 }
 
 .bga-500 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(500);
-  border: 4px dashed mat-css-utilities.mat-css-color-primary();
+  @include mat-css-vars.mat-css-color-and-contrast-accent(500);
+  border: 4px dashed mat-css-vars.mat-css-color-primary();
 }
 
 .bga-600 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(600);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(600);
 }
 
 .bga-700 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(700);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(700);
 }
 
 .bga-800 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(800);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(800);
 }
 
 .bga-900 {
-  @include mat-css-utilities.mat-css-color-and-contrast-accent(900);
+  @include mat-css-vars.mat-css-color-and-contrast-accent(900);
 }
 
 
 .bgw-50 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(50);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(50);
 }
 
 .bgw-100 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(100);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(100);
 }
 
 .bgw-200 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(200);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(200);
 }
 
 .bgw-300 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(300);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(300);
 }
 
 .bgw-400 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(400);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(400);
 }
 
 .bgw-500 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(500);
-  border: 4px dashed mat-css-utilities.mat-css-color-primary();
+  @include mat-css-vars.mat-css-color-and-contrast-warn(500);
+  border: 4px dashed mat-css-vars.mat-css-color-primary();
 }
 
 .bgw-600 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(600);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(600);
 }
 
 .bgw-700 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(700);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(700);
 }
 
 .bgw-800 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(800);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(800);
 }
 
 .bgw-900 {
-  @include mat-css-utilities.mat-css-color-and-contrast-warn(900);
+  @include mat-css-vars.mat-css-color-and-contrast-warn(900);
 }
 
 ::ng-deep color-picker {
   .color-picker {
 
-    @include mat-css-utilities.mat-css-dark-theme {
+    @include mat-css-vars.mat-css-dark-theme {
       color: #fff;
       background: $lighter-dark;
     }
@@ -161,6 +160,7 @@ $lighter-dark: rgb(88, 88, 88);
     height: 50px;
     text-align: center;
     position: relative;
+    box-sizing: border-box;
 
     div {
       position: absolute;

src/styles.scss

@@ -1,5 +1,4 @@
-@use '/projects/material-css-vars/src/lib/main' as mat-css-main;
-@use '/projects/material-css-vars/src/lib/public-util' as mat-css-utilities;
+@use '/projects/material-css-vars' as mat-css-vars;
 @use '@angular/material' as mat;
 
 @import './app/app.theme';
@@ -10,13 +9,13 @@ $custom-typography: mat.define-typography-config(
   $headline-1: mat.define-typography-level(16px, 24px, 500)
 );
 
-@include mat-css-main.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
+@include mat-css-vars.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
   @include app-theme($mat-css-theme);
 };
 
-@include mat-css-utilities.mat-css-set-palette-defaults(mat.$light-blue-palette, 'primary');
-@include mat-css-utilities.mat-css-set-palette-defaults(mat.$pink-palette, 'accent');
-@include mat-css-utilities.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');
 
 body {
   padding: 0;