@ecodev/natural 66.0.5 → 66.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "66.0.5",
+  "version": "66.0.6",
   "license": "MIT",
   "repository": "github:Ecodev/natural",
   "sideEffects": false,

package/src/lib/_natural.scss

@@ -33,6 +33,21 @@
 }
 
 body {
+    // Fix a bug where hover on errored form fields show on-error color (white) label on grey background
+    @include mat.form-field-overrides(
+        (
+            filled-error-hover-label-text-color: var(--mat-sys-error),
+            filled-error-hover-active-indicator-color: var(--mat-sys-error),
+        )
+    );
+
+    @include mat.dialog-overrides(
+        (
+            container-color: var(--mat-sys-surface-bright),
+            container-elevation-shadow: var(--mat-sys-level5),
+        )
+    );
+
     --nat-elevation: inset 0 1px rgba(255, 255, 255, 0.3), var(--mat-sys-level1);
     --nat-gradient-primary: linear-gradient(
         175deg,
@@ -189,7 +204,13 @@ h6 {
 }
 
 // Nice todo angular 21 : replace tonal by m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
-[matButton] {
+.mdc-button {
+    @include mat.button-overrides(
+        (
+            protected-container-color: color-mix(in srgb, transparent 92%, black),
+        )
+    );
+
     &.mat-error,
     &[color='error'] {
         @include mat.button-overrides(
@@ -199,8 +220,7 @@ h6 {
                 filled-label-text-color: var(--mat-sys-on-error-container),
                 tonal-container-color: color-mix(in srgb, var(--mat-sys-error-container) 12%, transparent),
                 tonal-label-text-color: var(--mat-sys-on-surface),
-                protected-container-color: color-mix(in srgb, var(--mat-sys-error-container) 60%, black),
-                protected-label-text-color: white,
+                protected-label-text-color: var(--mat-sys-error-container),
                 outlined-outline-color: var(--mat-sys-error-container),
                 outlined-label-text-color: var(--mat-sys-error-container),
             )
@@ -216,8 +236,7 @@ h6 {
                 filled-label-text-color: var(--mat-sys-on-tertiary-container),
                 tonal-container-color: color-mix(in srgb, var(--mat-sys-tertiary-container) 12%, transparent),
                 tonal-label-text-color: var(--mat-sys-on-surface),
-                protected-container-color: color-mix(in srgb, var(--mat-sys-tertiary-container) 60%, black),
-                protected-label-text-color: white,
+                protected-label-text-color: var(--mat-sys-tertiary-container),
                 outlined-outline-color: var(--mat-sys-tertiary-container),
                 outlined-label-text-color: var(--mat-sys-tertiary-container),
             )
@@ -225,6 +244,18 @@ h6 {
     }
 }
 
+// In fab speed dials, mini fabs are tertiary as well as default fab buttons
+eco-fab-speed-dial .mdc-fab {
+    @include mat.fab-overrides(
+        (
+            container-color: var(--mat-sys-tertiary-container),
+            foreground-color: var(--mat-sys-on-tertiary-container),
+            small-container-color: var(--mat-sys-tertiary-container),
+            small-foreground-color: var(--mat-sys-on-tertiary-container),
+        )
+    );
+}
+
 .mdc-fab,
 .mdc-mini-fab {
     &.mat-primary,

package/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss

@@ -1,5 +1,13 @@
+@use '@angular/material' as mat;
+
 :host {
     display: block;
+
+    @include mat.tree-overrides(
+        (
+            container-background-color: transparent,
+        )
+    );
 }
 
 mat-icon {

package/src/lib/modules/panels/panels.scss

@@ -1,14 +1,14 @@
 @use '@angular/material' as mat;
 
 .cdk-overlay-container {
-    @include mat.dialog-overrides(
-        (
-            container-shape: 0,
-            container-max-width: 100vw,
-        )
-    );
-
     .panel {
+        @include mat.dialog-overrides(
+            (
+                container-shape: 0,
+                container-max-width: 100vw,
+            )
+        );
+
         margin: 10px;
         box-shadow: var(--mat-sys-level2);
         max-width: calc(100vw - 84px);