@ecodev/natural 66.0.22 → 66.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "66.0.22",
+  "version": "66.0.24",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/lib/_natural.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use './styles/color.scss';
 @use './styles/table.scss';
+@use './styles/typography.scss';
 @use './styles/material-scrolling-fixes.scss';
 @use './modules/panels/panels.scss';
 @use './modules/sidenav/sidenav.scss';
@@ -191,7 +193,7 @@ body {
 }
 
 .nat-bold {
-    font-weight: bold;
+    font-weight: 500;
 }
 
 p,
@@ -204,47 +206,6 @@ h6 {
     margin: 0;
 }
 
-// Nice todo angular 21 : replace tonal by m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
-.mdc-button {
-    @include mat.button-overrides(
-        (
-            protected-container-color: color-mix(in srgb, transparent 92%, black),
-        )
-    );
-
-    &.mat-error,
-    &[color='error'] {
-        @include mat.button-overrides(
-            (
-                text-label-text-color: var(--mat-sys-error-container),
-                filled-container-color: var(--mat-sys-error-container),
-                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-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),
-            )
-        );
-    }
-
-    &.mat-tertiary,
-    &[color='tertiary'] {
-        @include mat.button-overrides(
-            (
-                text-label-text-color: var(--mat-sys-tertiary-container),
-                filled-container-color: var(--mat-sys-tertiary-container),
-                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-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),
-            )
-        );
-    }
-}
-
 // In fab speed dials, mini fabs are tertiary as well as default fab buttons
 eco-fab-speed-dial .mdc-fab {
     @include mat.fab-overrides(
@@ -259,41 +220,6 @@ eco-fab-speed-dial .mdc-fab {
 
 .mdc-fab,
 .mdc-mini-fab {
-    &.mat-primary,
-    &[color='primary'] {
-        @include mat.fab-overrides(
-            (
-                container-color: var(--mat-sys-primary-container),
-                foreground-color: var(--mat-sys-on-primary-container),
-                small-container-color: var(--mat-sys-primary-container),
-                small-foreground-color: var(--mat-sys-on-primary-container),
-            )
-        );
-    }
-
-    &.mat-error,
-    &[color='error'] {
-        @include mat.fab-overrides(
-            (
-                container-color: var(--mat-sys-error-container),
-                foreground-color: var(--mat-sys-on-error-container),
-                small-container-color: var(--mat-sys-error-container),
-                small-foreground-color: var(--mat-sys-on-error-container),
-            )
-        );
-    }
-
-    &[color='tertiary'] {
-        @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),
-            )
-        );
-    }
-
     &.nat-rounded {
         @include mat.fab-overrides(
             (
@@ -320,146 +246,3 @@ eco-fab-speed-dial .mdc-fab {
         );
     }
 }
-
-.mdc-icon-button {
-    &.mat-primary,
-    &[color='primary'] {
-        @include mat.icon-button-overrides(
-            (
-                icon-color: var(--mat-sys-primary-container),
-            )
-        );
-    }
-
-    &.mat-error,
-    &[color='error'] {
-        @include mat.icon-button-overrides(
-            (
-                icon-color: var(--mat-sys-error-container),
-            )
-        );
-    }
-
-    .mat-tertiary,
-    &[color='tertiary'] {
-        @include mat.icon-button-overrides(
-            (
-                icon-color: var(--mat-sys-tertiary-container),
-            )
-        );
-    }
-}
-
-// Todo Remove on angular v21
-// add body{ @include mat.system-classes();}
-
-// ***********************************************************************************************
-// Font - Apply typography styles
-// See https://m3.material.io/styles/typography/applying-type for guidance.
-// ***********************************************************************************************
-
-// Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
-// Material, this is used for the subscript text in a form field and the text in a paginator.
-.mat-font-body-sm {
-    font: var(--mat-sys-body-small);
-    letter-spacing: var(--mat-sys-body-small-tracking);
-}
-
-// Sets the font to the body medium typeface. Use for medium body text, this is the default
-// body font. In Angular Material, this is used for the text in a table row and the supporting
-// text in a dialog.
-.mat-font-body-md {
-    font: var(--mat-sys-body-medium);
-    letter-spacing: var(--mat-sys-body-medium-tracking);
-}
-
-// Sets the font to the body large typeface. Use for large body text, such as an introductory
-// paragraph. In Angular Material, this is used for the text in a list item and the text in a
-// select trigger.
-.mat-font-body-lg {
-    font: var(--mat-sys-body-large);
-    letter-spacing: var(--mat-sys-body-large-tracking);
-}
-
-// Sets the font to the display small typeface. Use for small display text, such as a date.
-.mat-font-display-sm {
-    font: var(--mat-sys-display-small);
-    letter-spacing: var(--mat-sys-display-small-tracking);
-}
-
-// Sets the font to the display medium typeface. Use for medium display text, such as a hero
-// title.
-.mat-font-display-md {
-    font: var(--mat-sys-display-medium);
-    letter-spacing: var(--mat-sys-display-medium-tracking);
-}
-
-// Sets the font to the display large typeface. Use for large display text, such as a hero title.
-.mat-font-display-lg {
-    font: var(--mat-sys-display-large);
-    letter-spacing: var(--mat-sys-display-large-tracking);
-}
-
-// Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
-// Angular Material, this is used for the headline in a dialog.
-.mat-font-headline-sm {
-    font: var(--mat-sys-headline-small);
-    letter-spacing: var(--mat-sys-headline-small-tracking);
-}
-
-// Sets the font to the headline medium typeface. Use for medium headlines, such as a section
-// title.
-.mat-font-headline-md {
-    font: var(--mat-sys-headline-medium);
-    letter-spacing: var(--mat-sys-headline-medium-tracking);
-}
-
-// Sets the font to the headline large typeface. Use for large headlines, such as a page title on
-// a large screen.
-.mat-font-headline-lg {
-    font: var(--mat-sys-headline-large);
-    letter-spacing: var(--mat-sys-headline-large-tracking);
-}
-
-// Sets the font to the label small typeface. Use for small labels, such as text in a badge.
-.mat-font-label-sm {
-    font: var(--mat-sys-label-small);
-    letter-spacing: var(--mat-sys-label-small-tracking);
-}
-
-// Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
-// is used for the slider label.
-.mat-font-label-md {
-    font: var(--mat-sys-label-medium);
-    letter-spacing: var(--mat-sys-label-medium-tracking);
-}
-
-// Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
-// used for buttons, chips, and menu labels.
-.mat-font-label-lg {
-    font: var(--mat-sys-label-large);
-    letter-spacing: var(--mat-sys-label-large-tracking);
-}
-
-// Sets the font to the title small typeface. Use for small titles, such as a card title. In
-// Angular Material, this is used for the header of a table and the label of an option group.
-.mat-font-title-sm {
-    font: var(--mat-sys-title-small);
-    letter-spacing: var(--mat-sys-title-small-tracking);
-}
-
-// Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
-// or the primary text in a list item. In Angular Material, this is used for the subtitle
-// of a card and the header of an expansion panel.
-.mat-font-title-md {
-    font: var(--mat-sys-title-medium);
-    letter-spacing: var(--mat-sys-title-medium-tracking);
-}
-
-// Sets the font to the title large typeface. Use for large titles, such as a page title on a
-// small screen. In Angular Material, this is used for the title of a card and the title of a
-// toolbar.
-.mat-font-title-lg {
-    font: var(--mat-sys-title-large);
-    letter-spacing: var(--mat-sys-title-large-tracking);
-}

package/src/lib/styles/color.scss

@@ -0,0 +1,135 @@
+@use '@angular/material' as mat;
+
+// TODO angular 21 : replace tonal by m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+.mdc-button {
+    @include mat.button-overrides(
+        (
+            protected-container-color: color-mix(in srgb, transparent 92%, black),
+        )
+    );
+
+    &.mat-error,
+    &[color='error'] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-error-container),
+                filled-container-color: var(--mat-sys-error-container),
+                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-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),
+            )
+        );
+    }
+
+    &.mat-tertiary,
+    &[color='tertiary'] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-tertiary-container),
+                filled-container-color: var(--mat-sys-tertiary-container),
+                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-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),
+            )
+        );
+    }
+}
+
+.mdc-fab,
+.mdc-mini-fab {
+    &.mat-primary,
+    &[color='primary'] {
+        @include mat.fab-overrides(
+            (
+                container-color: var(--mat-sys-primary-container),
+                foreground-color: var(--mat-sys-on-primary-container),
+                small-container-color: var(--mat-sys-primary-container),
+                small-foreground-color: var(--mat-sys-on-primary-container),
+            )
+        );
+    }
+
+    &.mat-error,
+    &[color='error'] {
+        @include mat.fab-overrides(
+            (
+                container-color: var(--mat-sys-error-container),
+                foreground-color: var(--mat-sys-on-error-container),
+                small-container-color: var(--mat-sys-error-container),
+                small-foreground-color: var(--mat-sys-on-error-container),
+            )
+        );
+    }
+
+    &[color='tertiary'] {
+        @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-icon-button {
+    &.mat-primary,
+    &[color='primary'] {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-primary-container),
+            )
+        );
+    }
+
+    &.mat-error,
+    &[color='error'] {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-error-container),
+            )
+        );
+    }
+
+    .mat-tertiary,
+    &[color='tertiary'] {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-tertiary-container),
+            )
+        );
+    }
+}
+
+.mat-icon {
+    &.mat-primary {
+        @include mat.icon-overrides(
+            (
+                color: var(--mat-sys-primary-container),
+            )
+        );
+    }
+
+    &.mat-error {
+        @include mat.icon-overrides(
+            (
+                color: var(--mat-sys-error-container),
+            )
+        );
+    }
+
+    .mat-tertiary {
+        @include mat.icon-overrides(
+            (
+                color: var(--mat-sys-tertiary-container),
+            )
+        );
+    }
+}

