@ng-matero/extensions 15.1.2 → 15.2.0

package/_index.scss

@@ -1,7 +1,6 @@
 @forward 'photoviewer/dist/photoviewer';
 
-@forward './button/button-loading';
-
+@forward './button/button-theme' as button-* show button-theme;
 @forward './alert/alert-theme' as alert-* show alert-theme;
 @forward './colorpicker/colorpicker-theme' as colorpicker-* show colorpicker-theme;
 @forward './datetimepicker/datetimepicker-theme' as datetimepicker-* show datetimepicker-theme;

package/_theming.scss

@@ -1,7 +1,6 @@
 @forward 'photoviewer/dist/photoviewer';
 
-@forward './button/button-loading';
-
+@forward './button/button-theme.import';
 @forward './alert/alert-theme.import';
 @forward './colorpicker/colorpicker-theme.import';
 @forward './datetimepicker/datetimepicker-theme.import';

package/alert/_alert-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'alert-theme' hide color, theme, typography;
+@forward 'alert-theme' hide color, density, theme, typography;
 @forward 'alert-theme' as mtx-alert-*;

package/button/_button-theme.import.scss

@@ -0,0 +1,2 @@
+@forward 'button-theme' hide color, density, theme, typography;
+@forward 'button-theme' as mtx-button-*;

package/button/_button-theme.scss

@@ -0,0 +1,9 @@
+@use './button-loading.scss';
+
+@mixin color($config-or-theme) {}
+
+@mixin typography($config-or-theme) {}
+
+@mixin density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {}

package/colorpicker/_colorpicker-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'colorpicker-theme' hide color, theme, typography;
+@forward 'colorpicker-theme' hide color, density, theme, typography;
 @forward 'colorpicker-theme' as mtx-colorpicker-*;

package/core/style/_vendor-prefixes.scss

@@ -1,6 +1,5 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable selector-no-vendor-prefix */
-// stylelint-disable material/no-prefixes
 @mixin user-select($value) {
   -webkit-user-select: $value;
   user-select: $value;
@@ -33,7 +32,7 @@
 
 @mixin color-adjust($value) {
   -webkit-print-color-adjust: $value;
-  color-adjust: $value;
+  print-color-adjust: $value;
 }
 
 @mixin private-background-clip($value) {

package/core/theming/_all-theme.scss

@@ -1,4 +1,5 @@
 // Import all the theming functionality.
+@use '../../button/button-theme';
 @use '../../alert/alert-theme';
 @use '../../colorpicker/colorpicker-theme';
 @use '../../datetimepicker/datetimepicker-theme';
@@ -17,6 +18,7 @@
 @mixin all-component-themes($theme-or-color-config) {
   $dedupe-key: 'angular-material-extensions-theme';
   @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
+    @include button-theme.theme($theme-or-color-config);
     @include alert-theme.theme($theme-or-color-config);
     @include colorpicker-theme.theme($theme-or-color-config);
     @include datetimepicker-theme.theme($theme-or-color-config);

package/core/theming/prebuilt/deeppurple-amber.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+@use '../all-theme';
+
+// Define a theme.
+$primary: mat.define-palette(mat.$deep-purple-palette);
+$accent:  mat.define-palette(mat.$amber-palette, A200, A100, A400);
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+// Include all theme styles for the components.
+@include all-theme.all-component-themes($theme);

package/core/theming/prebuilt/indigo-pink.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+@use '../all-theme';
+
+// Define a theme.
+$primary: mat.define-palette(mat.$indigo-palette);
+$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+// Include all theme styles for the components.
+@include all-theme.all-component-themes($theme);

package/core/theming/prebuilt/pink-bluegrey.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+@use '../all-theme';
+
+// Define a theme.
+$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
+$accent:  mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
+
+$theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+// Include all theme styles for the components.
+@include all-theme.all-component-themes($theme);

package/core/theming/prebuilt/purple-green.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+@use '../all-theme';
+
+// Define a theme.
+$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
+$accent:  mat.define-palette(mat.$green-palette, A200, A100, A400);
+
+$theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+// Include all theme styles for the components.
+@include all-theme.all-component-themes($theme);

package/datetimepicker/_datetimepicker-theme.import.scss

@@ -1,4 +1,4 @@
 @forward 'datetimepicker-theme' hide $selected-today-box-shadow-width, $calendar-body-font-size,
   $calendar-weekday-table-font-size, $calendar-header-font-size, $clock-font-size,
-  color, theme, typography;
+  color, density, theme, typography;
 @forward 'datetimepicker-theme' as mtx-datetimepicker-*;

package/drawer/_drawer-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'drawer-theme' hide color, theme, typography;
+@forward 'drawer-theme' hide color, density, theme, typography;
 @forward 'drawer-theme' as mtx-drawer-*;