npm - @ecodev/natural - Versions diffs - 68.0.4 → 68.1.2 - Mend

@ecodev/natural 68.0.4 → 68.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/fesm2022/ecodev-natural.mjs +2 -1
package/fesm2022/ecodev-natural.mjs.map +1 -1
package/package.json +1 -1
package/src/lib/_natural.scss +7 -228
package/src/lib/styles/backgrounds.scss +164 -0
package/src/lib/styles/buttons.scss +106 -0
package/src/lib/styles/fab.scss +79 -0
package/src/lib/styles/icons.scss +56 -0
package/src/lib/styles/material-overrides.scss +1 -10
package/src/lib/styles/color.scss +0 -152

package/package.json CHANGED Viewed

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

package/src/lib/_natural.scss CHANGED Viewed

@@ -1,10 +1,13 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use './styles/color.scss';
 @use './styles/margins.scss';
 @use './styles/material-scrolling-fixes.scss';
 @use './styles/table.scss';
 @use './styles/typography.scss';
+@use 'styles/buttons';
+@use './styles/fab.scss';
+@use './styles/icons.scss';
+@use './styles/backgrounds.scss';
 @use './styles/material-overrides.scss';
 @use './modules/panels/panels.scss';
 @use './modules/sidenav/sidenav.scss';
@@ -58,179 +61,18 @@ body {
     font: var(--mat-sys-body-medium);
     --nat-elevation: inset 0 1px rgba(255, 255, 255, 0.3), var(--mat-sys-level1);
-    --nat-gradient-primary: var(--mat-sys-primary-container);
-    --nat-gradient-secondary: var(--mat-sys-secondary-container);
-    --nat-gradient-tertiary: var(--mat-sys-tertiary-container);
-    --nat-gradient-error: var(--mat-sys-error);
-    --nat-good: rgb(0, 175, 0, 1);
-    --nat-on-good: white;
-    --nat-gradient-good: var(--nat-good);
-    --nat-gradient-inverse-surface: var(--mat-sys-inverse-surface);
-    --nat-dark-fixed: #343434;
-    --nat-on-dark-fixed: #f8f8f8;
-    --nat-bad: rgb(200, 11, 11);
-    --nat-on-bad: white;
-    --nat-gradient-bad: var(--nat-bad);
-    --nat-link-color: var(--mat-sys-on-surface);
-    @supports (color: color-mix(in srgb, red, blue)) {
-        --nat-link-color: color-mix(in srgb, var(--mat-sys-primary-container) 80%, var(--mat-sys-on-surface));
-        --nat-gradient-primary: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--mat-sys-primary-container) 95%, white),
-            color-mix(in srgb, var(--mat-sys-primary-container) 90%, black)
-        );
-        --nat-gradient-secondary: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--mat-sys-secondary-container) 95%, white),
-            color-mix(in srgb, var(--mat-sys-secondary-container) 90%, black)
-        );
-        --nat-gradient-tertiary: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--mat-sys-tertiary-container) 95%, white),
-            color-mix(in srgb, var(--mat-sys-tertiary-container) 90%, black)
-        );
-        --nat-gradient-error: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--mat-sys-error) 95%, white),
-            color-mix(in srgb, var(--mat-sys-error) 90%, black)
-        );
-        --nat-gradient-good: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--nat-good) 95%, white),
-            color-mix(in srgb, var(--nat-good) 90%, black)
-        );
-        --nat-gradient-inverse-surface: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--mat-sys-inverse-surface) 95%, white),
-            color-mix(in srgb, var(--mat-sys-inverse-surface) 90%, black)
-        );
-        --nat-gradient-bad: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--nat-bad) 60%, white),
-            color-mix(in srgb, var(--nat-bad) 90%, black)
-        );
-        --nat-gradient-dark-fixed: linear-gradient(
-            175deg,
-            color-mix(in srgb, var(--nat-dark-fixed) 90%, white),
-            color-mix(in srgb, var(--nat-dark-fixed) 90%, black)
-        );
-    }
 }
 .nat-elevation {
     box-shadow: var(--nat-elevation);
 }
