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.html

@@ -3,7 +3,7 @@
     <div class="menu-container">
         <div class="menu">
             @if (save$.observed) {
-                <button mat-icon-button i18n-matTooltip matTooltip="Enregistrer" (click)="save$.next()">
+                <button matIconButton i18n-matTooltip matTooltip="Enregistrer" (click)="save$.next()">
                     <mat-icon fontIcon="save" />
                 </button>
             }
@@ -268,7 +268,7 @@
             </mat-menu>
             @if (imageUploader()) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     naturalFileDrop
                     i18n-matTooltip
                     matTooltip="Insérer une image"
@@ -330,7 +330,7 @@
             }
             @if (menu.undo) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Annuler"
                     [disabled]="menu.undo.disabled"
@@ -341,7 +341,7 @@
             }
             @if (menu.redo) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Refaire"
                     [disabled]="menu.redo.disabled"
@@ -352,7 +352,7 @@
             }
             @if (menu.wrapBulletList && menu.wrapBulletList.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Liste à puce"
                     [disabled]="menu.wrapBulletList.disabled"
@@ -363,7 +363,7 @@
             }
             @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Liste à numéro"
                     [disabled]="menu.wrapOrderedList.disabled"
@@ -374,7 +374,7 @@
             }
             @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Citation"
                     [disabled]="menu.wrapBlockQuote.disabled"
@@ -385,7 +385,7 @@
             }
             @if (menu.joinUp && menu.joinUp.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Fusionner avec l'élément du haut"
                     [disabled]="menu.joinUp.disabled"
@@ -396,7 +396,7 @@
             }
             @if (menu.lift && menu.lift.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Désindenter"
                     [disabled]="menu.lift.disabled"
@@ -407,7 +407,7 @@
             }
             @if (menu.selectParentNode && menu.selectParentNode.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Sélectionner l'élément parent"
                     [disabled]="menu.selectParentNode.disabled"

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": {