Material 3

angular.json

@@ -26,7 +26,21 @@
                         "polyfills": ["zone.js", "@angular/localize/init"],
                         "tsConfig": "tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss", "node_modules/@ecodev/natural-layout/natural-layout.css"],
+                        "styles": [
+                            "src/styles.scss",
+                            "src/styles/natural.scss",
+                            "src/styles/epicerio.scss",
+                            "src/styles/chez-emmy.scss",
+                            "src/styles/epicentre.scss",
+                            "src/styles/epicoop.scss",
+                            "src/styles/jardinvivant.scss",
+                            "src/styles/lacanopee.scss",
+                            "src/styles/lavracrie.scss",
+                            "src/styles/lelocalhauterive.scss",
+                            "src/styles/levorace.scss",
+                            "src/styles/rucher.scss",
+                            "node_modules/@ecodev/natural-layout/natural-layout.css"
+                        ],
                         "scripts": [],
                         "allowedCommonJsDependencies": ["graphql-tag", "zen-observable"],
                         "extractLicenses": false,

eslint.config.mjs

@@ -20,6 +20,7 @@ const basicAllowedAttributes = [
     'id',
     'lang',
     'list',
+    'matButton',
     'name',
     'ngClass',
     'ngProjectAs',
@@ -30,6 +31,7 @@ const basicAllowedAttributes = [
     'stroke',
     'stroke-width',
     'style',
+    'subscriptSizing',
     'svgIcon',
     'tabindex',
     'target',

projects/natural-editor/src/lib/editor/editor.component.scss

@@ -1,7 +1,15 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: block;
+    border-radius: 16px;
+    background-color: var(--mat-sys-surface-container);
+    padding: 10px;
+}
+
 .menu {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid;
     padding: 10px 18px;
 }
 
@@ -24,6 +32,9 @@
         line-height: 1.2;
 
         word-wrap: break-word;
+
+        border-radius: 10px;
+        background-color: var(--mat-sys-surface);
         -webkit-font-variant-ligatures: none;
         font-variant-ligatures: none;
         white-space: pre-wrap;
@@ -225,3 +236,18 @@
         background-position: 0 0;
     }
 }
+
+button.natural-file-over {
+    background: var(--mat-sys-primary);
+}
+
+placeholder {
+    background: linear-gradient(
+        90deg,
+        var(--mat-sys-primary),
+        var(--mat-sys-primary),
+        var(--mat-sys-terciary),
+        var(--mat-sys-primary),
+        var(--mat-sys-primary)
+    );
+}

projects/natural/theming/_natural.theme.scss → projects/natural/natural.scss

@@ -7,4 +7,4 @@ So Natural styles can be imported into an application like so:
 ```
  */
 
-@forward '../src/lib/natural.theme' show natural, $typography;
+@forward './src/lib/natural' show natural, $typography;

projects/natural/ng-package.json

@@ -4,6 +4,6 @@
     "lib": {
         "entryFile": "src/public-api.ts"
     },
-    "assets": ["./**/*.theme.scss", "./**/*.external.scss", "./**/styles/*.scss"],
+    "assets": ["./**/*.scss"],
     "allowedNonPeerDependencies": [".*"]
 }

projects/natural/package.json

@@ -6,7 +6,7 @@
     "sideEffects": false,
     "exports": {
         ".": {
-            "sass": "./theming/_natural.theme.scss"
+            "sass": "./src/lib/_natural.scss"
         }
     },
     "dependencies": {

projects/natural/src/lib/_natural.scss

@@ -0,0 +1,204 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'styles/table';
+@use 'modules/panels/panels.scss';
+@use 'modules/sidenav/sidenav.scss';
+@use 'modules/alert/alert.scss';
+
+[data-color-scheme='auto'] {
+    color-scheme: light dark;
+}
+
+[data-color-scheme='light'] {
+    color-scheme: light;
+}
+
+[data-color-scheme='dark'] {
+    color-scheme: dark;
+}
+
+[data-is-dark='false'] .nat-for-dark {
+    display: none;
+}
+
+[data-is-dark='true'] .nat-for-light {
+    display: none;
+}
+
+/**
+ * Global css
+ */
+.mat-mdc-table .mdc-button__label {
+    white-space: nowrap;
+}
+
+body {
+    --nat-elevation: inset 0 1px rgba(255, 255, 255, 0.3), var(--mat-sys-level1);
+    --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-good: rgb(0, 175, 0, 1);
+    --nat-on-good: white;
+    --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-bad: rgb(200, 11, 11);
+    --nat-on-bad: white;
+    --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-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);
+
+        color: var(--mat-sys-on-surface);
+    }
+
+    &-neutral2 {
+        background-color: var(--mat-sys-neutral-variant20);
+        color: var(--mat-sys-on-surface);
+    }
+
+    &-primary {
+        background-color: var(--mat-sys-primary-container);
+        color: var(--mat-sys-on-primary-container);
+    }
+
+    &-secondary {
+        background-color: var(--mat-sys-secondary-container);
+        color: var(--mat-sys-on-secondary-container);
+    }
+
+    &-tertiary {
+        background-color: var(--mat-sys-tertiary-container);
+        color: var(--mat-sys-on-tertiary-container);
+    }
+
+    &-error {
+        background-color: var(--mat-sys-error);
+        color: var(--mat-sys-on-error);
+    }
+}
+
+.nat-text {
+    &-primary {
+        color: var(--mat-sys-primary-container);
+    }
+
+    &-accent {
+        color: var(--mat-sys-tertiary-container);
+    }
+
+    &-error {
+        color: var(--mat-sys-error-container);
+    }
+}
+
+.mdc-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,
+            )
+        );
+    }
+}
+
+.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;
+    }
+}