-.nat-frame {
-    padding: 6px;
-    &-rounded {
-        border-radius: var(--mat-sys-corner-small);
-    }
-    &-neutral1 {
-        background-color: var(--mat-sys-neutral10) !important;
-        color: var(--mat-sys-on-surface) !important;
-    }
-    &-neutral2 {
-        background-color: var(--mat-sys-neutral-variant20) !important;
-        color: var(--mat-sys-on-surface) !important;
-    }
-    &-primary {
-        background-color: var(--mat-sys-primary-container) !important;
-        color: var(--mat-sys-on-primary-container) !important;
-    }
-    &-secondary {
-        background-color: var(--mat-sys-secondary-container) !important;
-        color: var(--mat-sys-on-secondary-container) !important;
-    }
-    &-tertiary {
-        background-color: var(--mat-sys-tertiary-container) !important;
-        color: var(--mat-sys-on-tertiary-container) !important;
-    }
-    &-error {
-        background-color: var(--mat-sys-error) !important;
-        color: var(--mat-sys-on-error) !important;
-    }
-    &-dark-fixed {
-        background-color: var(--nat-dark-fixed) !important;
-        color: var(--nat-on-dark-fixed) !important;
-    }
-}
-.nat-text {
-    &-primary {
-        color: var(--mat-sys-primary-container);
-    }
-    &-accent {
-        color: var(--mat-sys-tertiary-container);
-    }
-    &-error {
-        color: var(--mat-sys-error-container);
-    }
-}
-.nat-gradient {
-    &-primary {
-        background: var(--nat-gradient-primary) !important;
-        color: var(--mat-sys-on-primary-container) !important;
-    }
-    &-secondary {
-        background: var(--nat-gradient-secondary) !important;
-        color: var(--mat-sys-on-secondary-container) !important;
-    }
-    &-tertiary {
-        background: var(--nat-gradient-tertiary) !important;
-        color: var(--mat-sys-on-tertiary-container) !important;
-    }
-    &-error {
-        background: var(--nat-gradient-error) !important;
-        color: var(--mat-sys-on-error) !important;
-    }
-    &-good {
-        background: var(--nat-gradient-good) !important;
-        color: var(--nat-on-good) !important;
-    }
-    &-bad {
-        background: var(--nat-gradient-bad) !important;
-        color: var(--nat-on-bad) !important;
-    }
-    &-inverse-surface {
-        background: var(--nat-gradient-inverse-surface) !important;
-        color: var(--mat-sys-inverse-on-surface) !important;
-    }
-    &-dark-fixed {
-        background: var(--nat-gradient-dark-fixed) !important;
-        color: var(--nat-on-dark-fixed) !important;
-    }
+.nat-bold {
+    font-weight: 500;
 }
 // Most of our sidenav menus (mainly in admin) use simple nat-gradient-* that applies a contrasted text color
-// that is overridden on child element
+// that is overridden by material on child element
 // This instruction activate text color inheritance to simplify html and css for active routes.
 .mat-mdc-list-item {
     &[routerlinkactive*='nat-frame-'],
@@ -241,66 +83,3 @@ body {
         }
     }
 }
-.nat-bold {
-    font-weight: 500;
-}
-// 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 {
-    &.nat-rounded {
-        @include mat.fab-overrides(
-            (
-                container-shape: var(--mat-sys-corner-full),
-                extended-container-shape: var(--mat-sys-corner-full),
-                small-container-shape: var(--mat-sys-corner-full),
-            )
-        );
-    }
-    &.nat-flat {
-        @include mat.fab-overrides(
-            (
-                container-elevation-shadow: 0,
-                focus-container-elevation-shadow: 0,
-                hover-container-elevation-shadow: 0,
-                extended-container-elevation-shadow: 0,
-                extended-focus-container-elevation-shadow: 0,
-                extended-hover-container-elevation-shadow: 0,
-                small-container-elevation-shadow: 0,
-                small-focus-container-elevation-shadow: 0,
-                small-hover-container-elevation-shadow: 0,
-            )
-        );
-    }
-}
-app-support a,
-.rich-text a,
-a.app-link {
-    cursor: pointer;
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
-    border-color: var(--mat-sys-primary-container);
-    color: var(--nat-link-color);
-    text-decoration: none;
-    &:hover {
-        @supports (color: color-mix(in srgb, red, blue)) {
-            border-color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
-            color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
-        }
-    }
-}

package/src/lib/styles/backgrounds.scss ADDED Viewed

