From 3d85826edb580a5a968088a3bbe55a3fe85287f3 Mon Sep 17 00:00:00 2001 From: Samuel Baptista Date: Thu, 30 Oct 2025 01:23:54 +0100 Subject: [PATCH 01/52] Material design 3 migration #11936 --- angular.json | 7 +- package.json | 2 +- .../src/lib/editor/_editor.theme.scss | 59 -- .../src/lib/editor/editor.component.scss | 27 +- .../theming/_natural-editor.theme.scss | 14 - projects/natural/package.json | 2 +- projects/natural/src/lib/_natural.scss | 21 + projects/natural/src/lib/_natural.theme.scss | 72 --- .../natural/src/lib/modules/alert/_alert.scss | 10 + .../src/lib/modules/alert/_alert.theme.scss | 14 - .../type-date-range.component.html | 4 +- .../type-date/type-date.component.html | 4 +- .../type-hierarchic-selector.component.html | 2 +- .../type-natural-select.component.html | 2 +- .../type-number/type-number.component.html | 4 +- .../type-select/type-select.component.html | 2 +- .../type-text/type-text.component.html | 2 +- .../modules/file/component/_file.theme.scss | 23 - .../file/component/file.component.scss | 8 + .../hierarchic-selector.component.scss | 2 +- .../{_panels.external.scss => panels.scss} | 11 + .../_dropdown-container.theme.scss | 14 - .../dropdown-container.component.html | 2 +- .../dropdown-container.component.scss | 9 +- .../modules/search/input/_input.theme.scss | 23 - .../modules/search/input/input.component.html | 7 +- .../src/lib/modules/search/search.theme.scss | 7 - .../lib/modules/sidenav/_sidenav.theme.scss | 40 -- .../sidenav-container.component.html | 2 +- .../sidenav-container.component.ts | 2 +- .../src/lib/modules/sidenav/sidenav.scss | 32 + projects/natural/src/lib/styles/_table.scss | 94 --- projects/natural/src/lib/styles/table.scss | 100 +++ projects/natural/theming/_natural.theme.scss | 2 +- src/app/app-routing.ts | 8 + src/app/editor/editor.component.scss | 2 +- src/app/hierarchic/hierarchic.component.ts | 4 +- src/app/home/_home.theme.scss | 35 -- src/app/home/home.component.html | 287 +++++---- src/app/home/home.component.scss | 60 ++ src/app/home/home.component.ts | 19 +- src/app/list/list.component.html | 7 + src/app/list/list.component.ts | 8 + src/app/relations/relations.component.html | 18 +- src/app/relations/relations.component.scss | 9 - src/app/search/search.component.html | 2 +- src/app/shared/services/theme.service.ts | 45 +- .../theme-merger/.claude/settings.local.json | 10 + src/app/theme-merger/theme-demo.json | 422 +++++++++++++ .../theme-merger/theme-merger.component.html | 107 ++++ .../theme-merger/theme-merger.component.scss | 86 +++ .../theme-merger/theme-merger.component.ts | 573 ++++++++++++++++++ src/assets/github.svg | 5 +- src/assets/logo.svg | 2 +- src/index.html | 4 +- src/styles.scss | 225 ++----- src/styles/alternative-theme-tokens copy.scss | 101 +++ src/styles/alternative-theme-tokens.scss | 101 +++ src/styles/natural-theme-tokens copy.scss | 103 ++++ src/styles/natural-theme-tokens.scss | 78 +++ 60 files changed, 2187 insertions(+), 760 deletions(-) delete mode 100644 projects/natural-editor/src/lib/editor/_editor.theme.scss delete mode 100644 projects/natural-editor/theming/_natural-editor.theme.scss create mode 100644 projects/natural/src/lib/_natural.scss delete mode 100644 projects/natural/src/lib/_natural.theme.scss create mode 100644 projects/natural/src/lib/modules/alert/_alert.scss delete mode 100644 projects/natural/src/lib/modules/alert/_alert.theme.scss delete mode 100644 projects/natural/src/lib/modules/file/component/_file.theme.scss rename projects/natural/src/lib/modules/panels/{_panels.external.scss => panels.scss} (88%) delete mode 100644 projects/natural/src/lib/modules/search/dropdown-container/_dropdown-container.theme.scss delete mode 100644 projects/natural/src/lib/modules/search/input/_input.theme.scss delete mode 100644 projects/natural/src/lib/modules/search/search.theme.scss delete mode 100644 projects/natural/src/lib/modules/sidenav/_sidenav.theme.scss create mode 100644 projects/natural/src/lib/modules/sidenav/sidenav.scss delete mode 100644 projects/natural/src/lib/styles/_table.scss create mode 100644 projects/natural/src/lib/styles/table.scss delete mode 100644 src/app/home/_home.theme.scss create mode 100644 src/app/theme-merger/.claude/settings.local.json create mode 100644 src/app/theme-merger/theme-demo.json create mode 100644 src/app/theme-merger/theme-merger.component.html create mode 100644 src/app/theme-merger/theme-merger.component.scss create mode 100644 src/app/theme-merger/theme-merger.component.ts create mode 100644 src/styles/alternative-theme-tokens copy.scss create mode 100644 src/styles/alternative-theme-tokens.scss create mode 100644 src/styles/natural-theme-tokens copy.scss create mode 100644 src/styles/natural-theme-tokens.scss diff --git a/angular.json b/angular.json index c6bc953b..ec101c49 100644 --- a/angular.json +++ b/angular.json @@ -26,7 +26,12 @@ "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-theme-tokens.scss", + "src/styles/alternative-theme-tokens.scss", + "node_modules/@ecodev/natural-layout/natural-layout.css" + ], "scripts": [], "allowedCommonJsDependencies": ["graphql-tag", "zen-observable"], "extractLicenses": false, diff --git a/package.json b/package.json index fc577eb6..9fb91ea5 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@angular/core": "^20.3.7", "@angular/forms": "^20.3.7", "@angular/localize": "^20.3.7", - "@angular/material": "^20.2.10", + "@angular/material": "20.2.10", "@angular/platform-browser": "^20.3.7", "@angular/router": "^20.3.7", "@apollo/client": "^3.13.7", diff --git a/projects/natural-editor/src/lib/editor/_editor.theme.scss b/projects/natural-editor/src/lib/editor/_editor.theme.scss deleted file mode 100644 index d60a38f8..00000000 --- a/projects/natural-editor/src/lib/editor/_editor.theme.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; - -@mixin natural-editor($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $warn: map.get($theme, warn); - - $config: mat.m2-get-color-config($theme); - $background: map.get($config, background); - $foreground: map.get($config, foreground); - $is-dark-theme: map.get($config, is-dark); - - // Copied from Material Form Field - $fill-background: mat.m2-get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04)); - $underline-color: mat.m2-get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42)); - $drawer-container-background-color: mat.m2-get-color-from-palette($background, background); - - natural-editor { - // Since MDC, icon buttons have round borders. We need square-ish border in the toolbar to not look too weird - .mat-mdc-icon-button, - .mat-mdc-icon-button .mat-mdc-button-persistent-ripple { - border-radius: 4px; - } - - // Since MDC, all buttons have fixed height. We need taller buttons to look similar to mat-button-toggle-group - button.mat-mdc-button.mat-mdc-button-base.mat-mdc-menu-trigger { - height: 50px; - } - - button.natural-file-over { - background: mat.m2-get-color-from-palette($primary); - } - - .menu-container { - background-color: $drawer-container-background-color; - } - - .menu, - .ProseMirror { - background-color: $fill-background; - } - - .menu { - border-color: $underline-color; - } - - placeholder { - background: linear-gradient( - 90deg, - mat.m2-get-color-from-palette($primary), - mat.m2-get-color-from-palette($primary), - mat.m2-get-color-from-palette($accent), - mat.m2-get-color-from-palette($primary), - mat.m2-get-color-from-palette($primary) - ); - } - } -} diff --git a/projects/natural-editor/src/lib/editor/editor.component.scss b/projects/natural-editor/src/lib/editor/editor.component.scss index ae5912c0..28a48360 100644 --- a/projects/natural-editor/src/lib/editor/editor.component.scss +++ b/projects/natural-editor/src/lib/editor/editor.component.scss @@ -1,7 +1,14 @@ +@use '@angular/material' as mat; + +:host { + 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 +31,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 +235,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) + ); +} diff --git a/projects/natural-editor/theming/_natural-editor.theme.scss b/projects/natural-editor/theming/_natural-editor.theme.scss deleted file mode 100644 index 899ae87c..00000000 --- a/projects/natural-editor/theming/_natural-editor.theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -/** -This is the single public entry point for the lib -So Natural Editor styles can be imported into an application like so: - -``` -@use '@ecodev/natural-editor'; -``` - */ - -@use '../src/lib/editor/editor.theme'; - -@mixin natural-editor($theme) { - @include editor.natural-editor($theme); -} diff --git a/projects/natural/package.json b/projects/natural/package.json index 9d461a7f..68f75c9f 100644 --- a/projects/natural/package.json +++ b/projects/natural/package.json @@ -6,7 +6,7 @@ "sideEffects": false, "exports": { ".": { - "sass": "./theming/_natural.theme.scss" + "sass": "./theming/_natural.scss" } }, "dependencies": { diff --git a/projects/natural/src/lib/_natural.scss b/projects/natural/src/lib/_natural.scss new file mode 100644 index 00000000..b640cd2b --- /dev/null +++ b/projects/natural/src/lib/_natural.scss @@ -0,0 +1,21 @@ +@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'; + +/** + * Global css + */ +.mat-mdc-table .mdc-button__label { + white-space: nowrap; +} + +.natural-elevation { + box-shadow: + inset 0 1px rgba(255, 255, 255, 0.3), + 0 2px 1px -1px rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 1px 3px 0 rgba(0, 0, 0, 0.12); +} diff --git a/projects/natural/src/lib/_natural.theme.scss b/projects/natural/src/lib/_natural.theme.scss deleted file mode 100644 index 40df46d3..00000000 --- a/projects/natural/src/lib/_natural.theme.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; - -// Non themes -@use 'styles/table'; -@use 'modules/panels/panels.external'; -// Themes -@use 'modules/alert/alert.theme'; -@use 'modules/sidenav/sidenav.theme'; -@use 'modules/search/search.theme'; -@use 'modules/file/component/file.theme'; - -/** - * Global css - */ -.mat-mdc-table .mdc-button__label { - white-space: nowrap; -} - -/** - * Wrapped theme - */ -@mixin natural($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $warn: map.get($theme, warn); - $background: map.get($theme, background); - $foreground: map.get($theme, foreground); - - @include alert.natural-alert($theme); - @include sidenav.natural-sidenav($theme); - @include search.natural-search($theme); - @include table.natural-table($theme); - @include file.natural-file($theme); - - .mat-mdc-tab-labels, - .mat-mdc-tab-links, - .mdc-data-table__row:last-child .mdc-data-table__cell { - border-bottom: 1px solid mat.m2-get-color-from-palette($foreground, divider); - } - - // Since MDC dialogs, text color is too pale, so we restore a higher contrast for better readability - // See https://github.com/angular/components/issues/26797 - .mat-mdc-dialog-container .mdc-dialog__content { - color: mat.m2-get-color-from-palette(map.get($theme, foreground), base, 0.87); - } - - .natural-elevation { - box-shadow: - inset 0 1px rgba(255, 255, 255, 0.3), - 0 2px 1px -1px rgba(0, 0, 0, 0.2), - 0 1px 1px 0 rgba(0, 0, 0, 0.14), - 0 1px 3px 0 rgba(0, 0, 0, 0.12); - } -} - -$defaultConfig: mat.m2-define-typography-config(); - -// This is the default Material typography, but with button with normal letter-spacing instead of wider letter-spacing. -$typography: mat.m2-define-typography-config( - $button: mat.m2-define-typography-level( - $font-family: mat.m2-font-family($defaultConfig, 'button'), - $font-weight: mat.m2-font-weight($defaultConfig, 'button'), - $font-size: mat.m2-font-size($defaultConfig, 'button'), - $line-height: mat.m2-line-height($defaultConfig, 'button'), - $letter-spacing: normal, - ), -); - -.mdc-snackbar { - margin-top: 75px !important; -} diff --git a/projects/natural/src/lib/modules/alert/_alert.scss b/projects/natural/src/lib/modules/alert/_alert.scss new file mode 100644 index 00000000..b3218db7 --- /dev/null +++ b/projects/natural/src/lib/modules/alert/_alert.scss @@ -0,0 +1,10 @@ +@use '@angular/material' as mat; + +.snackbar-error { + @include mat.snack-bar-overrides( + ( + container-color: var(--mat-sys-error), + supporting-text-color: var(--mat-sys-on-error), + ) + ); +} diff --git a/projects/natural/src/lib/modules/alert/_alert.theme.scss b/projects/natural/src/lib/modules/alert/_alert.theme.scss deleted file mode 100644 index 0a1b4534..00000000 --- a/projects/natural/src/lib/modules/alert/_alert.theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@mixin natural-alert($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $warn: map.get($theme, warn); - $bg: map.get($theme, background); - $fg: map.get($theme, foreground); - - .snackbar-error .mdc-snackbar__surface { - background-color: mat.m2-get-color-from-palette($warn) !important; - color: mat.m2-get-color-from-palette($warn, default-contrast) !important; - } -} diff --git a/projects/natural/src/lib/modules/dropdown-components/type-date-range/type-date-range.component.html b/projects/natural/src/lib/modules/dropdown-components/type-date-range/type-date-range.component.html index f831c2cd..e3f3e2cf 100644 --- a/projects/natural/src/lib/modules/dropdown-components/type-date-range/type-date-range.component.html +++ b/projects/natural/src/lib/modules/dropdown-components/type-date-range/type-date-range.component.html @@ -1,5 +1,5 @@
- + - + - + Opérateur @for (item of operators; track item) { @@ -10,7 +10,7 @@ - + Date - + Opérateur @for (item of operators; track item) { diff --git a/projects/natural/src/lib/modules/dropdown-components/type-natural-select/type-natural-select.component.html b/projects/natural/src/lib/modules/dropdown-components/type-natural-select/type-natural-select.component.html index 54d5defe..2f1b4eb7 100644 --- a/projects/natural/src/lib/modules/dropdown-components/type-natural-select/type-natural-select.component.html +++ b/projects/natural/src/lib/modules/dropdown-components/type-natural-select/type-natural-select.component.html @@ -1,5 +1,5 @@ - + Opérateur @for (item of operators; track item) { diff --git a/projects/natural/src/lib/modules/dropdown-components/type-number/type-number.component.html b/projects/natural/src/lib/modules/dropdown-components/type-number/type-number.component.html index adeac406..1eed84c9 100644 --- a/projects/natural/src/lib/modules/dropdown-components/type-number/type-number.component.html +++ b/projects/natural/src/lib/modules/dropdown-components/type-number/type-number.component.html @@ -1,5 +1,5 @@ - + Opérateur @for (item of operators; track item) { @@ -10,7 +10,7 @@ - + Valeur @if (configuration.operators) { - + Opérateur @for (item of operators; track item) { diff --git a/projects/natural/src/lib/modules/dropdown-components/type-text/type-text.component.html b/projects/natural/src/lib/modules/dropdown-components/type-text/type-text.component.html index c3833abf..168c01de 100644 --- a/projects/natural/src/lib/modules/dropdown-components/type-text/type-text.component.html +++ b/projects/natural/src/lib/modules/dropdown-components/type-text/type-text.component.html @@ -1,4 +1,4 @@ - + Valeur div { display: flex; diff --git a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss index ac2b6b8a..c17e8c9f 100644 --- a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss +++ b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss @@ -52,7 +52,7 @@ mat-nested-tree-node { } .unexpandable { - padding-left: 48px; + padding-left: 40px; } .selection { diff --git a/projects/natural/src/lib/modules/panels/_panels.external.scss b/projects/natural/src/lib/modules/panels/panels.scss similarity index 88% rename from projects/natural/src/lib/modules/panels/_panels.external.scss rename to projects/natural/src/lib/modules/panels/panels.scss index 7ef23461..37f74121 100644 --- a/projects/natural/src/lib/modules/panels/_panels.external.scss +++ b/projects/natural/src/lib/modules/panels/panels.scss @@ -1,6 +1,16 @@ +@use '@angular/material' as mat; + .cdk-overlay-container { + @include mat.dialog-overrides( + ( + container-shape: 0, + container-max-width: 100vw, + ) + ); + .panel { margin: 10px; + box-shadow: var(--mat-sys-level2); max-width: calc(100vw - 84px); @media (max-width: 960px) { @@ -45,6 +55,7 @@ position: relative; cursor: pointer; + .panelBody { display: none !important; } diff --git a/projects/natural/src/lib/modules/search/dropdown-container/_dropdown-container.theme.scss b/projects/natural/src/lib/modules/search/dropdown-container/_dropdown-container.theme.scss deleted file mode 100644 index 100674b8..00000000 --- a/projects/natural/src/lib/modules/search/dropdown-container/_dropdown-container.theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@mixin natural-dropdown-container($theme) { - $background: map.get($theme, background); - $foreground: map.get($theme, foreground); - - .natural-dropdown-container { - background: mat.m2-get-color-from-palette($background, 'card'); - - & > * > * > * { - outline: none !important; - } - } -} diff --git a/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.html b/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.html index adbe5151..afc66d95 100644 --- a/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.html +++ b/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.html @@ -1,5 +1,5 @@