feat: support global density setting

json-derulo · json-derulo · commit f018e82c7d0d · 2023-04-28T21:49:07.000+02:00
diff --git a/README.md b/README.md
@@ -156,7 +156,15 @@ $mat-css-default-light-theme: map-merge(
 );
 
 @include mat-css-main.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;
 
+@include mat-css-main.init-material-css-vars($density: -2);
 ```
 
 ## IE 11
diff --git a/projects/material-css-vars/src/lib/_main.scss b/projects/material-css-vars/src/lib/_main.scss
@@ -12,7 +12,7 @@
   @include internal-helper.root($default-theme);
 }
 
-@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
+@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config(), $density) {
   @include mat.core();
 
   $primary: mat.define-palette(variables.$palette-primary);
@@ -26,7 +26,7 @@
       warn: $warn,
     ),
     typography: $typography-config,
-    density: 0,
+    density: $density,
   ));
 
   $dark-theme: mat.define-dark-theme((
@@ -36,7 +36,7 @@
       warn: $warn,
     ),
     typography: $typography-config,
-    density: 0,
+    density: $density,
   ));
 
   // set global variable so passed-in content can use the theme
@@ -70,9 +70,10 @@
   $dark-theme-selector: variables.$dark-theme-selector,
   $default-theme-text: variables.$text,
   $typography-config: mat.define-typography-config(),
+  $density: 0,
 ) {
   @include init-css-vars($default-theme, $default-theme-text);
-  @include init-mat-theme($dark-theme-selector, $typography-config) using ($mat-css-theme) {
+  @include init-mat-theme($dark-theme-selector, $typography-config, $density) using ($mat-css-theme) {
     @content($mat-css-theme);
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
         rel="stylesheet">
 </head>
-<body>
+<body class="mat-app-background">
 <app-root></app-root>
 </body>
 
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,34 +1,24 @@
 @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 '@angular/material' as mat;
-@use '@angular/material/theming' as mat-theming;
 
 @import './app/app.theme';
 
 $custom-typography: mat.define-typography-config(
   $font-family: 'Roboto, monospace',
-  $body-1: mat-theming.mat-typography-level(16px, 24px, 500),
-  $headline-1: mat-theming.mat-typography-level(16px, 24px, 500)
+  $body-1: mat.define-typography-level(16px, 24px, 500),
+  $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 app-theme($mat-css-theme);
 };
 
-@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-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');
 
 body {
   padding: 0;
   margin: 0;
-
-  &.isDarkTheme {
-    background: rgb(39, 39, 39);
-  }
-}
-
-* {
-  box-sizing: border-box;
 }