package/src/lib/styles/table.scss

@@ -69,8 +69,7 @@
     }
 
     [mat-row].selected {
-        // todo : remove ? when is it used ?
-        //background: mat.m2-get-color-from-palette($background, selected-button);
+        background: color-mix(in srgb, var(--mat-sys-surface-container-highest) 95%, black);
     }
 
     .mat-mdc-footer-cell {

package/src/lib/styles/typography.scss

@@ -0,0 +1,112 @@
+// TODO After angular v21, replace entire file with: body{ @include mat.system-classes();}
+
+// ***********************************************************************************************
+// Font - Apply typography styles
+// See https://m3.material.io/styles/typography/applying-type for guidance.
+// ***********************************************************************************************
+
+// Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
+// Material, this is used for the subscript text in a form field and the text in a paginator.
+.mat-font-body-sm {
+    font: var(--mat-sys-body-small);
+    letter-spacing: var(--mat-sys-body-small-tracking);
+}
+
+// Sets the font to the body medium typeface. Use for medium body text, this is the default
+// body font. In Angular Material, this is used for the text in a table row and the supporting
+// text in a dialog.
+.mat-font-body-md {
+    font: var(--mat-sys-body-medium);
+    letter-spacing: var(--mat-sys-body-medium-tracking);
+}
+
+// Sets the font to the body large typeface. Use for large body text, such as an introductory
+// paragraph. In Angular Material, this is used for the text in a list item and the text in a
+// select trigger.
+.mat-font-body-lg {
+    font: var(--mat-sys-body-large);
+    letter-spacing: var(--mat-sys-body-large-tracking);
+}
+
+// Sets the font to the display small typeface. Use for small display text, such as a date.
+.mat-font-display-sm {
+    font: var(--mat-sys-display-small);
+    letter-spacing: var(--mat-sys-display-small-tracking);
+}
+
+// Sets the font to the display medium typeface. Use for medium display text, such as a hero
+// title.
+.mat-font-display-md {
+    font: var(--mat-sys-display-medium);
+    letter-spacing: var(--mat-sys-display-medium-tracking);
+}
+
+// Sets the font to the display large typeface. Use for large display text, such as a hero title.
+.mat-font-display-lg {
+    font: var(--mat-sys-display-large);
+    letter-spacing: var(--mat-sys-display-large-tracking);
+}
+
+// Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
+// Angular Material, this is used for the headline in a dialog.
+.mat-font-headline-sm {
+    font: var(--mat-sys-headline-small);
+    letter-spacing: var(--mat-sys-headline-small-tracking);
+}
+
+// Sets the font to the headline medium typeface. Use for medium headlines, such as a section
+// title.
+.mat-font-headline-md {
+    font: var(--mat-sys-headline-medium);
+    letter-spacing: var(--mat-sys-headline-medium-tracking);
+}
+
+// Sets the font to the headline large typeface. Use for large headlines, such as a page title on
+// a large screen.
+.mat-font-headline-lg {
+    font: var(--mat-sys-headline-large);
+    letter-spacing: var(--mat-sys-headline-large-tracking);
+}
+
+// Sets the font to the label small typeface. Use for small labels, such as text in a badge.
+.mat-font-label-sm {
+    font: var(--mat-sys-label-small);
+    letter-spacing: var(--mat-sys-label-small-tracking);
+}
+
+// Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
+// is used for the slider label.
+.mat-font-label-md {
+    font: var(--mat-sys-label-medium);
+    letter-spacing: var(--mat-sys-label-medium-tracking);
+}
+
+// Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
+// used for buttons, chips, and menu labels.
+.mat-font-label-lg {
+    font: var(--mat-sys-label-large);
+    letter-spacing: var(--mat-sys-label-large-tracking);
+}
+
+// Sets the font to the title small typeface. Use for small titles, such as a card title. In
+// Angular Material, this is used for the header of a table and the label of an option group.
+.mat-font-title-sm {
+    font: var(--mat-sys-title-small);
+    letter-spacing: var(--mat-sys-title-small-tracking);
+}
+
+// Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
+// or the primary text in a list item. In Angular Material, this is used for the subtitle
+// of a card and the header of an expansion panel.
+.mat-font-title-md {
+    font: var(--mat-sys-title-medium);
+    letter-spacing: var(--mat-sys-title-medium-tracking);
+}
+
+// Sets the font to the title large typeface. Use for large titles, such as a page title on a
+// small screen. In Angular Material, this is used for the title of a card and the title of a
+// toolbar.
+.mat-font-title-lg {
+    font: var(--mat-sys-title-large);
+    letter-spacing: var(--mat-sys-title-large-tracking);
+}