@@ -0,0 +1,164 @@
+body {
+    --nat-gradient-primary: var(--mat-sys-primary-container);
+    --nat-gradient-secondary: var(--mat-sys-secondary-container);
+    --nat-gradient-tertiary: var(--mat-sys-tertiary-container);
+    --nat-gradient-error: var(--mat-sys-error);
+    --nat-good: rgb(0, 175, 0, 1);
+    --nat-on-good: white;
+    --nat-gradient-good: var(--nat-good);
+    --nat-gradient-inverse-surface: var(--mat-sys-inverse-surface);
+    --nat-dark-fixed: #343434;
+    --nat-on-dark-fixed: #f8f8f8;
+    --nat-bad: rgb(200, 11, 11);
+    --nat-on-bad: white;
+    --nat-gradient-bad: var(--nat-bad);
+    @supports (color: color-mix(in srgb, red, blue)) {
+        --nat-gradient-primary: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--mat-sys-primary-container) 95%, white),
+            color-mix(in srgb, var(--mat-sys-primary-container) 90%, black)
+        );
+        --nat-gradient-secondary: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--mat-sys-secondary-container) 95%, white),
+            color-mix(in srgb, var(--mat-sys-secondary-container) 90%, black)
+        );
+        --nat-gradient-tertiary: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--mat-sys-tertiary-container) 95%, white),
+            color-mix(in srgb, var(--mat-sys-tertiary-container) 90%, black)
+        );
+        --nat-gradient-error: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--mat-sys-error) 95%, white),
+            color-mix(in srgb, var(--mat-sys-error) 90%, black)
+        );
+        --nat-gradient-good: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--nat-good) 95%, white),
+            color-mix(in srgb, var(--nat-good) 90%, black)
+        );
+        --nat-gradient-inverse-surface: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--mat-sys-inverse-surface) 95%, white),
+            color-mix(in srgb, var(--mat-sys-inverse-surface) 90%, black)
+        );
+        --nat-gradient-bad: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--nat-bad) 60%, white),
+            color-mix(in srgb, var(--nat-bad) 90%, black)
+        );
+        --nat-gradient-dark-fixed: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--nat-dark-fixed) 90%, white),
+            color-mix(in srgb, var(--nat-dark-fixed) 90%, black)
+        );
+    }
+}
+.nat-frame {
+    padding: 6px;
+    &-rounded {
+        border-radius: var(--mat-sys-corner-small);
+    }
+    &-neutral1 {
+        background-color: var(--mat-sys-neutral10) !important;
+        color: var(--mat-sys-on-surface) !important;
+    }
+    &-neutral2 {
+        background-color: var(--mat-sys-neutral-variant20) !important;
+        color: var(--mat-sys-on-surface) !important;
+    }
+    &-primary {
+        background-color: var(--mat-sys-primary-container) !important;
+        color: var(--mat-sys-on-primary-container) !important;
+    }
+    &-secondary {
+        background-color: var(--mat-sys-secondary-container) !important;
+        color: var(--mat-sys-on-secondary-container) !important;
+    }
+    &-tertiary {
+        background-color: var(--mat-sys-tertiary-container) !important;
+        color: var(--mat-sys-on-tertiary-container) !important;
+    }
+    &-error {
+        background-color: var(--mat-sys-error) !important;
+        color: var(--mat-sys-on-error) !important;
+    }
+    &-dark-fixed {
+        background-color: var(--nat-dark-fixed) !important;
+        color: var(--nat-on-dark-fixed) !important;
+    }
+}
+.nat-text {
+    &-primary {
+        color: var(--mat-sys-primary-container);
+    }
+    &-accent {
+        color: var(--mat-sys-tertiary-container);
+    }
+    &-error {
+        color: var(--mat-sys-error-container);
+    }
+}
+.nat-gradient {
+    &-primary {
+        background: var(--nat-gradient-primary) !important;
+        color: var(--mat-sys-on-primary-container) !important;
+    }
+    &-secondary {
+        background: var(--nat-gradient-secondary) !important;
+        color: var(--mat-sys-on-secondary-container) !important;
+    }
+    &-tertiary {
+        background: var(--nat-gradient-tertiary) !important;
+        color: var(--mat-sys-on-tertiary-container) !important;
+    }
+    &-error {
+        background: var(--nat-gradient-error) !important;
+        color: var(--mat-sys-on-error) !important;
+    }
+    &-good {
+        background: var(--nat-gradient-good) !important;
+        color: var(--nat-on-good) !important;
+    }
+    &-bad {
+        background: var(--nat-gradient-bad) !important;
+        color: var(--nat-on-bad) !important;
+    }
+    &-inverse-surface {
+        background: var(--nat-gradient-inverse-surface) !important;
+        color: var(--mat-sys-inverse-on-surface) !important;
+    }
+    &-dark-fixed {
+        background: var(--nat-gradient-dark-fixed) !important;
+        color: var(--nat-on-dark-fixed) !important;
+    }
+}

package/src/lib/styles/buttons.scss ADDED Viewed

