@coolon/angular-ui-powerups 12.4.0-alpha.49 → 12.4.0-alpha.5

package/assets/{activities/activities.scss → activities.scss}

@@ -1,6 +1,5 @@
-@use "~@angular/material" as mat;
+@use "~@angular/material/theming" as ng;
 @use "sass:map";
-@use "input-activities";
 
 @mixin apply-theme($color-config, $typography-config) {
 
@@ -20,10 +19,10 @@
 
   aup-activity-title {
     display: block;
-    font-family: mat.font-family($typography-config);
-    font-size: mat.font-size($typography-config, title);
-    line-height: mat.line-height($typography-config, title);
-    letter-spacing: mat.letter-spacing($typography-config, title);
+    font-family: ng.mat-font-family($typography-config);
+    font-size: ng.mat-font-size($typography-config, title);
+    line-height: ng.mat-line-height($typography-config, title);
+    letter-spacing: ng.mat-letter-spacing($typography-config, title);
     padding: var(--aup-activity-padding);
 
     &:not(.transparent-background) {
@@ -32,20 +31,20 @@
 
     &[color=primary] {
       $palette: $primary-palette;
-      color: mat.get-color-from-palette($palette, default-contrast);
-      background-color: mat.get-color-from-palette($palette, default);
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
     }
 
     &[color=accent] {
       $palette: $accent-palette;
-      color: mat.get-color-from-palette($palette, default-contrast);
-      background-color: mat.get-color-from-palette($palette, default);
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
     }
 
     &[color=warn] {
       $palette: $warn-palette;
-      color: mat.get-color-from-palette($palette, default-contrast);
-      background-color: mat.get-color-from-palette($palette, default);
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
     }
   }
 
@@ -66,9 +65,6 @@
     display: block;
     padding: var(--aup-activity-padding);
   }
-
-  @include input-activities.apply-theme($color-config, $typography-config)
-
 }
 
 

package/assets/form.scss

@@ -1,4 +1,4 @@
-@use "~@angular/material/theming";
+@import "~@angular/material/theming";
 
 .aup-input-component {
 
@@ -8,8 +8,7 @@
     width: 100%;
 
     mat-hint.faux-error {
-      // TODO: move this out into theming...
-      color: theming.mat-color(theming.mat-palette(theming.$mat-red));
+      color: mat-color(mat-palette($mat-red));
     }
   }
 
@@ -91,5 +90,3 @@ aup-table-cell-renderer > .aup-input-component {
 
 
 
-
-

package/assets/interaction.scss

@@ -1,11 +1,4 @@
-@use "~@angular/material" as mat;
-
-@use "./interaction/editor/inline-string-editor";
-
-@mixin apply-theme($color-config, $typography-config) {
-  @include inline-string-editor.apply-theme($color-config, $typography-config)
-}
-
+@import "~@angular/material/theming";
 
 .dialog-interaction-context {
   max-width: 95vw !important;
@@ -26,7 +19,11 @@
 
 .aup-popup-interaction-panel {
   background: var(--aup-default-background, white);
-  @include mat.elevation(1);
-  @include mat.elevation-transition;
+  @include mat-elevation(1);
+  @include mat-elevation-transition;
+}
+
+.aup-input-activity {
+  padding: calc(var(--aup-default-padding)/2);
 }
 

package/assets/mixins.scss

@@ -1,24 +1,26 @@
-@use "~@angular/material" as mat;
-@use "~@angular/material/theming" as theme;
+@use "~@angular/material/theming" as ng;
 
 @mixin elevate-on-hover($height:2) {
-  @include mat.elevation-transition();
+  @include ng.mat-elevation-transition();
   &:hover {
-    @include mat.elevation($height);
+    @include ng.mat-elevation($height);
   }
 }
 
 @mixin aup-card-container-new-card-style($color: rgba(0,0,0,0.54), $background-color: rgba(255,255,255,0.8), $hover-color: $color, $background-hover-color: white) {
-  @include elevate-on-hover();
   box-sizing: border-box;
   border: 2px dashed rgba(0, 0, 0, 0.1);
   border-radius: 6px;
+
   font-weight: 300;
   cursor: pointer;
   color: $color;
   background-color: $background-color;
+  transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
 
   &:hover {
+    @include elevate-on-hover(4);
+    transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
     border-color: transparent;
     background-color: $background-hover-color;
     color: $hover-color;

package/assets/styles.scss

@@ -1,8 +1,7 @@
-@use "~@angular/material" as mat;
+@use "~@angular/material/theming" as ng;
 
 @use "./mixins";
-@use "./activities/activities";
-@use "./cards";
+@use "./activities";
 @use "./router";
 @use "./tabs";
 @use "./interaction";
@@ -10,14 +9,22 @@
 @use "./table";
 @use "./commands";
 @use "./icons";
-@use "./empty-state";
 
-@mixin apply-light-theme($theme, $typography) {
+@mixin apply-light-theme($primary, $accent, $warn:ng.mat-palette(ng.$mat-red), $typography: ng.mat-typography-config()) {
 
-  $color-config: mat.get-color-config($theme);
+  $theme: ng.mat-light-theme((
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn,
+    )
+  ));
+
+  @include ng.mat-core($typography);
+  @include ng.angular-material-theme($theme);
+
+  $color-config: ng.mat-get-color-config($theme);
 
-  @include interaction.apply-theme($color-config, $typography);
-  @include cards.apply-theme($color-config, $typography);
   @include activities.apply-theme($color-config, $typography);
 
   :root {