@@ -0,0 +1,106 @@
+@use '@angular/material' as mat;
+body {
+    --nat-primary-link-color: var(--mat-sys-primary-container);
+    --nat-tertiary-link-color: var(--mat-sys-tertiary-container);
+}
+app-support a,
+.rich-text a,
+a.app-link {
+    &:not(.mdc-button) {
+        cursor: pointer;
+        border-bottom-width: 2px;
+        border-bottom-style: solid;
+        border-color: var(--mat-sys-primary-container);
+        color: var(--nat-primary-link-color);
+        text-decoration: none;
+        &:hover {
+            @supports (color: color-mix(in srgb, red, blue)) {
+                border-color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
+                color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
+            }
+        }
+    }
+}
+.mdc-button {
+    @include mat.button-overrides(
+        (
+            protected-container-color: rgba(0, 0, 0, 0.08),
+            outlined-label-text-color: var(--nat-primary-link-color),
+            text-label-text-color: var(--nat-primary-link-color),
+            filled-container-color: var(--nat-components-primary),
+            filled-label-text-color: var(--mat-sys-on-primary-container),
+        )
+    );
+    &.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-label-text-color: var(--mat-sys-error-container),
+                tonal-container-color: var(--mat-sys-error-container),
+                protected-label-text-color: var(--mat-sys-error-container),
+                outlined-label-text-color: var(--mat-sys-error-container),
+                text-state-layer-color: var(--mat-sys-error-container),
+            )
+        );
+        @supports (color: color-mix(in srgb, red, blue)) {
+            @include mat.button-overrides(
+                (
+                    tonal-label-text-color: color-mix(
+                            in srgb,
+                            var(--mat-sys-error-container) 50%,
+                            var(--mat-sys-on-surface)
+                        ),
+                    tonal-container-color: color-mix(in srgb, var(--mat-sys-error-container) 33%, transparent),
+                    protected-label-text-color: color-mix(
+                            in srgb,
+                            var(--mat-sys-error-container) 50%,
+                            var(--mat-sys-on-surface)
+                        ),
+                )
+            );
+        }
+    }
+    &.mat-tertiary,
+    &[color='tertiary'] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--nat-tertiary-link-color),
+                filled-container-color: var(--mat-sys-tertiary-container),
+                filled-label-text-color: var(--mat-sys-on-tertiary-container),
+                tonal-label-text-color: var(--nat-tertiary-link-color),
+                tonal-container-color: var(--mat-sys-tertiary-container),
+                protected-label-text-color: var(--nat-tertiary-link-color),
+                outlined-label-text-color: var(--nat-tertiary-link-color),
+                text-state-layer-color: var(--mat-sys-tertiary-container),
+            )
+        );
+        @supports (color: color-mix(in srgb, red, blue)) {
+            @include mat.button-overrides(
+                (
+                    tonal-label-text-color: color-mix(
+                            in srgb,
+                            var(--mat-sys-tertiary-container) 33%,
+                            var(--mat-sys-on-surface)
+                        ),
+                    tonal-container-color: color-mix(in srgb, var(--mat-sys-tertiary-container) 33%, transparent),
+                    protected-label-text-color: color-mix(
+                            in srgb,
+                            var(--mat-sys-tertiary-container) 50%,
+                            var(--mat-sys-on-surface)
+                        ),
+                )
+            );
+        }
+    }
+}

package/src/lib/styles/fab.scss ADDED Viewed

@@ -0,0 +1,79 @@
+@use '@angular/material' as mat;
+// 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 {
+    &.nat-rounded {
+        @include mat.fab-overrides(
+            (
+                container-shape: var(--mat-sys-corner-full),
+                extended-container-shape: var(--mat-sys-corner-full),
+                small-container-shape: var(--mat-sys-corner-full),
+            )
+        );
+    }
+    &.nat-flat {
+        @include mat.fab-overrides(
+            (
+                container-elevation-shadow: 0,
+                focus-container-elevation-shadow: 0,
+                hover-container-elevation-shadow: 0,
+                extended-container-elevation-shadow: 0,
+                extended-focus-container-elevation-shadow: 0,
+                extended-hover-container-elevation-shadow: 0,
+                small-container-elevation-shadow: 0,
+                small-focus-container-elevation-shadow: 0,
+                small-hover-container-elevation-shadow: 0,
+            )
+        );
+    }
+    &.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),
+            )
+        );
+    }
+}

package/src/lib/styles/icons.scss ADDED Viewed

@@ -0,0 +1,56 @@
+@use '@angular/material' as mat;
+.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/material-overrides.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 body {
-    --nat-components-primary: var(--mat-sys-primary-container);
+    --nat-components-primary: var(--mat-sys-primary-container); // may be used on other files
     @include mat.dialog-overrides(
         (
@@ -10,15 +10,6 @@ body {
         )
     );
-    @include mat.button-overrides(
-        (
-            outlined-label-text-color: var(--nat-link-color),
-            text-label-text-color: var(--nat-link-color),
-            filled-container-color: var(--nat-components-primary),
-            filled-label-text-color: var(--mat-sys-on-primary-container),
-        )
-    );
     @include mat.slide-toggle-overrides(
         (
             selected-track-color: var(--nat-components-primary),