diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000..47a861b1 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,55 @@ +You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. + +## TypeScript Best Practices + +- Use strict type checking +- Prefer type inference when the type is obvious +- Avoid the `any` type; use `unknown` when type is uncertain + +## Angular Best Practices + +- Always use standalone components over NgModules +- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. +- Use signals for state management +- Implement lazy loading for feature routes +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead +- Use `NgOptimizedImage` for all static images. + - `NgOptimizedImage` does not work for inline base64 images. + +## Accessibility Requirements + +- It MUST pass all AXE checks. +- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. + +### Components + +- Keep components small and focused on a single responsibility +- Use `input()` and `output()` functions instead of decorators +- Use `computed()` for derived state +- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator +- Prefer inline templates for small components +- Prefer Reactive forms instead of Template-driven ones +- Do NOT use `ngClass`, use `class` bindings instead +- Do NOT use `ngStyle`, use `style` bindings instead +- When using external templates/styles, use paths relative to the component TS file. + +## State Management + +- Use signals for local component state +- Use `computed()` for derived state +- Keep state transformations pure and predictable +- Do NOT use `mutate` on signals, use `update` or `set` instead + +## Templates + +- Keep templates simple and avoid complex logic +- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` +- Use the async pipe to handle observables +- Do not assume globals like (`new Date()`) are available. +- Do not write arrow functions in templates (they are not supported). + +## Services + +- Design services around a single responsibility +- Use the `providedIn: 'root'` option for singleton services +- Use the `inject()` function instead of constructor injection diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e828f373..e2096a1d 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -10,6 +10,7 @@ jobs: fetch-depth: 0 # Need all tags to get a version number in-between tags - uses: actions/setup-node@v4 with: + node-version: '24' cache: 'yarn' - run: yarn --frozen-lockfile - run: yarn build-demo @@ -25,6 +26,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: + node-version: '24' cache: 'yarn' - run: yarn --frozen-lockfile - run: ./node_modules/.bin/ng test natural --progress false --watch=false --browsers ChromeHeadlessCustom @@ -38,6 +40,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: + node-version: '24' cache: 'yarn' - run: yarn --frozen-lockfile - run: yarn lint @@ -48,6 +51,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: + node-version: '24' cache: 'yarn' - run: yarn --frozen-lockfile - run: ./node_modules/.bin/prettier --experimental-cli --check . @@ -75,9 +79,7 @@ jobs: id-token: write packages: write if: github.event_name == 'push' && contains(github.ref, 'refs/tags/') - needs: - - build - - test + needs: [build, test, lint, prettier] steps: - uses: actions/checkout@v4 with: @@ -91,24 +93,11 @@ jobs: # Publish to npm - uses: actions/setup-node@v4 with: + node-version: '24' registry-url: 'https://registry.npmjs.org' - - run: npm publish --provenance --access public dist/natural/ - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - - run: npm publish --provenance --access public dist/natural-editor/ - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - # Publish to GitHub Packages - - uses: actions/setup-node@v4 - with: - registry-url: 'https://npm.pkg.github.com' - - run: npm publish --provenance --access public dist/natural/ - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - run: npm publish --provenance --access public dist/natural-editor/ - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - run: npm publish dist/natural/ + - run: npm publish dist/natural-editor/ # Create release - name: Get release info diff --git a/README.md b/README.md index 6a90ba09..5ed1bcac 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,6 @@ [![Total Downloads](https://img.shields.io/npm/dt/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural) [![Latest Stable Version](https://img.shields.io/npm/v/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural) [![License](https://img.shields.io/npm/l/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural) -[![Join the chat at https://gitter.im/Ecodev/natural](https://badges.gitter.im/Ecodev/natural.svg)](https://gitter.im/Ecodev/natural) This project is a collection of Angular Material components and various utilities classes for Angular projects. diff --git a/angular.json b/angular.json index c6bc953b..542e5963 100644 --- a/angular.json +++ b/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, diff --git a/eslint.config.mjs b/eslint.config.mjs index abf00ca2..0e102a6b 100644 --- a/eslint.config.mjs +++ b/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', diff --git a/package.json b/package.json index fc577eb6..b10b4209 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "demo", - "version": "0.0.0", + "version": "66.0.13", "license": "MIT", "scripts": { "ng": "ng", @@ -53,7 +53,7 @@ "prosemirror-view": "^1.41.0", "rxjs": "^7.8.2", "tslib": "^2.8.1", - "type-fest": "^4.41.0", + "type-fest": "^5.3.1", "zone.js": "~0.15.1" }, "devDependencies": { diff --git a/projects/natural-editor/package.json b/projects/natural-editor/package.json index 32ca5fff..4d5118ac 100644 --- a/projects/natural-editor/package.json +++ b/projects/natural-editor/package.json @@ -2,7 +2,10 @@ "name": "@ecodev/natural-editor", "version": "0.0.1", "license": "MIT", - "repository": "github:Ecodev/natural", + "repository": { + "type": "git", + "url": "git+https://github.com/Ecodev/natural.git" + }, "sideEffects": false, "exports": { ".": { 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.html b/projects/natural-editor/src/lib/editor/editor.component.html index 33188f22..da09d80f 100644 --- a/projects/natural-editor/src/lib/editor/editor.component.html +++ b/projects/natural-editor/src/lib/editor/editor.component.html @@ -3,7 +3,7 @@
@if (save$.observed) { - } @@ -268,7 +268,7 @@ @if (imageUploader()) { + } +
diff --git a/projects/natural/src/lib/modules/color-schemer/color-schemer.component.ts b/projects/natural/src/lib/modules/color-schemer/color-schemer.component.ts new file mode 100644 index 00000000..b124d2f3 --- /dev/null +++ b/projects/natural/src/lib/modules/color-schemer/color-schemer.component.ts @@ -0,0 +1,17 @@ +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {MatIconButton} from '@angular/material/button'; +import {MatIcon} from '@angular/material/icon'; +import {MatTooltip} from '@angular/material/tooltip'; +import {colorSchemeOptions, NaturalThemeService} from '../../services/theme.service'; + +@Component({ + selector: 'natural-color-schemer', + imports: [MatIconButton, MatTooltip, MatIcon], + templateUrl: './color-schemer.component.html', + styleUrl: './color-schemer.component.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NaturalColorSchemerComponent { + protected readonly themeService = inject(NaturalThemeService); + protected readonly colorSchemeOptions = colorSchemeOptions; +} diff --git a/projects/natural/src/lib/modules/color-schemer/public-api.ts b/projects/natural/src/lib/modules/color-schemer/public-api.ts new file mode 100644 index 00000000..63d241a6 --- /dev/null +++ b/projects/natural/src/lib/modules/color-schemer/public-api.ts @@ -0,0 +1,5 @@ +/* + * Public API Surface of natural + */ + +export {NaturalColorSchemerComponent} from './color-schemer.component'; diff --git a/projects/natural/src/lib/modules/columns-picker/columns-picker.component.html b/projects/natural/src/lib/modules/columns-picker/columns-picker.component.html index 4a4925b1..5c293649 100644 --- a/projects/natural/src/lib/modules/columns-picker/columns-picker.component.html +++ b/projects/natural/src/lib/modules/columns-picker/columns-picker.component.html @@ -1,7 +1,7 @@
@if ((isMobile | async) && someVisibleButtons()) { - @@ -74,7 +74,7 @@ @if (defaultTrue(button.show)) { @if (button.href) { } @else if (button.buttons) { + + @for (option of colorSchemeOptions; track $index) { + + } + diff --git a/projects/natural/src/lib/modules/compact-color-schemer/compact-color-schemer.component.ts b/projects/natural/src/lib/modules/compact-color-schemer/compact-color-schemer.component.ts new file mode 100644 index 00000000..bf716fe0 --- /dev/null +++ b/projects/natural/src/lib/modules/compact-color-schemer/compact-color-schemer.component.ts @@ -0,0 +1,20 @@ +import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core'; +import {MatIconButton} from '@angular/material/button'; +import {MatIcon} from '@angular/material/icon'; +import {MatTooltip} from '@angular/material/tooltip'; +import {colorSchemeOptions, NaturalThemeService} from '../../services/theme.service'; +import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu'; + +@Component({ + selector: 'natural-compact-color-schemer', + imports: [MatIconButton, MatTooltip, MatIcon, MatMenu, MatMenuItem, MatMenuTrigger], + templateUrl: './compact-color-schemer.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NaturalCompactColorSchemerComponent { + protected readonly themeService = inject(NaturalThemeService); + protected readonly colorSchemeOptions = colorSchemeOptions; + protected readonly current = computed(() => + colorSchemeOptions.find(choice => this.themeService.colorScheme() === choice.value), + ); +} diff --git a/projects/natural/src/lib/modules/compact-color-schemer/public-api.ts b/projects/natural/src/lib/modules/compact-color-schemer/public-api.ts new file mode 100644 index 00000000..ca1b0154 --- /dev/null +++ b/projects/natural/src/lib/modules/compact-color-schemer/public-api.ts @@ -0,0 +1,5 @@ +/* + * Public API Surface of natural + */ + +export {NaturalCompactColorSchemerComponent} from './compact-color-schemer.component'; diff --git a/projects/natural/src/lib/modules/detail-header/detail-header.component.html b/projects/natural/src/lib/modules/detail-header/detail-header.component.html index c11e1a8c..84836301 100644 --- a/projects/natural/src/lib/modules/detail-header/detail-header.component.html +++ b/projects/natural/src/lib/modules/detail-header/detail-header.component.html @@ -19,10 +19,10 @@
} @if (!model.id) { -
{{ newLabel() }}
+
{{ newLabel() }}
} @if (model.id) { -
{{ model.name || model.fullName || label }}
+
{{ model.name || model.fullName || label }}
}
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..5d41c0e7 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) { @@ -11,7 +11,7 @@ @if (requireValueCtrl) { - + 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..71120c6e 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 368a4746..f189b532 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,9 @@ - + Opérateur @for (item of operators; track item) { @@ -11,7 +15,7 @@ @if (requireValueCtrl) { - + 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..0e06345f 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 a { @@ -9,6 +11,7 @@ flex: 1; background-position: center; background-repeat: no-repeat; + background-color: var(--mat-sys-surface-container-lowest); &.has-action { cursor: pointer; @@ -42,6 +45,16 @@ text-align: center; } + .action-overlay { + background-color: color-mix(in srgb, var(--mat-sys-primary-fixed) 85%, transparent); + color: var(--mat-sys-on-primary-fixed); + } + + .file-preview { + background-color: color-mix(in srgb, var(--mat-sys-tertiary-fixed) 85%, transparent); + color: var(--mat-sys-on-tertiary-fixed); + } + .action-overlay { opacity: 0; diff --git a/projects/natural/src/lib/modules/fixed-button-detail/fixed-button-detail.component.html b/projects/natural/src/lib/modules/fixed-button-detail/fixed-button-detail.component.html index 89be1120..7f29bb64 100644 --- a/projects/natural/src/lib/modules/fixed-button-detail/fixed-button-detail.component.html +++ b/projects/natural/src/lib/modules/fixed-button-detail/fixed-button-detail.component.html @@ -3,7 +3,7 @@ class="detail-speed-dial" icon="save" [disabled]="form.disabled" - [color]="form.valid ? 'accent' : 'warn'" + [color]="form.valid ? 'tertiary' : 'error'" (click)="clickCreate()" /> } @@ -11,7 +11,6 @@ @if (!isCreation && (!model.permissions || model.permissions.delete)) { (); public readonly link = input(null); - public readonly color = input('accent'); + public readonly color = input('tertiary'); public readonly disabled = input(false); } diff --git a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.component.html b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.component.html index 2703bfb6..85dffd3e 100644 --- a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.component.html +++ b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.component.html @@ -16,7 +16,7 @@

Sélection

- diff --git a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.html b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.html index 4d2cb0ba..e08af603 100644 --- a/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.html +++ b/projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.html @@ -36,7 +36,7 @@ >
@if (node.isExpandable) { - +
}
diff --git a/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.scss b/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.scss index 7ae9fcb1..7f818a30 100644 --- a/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.scss +++ b/projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.scss @@ -1,3 +1,5 @@ +@use '@angular/material' as mat; + @keyframes _mat-menu-enter { from { transform: scale(0.8); @@ -24,10 +26,15 @@ display: flex; flex-direction: column; animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1); - + box-shadow: var(--mat-sys-level2); border-radius: 2px; + background: var(--mat-sys-surface-container-high); height: 100%; + & > * > * > * { + outline: none !important; + } + &-content { flex: 1; padding: 5px; diff --git a/projects/natural/src/lib/modules/search/facet-selector/facet-selector.component.html b/projects/natural/src/lib/modules/search/facet-selector/facet-selector.component.html index 4ce1b0fe..0c4143cc 100644 --- a/projects/natural/src/lib/modules/search/facet-selector/facet-selector.component.html +++ b/projects/natural/src/lib/modules/search/facet-selector/facet-selector.component.html @@ -1,5 +1,5 @@ @if (data.title) { -
{{ data.title }}
+
{{ data.title }}
} @for (facet of facets; track $index) { diff --git a/projects/natural/src/lib/modules/search/input/_input.theme.scss b/projects/natural/src/lib/modules/search/input/_input.theme.scss deleted file mode 100644 index d1651b5a..00000000 --- a/projects/natural/src/lib/modules/search/input/_input.theme.scss +++ /dev/null @@ -1,23 +0,0 @@ -/** - This is not really theming as there is no color, but it's some custom styles to allow flexible with inputs that require - to override inner mat-form-field html elements. This styling needs to escape from namespacing and theming is the easier way to apply them. - */ -@mixin natural-input($theme) { - natural-input { - .mat-mdc-form-field-infix { - margin-right: 10px; - margin-left: 10px; - width: auto; - } - - .mat-form-field-flex { - align-items: flex-start; // Fix firefox misalignment with baseline and mat-icon-button that seems not accepted by @a/material - padding-right: 0; - padding-left: 0; - } - - .mat-mdc-form-field { - margin-bottom: -1.25em; - } - } -} diff --git a/projects/natural/src/lib/modules/search/input/input.component.html b/projects/natural/src/lib/modules/search/input/input.component.html index 52407024..5f46b209 100644 --- a/projects/natural/src/lib/modules/search/input/input.component.html +++ b/projects/natural/src/lib/modules/search/input/input.component.html @@ -1,5 +1,9 @@ - + @if (facet) { {{ facet.display }} } @@ -25,13 +29,13 @@ } @if (selection) { - } @if (facet && !selection) { - } diff --git a/projects/natural/src/lib/modules/search/search.theme.scss b/projects/natural/src/lib/modules/search/search.theme.scss deleted file mode 100644 index d74c0f68..00000000 --- a/projects/natural/src/lib/modules/search/search.theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'input/input.theme'; -@use 'dropdown-container/dropdown-container.theme'; - -@mixin natural-search($theme) { - @include input.natural-input($theme); - @include dropdown-container.natural-dropdown-container($theme); -} diff --git a/projects/natural/src/lib/modules/search/search/search.component.html b/projects/natural/src/lib/modules/search/search/search.component.html index 3389c1d6..b18f54b7 100644 --- a/projects/natural/src/lib/modules/search/search/search.component.html +++ b/projects/natural/src/lib/modules/search/search/search.component.html @@ -12,7 +12,7 @@
@if ($count > 1) { } -
diff --git a/projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.html b/projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.html index 4aa2bef4..d6503121 100644 --- a/projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.html +++ b/projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.html @@ -25,7 +25,7 @@
@if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) { } @if (showClearButton()) { - + }
} diff --git a/projects/natural/src/lib/modules/select/select/select.component.html b/projects/natural/src/lib/modules/select/select/select.component.html index eca6bd90..ad277515 100644 --- a/projects/natural/src/lib/modules/select/select/select.component.html +++ b/projects/natural/src/lib/modules/select/select/select.component.html @@ -61,18 +61,18 @@
@if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) { - } @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) { - } @if (internalCtrl.pristine && internalCtrl.value && navigateTo) { + }
} diff --git a/projects/natural/src/lib/modules/sidenav/_sidenav.theme.scss b/projects/natural/src/lib/modules/sidenav/_sidenav.theme.scss deleted file mode 100644 index d5eeded5..00000000 --- a/projects/natural/src/lib/modules/sidenav/_sidenav.theme.scss +++ /dev/null @@ -1,40 +0,0 @@ -@use 'sass:map'; -@mixin natural-sidenav($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $background: map.get($theme, background); - $foreground: map.get($theme, foreground); - - natural-sidenav-container { - .mat-drawer { - border-right: none; - } - - mat-sidenav.modeSide { - .mat-drawer-inner-container { - display: flex; - flex-direction: column; - } - - natural-sidenav { - display: flex; - flex: 1; - min-height: 0; - } - } - - mat-sidenav-content { - display: flex !important; - - & > div { - display: flex; - flex: 1; - - natural-sidenav-content { - display: flex; - flex: 1; - } - } - } - } -} diff --git a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.html b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.html index 9b60a9a1..0104d494 100644 --- a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.html +++ b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.html @@ -2,7 +2,7 @@ -
- -
+ diff --git a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.scss b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.scss index e9fa69d6..0abccaaf 100644 --- a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.scss +++ b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.scss @@ -1,6 +1,7 @@ :host { display: flex; flex-direction: column; + height: 0; mat-sidenav-container { display: flex; diff --git a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.ts b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.ts index 0c4509b4..8739aff7 100644 --- a/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.ts +++ b/projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.ts @@ -31,7 +31,7 @@ export class NaturalSidenavContainerComponent implements OnInit, OnDestroy { /** * Width of the minimized menu */ - public readonly minimizedWidth = input(150); + public readonly minimizedWidth = input(125); /** * If true, prevents "native" material sidenav to scroll at container level and delegates the scroll responsability to the transcluded diff --git a/projects/natural/src/lib/modules/sidenav/sidenav.scss b/projects/natural/src/lib/modules/sidenav/sidenav.scss new file mode 100644 index 00000000..de1d58db --- /dev/null +++ b/projects/natural/src/lib/modules/sidenav/sidenav.scss @@ -0,0 +1,32 @@ +natural-sidenav-container { + .mat-drawer { + border-right: none; + } + + mat-sidenav.mode-side { + .mat-drawer-inner-container { + display: flex; + flex-direction: column; + } + + natural-sidenav { + display: flex; + flex: 1; + min-height: 0; + } + } + + mat-sidenav-content { + display: flex !important; + + & > div { + display: flex; + flex: 1; + + natural-sidenav-content { + display: flex; + flex: 1; + } + } + } +} diff --git a/projects/natural/src/lib/modules/table-button/table-button.component.html b/projects/natural/src/lib/modules/table-button/table-button.component.html index c69a87a4..1c14b972 100644 --- a/projects/natural/src/lib/modules/table-button/table-button.component.html +++ b/projects/natural/src/lib/modules/table-button/table-button.component.html @@ -1,5 +1,5 @@ - + @let theIcon = icon(); @@ -35,8 +35,7 @@ } @else { {{ label() }} } @else { - + @if (theIcon) { } diff --git a/projects/natural/src/lib/modules/table-button/table-button.component.ts b/projects/natural/src/lib/modules/table-button/table-button.component.ts index 0fa58cd0..12bb96e1 100644 --- a/projects/natural/src/lib/modules/table-button/table-button.component.ts +++ b/projects/natural/src/lib/modules/table-button/table-button.component.ts @@ -1,7 +1,8 @@ import {ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation} from '@angular/core'; import {Params, QueryParamsHandling, RouterLink, UrlTree} from '@angular/router'; -import {ThemePalette} from '@angular/material/core'; + import {MatButton, type MatButtonAppearance, MatIconButton} from '@angular/material/button'; +import {NaturalPalette} from '../../types/types'; import {NaturalIconDirective} from '../icon/icon.directive'; import {MatIcon} from '@angular/material/icon'; import {Subject} from 'rxjs'; @@ -36,10 +37,8 @@ export class NaturalTableButtonComponent { public readonly fragment = input(); public readonly preserveFragment = input(false); public readonly disabled = input(false); - public readonly raised = input(false); - protected readonly appearance = computed(() => (this.raised() ? 'elevated' : 'text')); - protected readonly iconClass = computed(() => (this.raised() ? 'mat-elevation-z4' : '')); - public readonly color = input(); + public readonly appearance = input('text'); + public readonly color = input(); protected readonly buttonClick$ = new Subject(); public readonly buttonClick = outputFromObservable(this.buttonClick$); diff --git a/projects/natural/src/lib/modules/theme-changer/public-api.ts b/projects/natural/src/lib/modules/theme-changer/public-api.ts new file mode 100644 index 00000000..62c0c6c2 --- /dev/null +++ b/projects/natural/src/lib/modules/theme-changer/public-api.ts @@ -0,0 +1,5 @@ +/* + * Public API Surface of natural + */ + +export {NaturalThemeChangerComponent} from './theme-changer.component'; diff --git a/projects/natural/src/lib/modules/theme-changer/theme-changer.component.html b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.html new file mode 100644 index 00000000..6d98d535 --- /dev/null +++ b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.html @@ -0,0 +1,11 @@ + + + @for (theme of allThemes; track $index) { + + } + diff --git a/projects/natural/src/lib/modules/theme-changer/theme-changer.component.scss b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.scss new file mode 100644 index 00000000..6daa0858 --- /dev/null +++ b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.scss @@ -0,0 +1,10 @@ +:host { + display: block; + width: fit-content; +} + +.wrapper { + border-radius: var(--mat-sys-corner-full); + background: var(--mat-sys-surface-bright); + padding: 5px; +} diff --git a/projects/natural/src/lib/modules/theme-changer/theme-changer.component.ts b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.ts new file mode 100644 index 00000000..40d24f76 --- /dev/null +++ b/projects/natural/src/lib/modules/theme-changer/theme-changer.component.ts @@ -0,0 +1,18 @@ +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {MatButton} from '@angular/material/button'; +import {MatIcon} from '@angular/material/icon'; +import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu'; +import {NATURAL_THEMES_CONFIG, NaturalThemeService} from '../../services/theme.service'; +import {NaturalIconDirective} from '../icon/icon.directive'; + +@Component({ + selector: 'natural-theme-changer', + imports: [MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatIcon, NaturalIconDirective], + templateUrl: './theme-changer.component.html', + styleUrl: './theme-changer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NaturalThemeChangerComponent { + protected readonly themeService = inject(NaturalThemeService); + protected readonly allThemes = inject(NATURAL_THEMES_CONFIG); +} diff --git a/projects/natural/src/lib/services/theme.service.ts b/projects/natural/src/lib/services/theme.service.ts new file mode 100644 index 00000000..cc2b6148 --- /dev/null +++ b/projects/natural/src/lib/services/theme.service.ts @@ -0,0 +1,136 @@ +import {isPlatformBrowser} from '@angular/common'; +import { + computed, + DOCUMENT, + effect, + EnvironmentProviders, + inject, + Injectable, + InjectionToken, + makeEnvironmentProviders, + PLATFORM_ID, + provideAppInitializer, + signal, +} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {fromEvent, map, of} from 'rxjs'; +import {startWith} from 'rxjs/operators'; +import {LOCAL_STORAGE} from '../modules/common/services/memory-storage'; + +type AllThemes = [string, ...string[]]; +export const NATURAL_THEMES_CONFIG = new InjectionToken('Configuration for Natural Theme'); + +/** + * If you are using themes, or color scheme, then you must provide themes at the application level. + * + * If there is a only one theme, you still need to provide a name for it (eg: "my-app"), even if + * it is not used in the SCSS. + */ +export function provideThemes(config: AllThemes): EnvironmentProviders { + return makeEnvironmentProviders([ + { + provide: NATURAL_THEMES_CONFIG, + useValue: config, + }, + provideAppInitializer(() => { + inject(NaturalThemeService); + }), + ]); +} + +export enum ColorScheme { + Light = 'light', + Dark = 'dark', + Auto = 'auto', +} + +export const colorSchemeOptions = [ + {value: ColorScheme.Auto, label: $localize`Thème de l'appareil`, icon: 'routine'}, + {value: ColorScheme.Light, label: $localize`Thème clair`, icon: 'light_mode'}, + {value: ColorScheme.Dark, label: $localize`Thème sombre`, icon: 'dark_mode'}, +] as const; + +/** + * The source of truth is the DOM. And thus the index.html (or equivalent) must use vanilla JavaScript + * to restore `data-color-scheme` and `data-theme` attributes on the `` element (eg: from + * local storage, or from DB). + */ +@Injectable({ + providedIn: 'root', +}) +export class NaturalThemeService { + private readonly allThemes = inject(NATURAL_THEMES_CONFIG); + private readonly storage = inject(LOCAL_STORAGE); + private readonly platformId = inject(PLATFORM_ID); + protected readonly document = inject(DOCUMENT); + private readonly htmlElement = this.document.documentElement; + + private readonly isDarkSystem = toSignal( + isPlatformBrowser(this.platformId) + ? fromEvent( + this.document.defaultView!.matchMedia('(prefers-color-scheme: dark)'), + 'change', + ).pipe( + startWith(this.document.defaultView!.matchMedia('(prefers-color-scheme: dark)')), + map(e => e.matches), + ) + : of(false), + {initialValue: false}, + ); + + private readonly isDark = computed(() => { + return ( + this.colorScheme() === ColorScheme.Dark || (this.colorScheme() === ColorScheme.Auto && this.isDarkSystem()) + ); + }); + + private readonly _theme = signal(this.allThemes[0]); + + /** + * Currently selected theme. Use `setTheme()` to select a different theme. + */ + public readonly theme = this._theme.asReadonly(); + + private readonly _colorScheme = signal(ColorScheme.Auto); + + /** + * Currently selected color scheme. Use `setColorScheme()` to select a different scheme. + */ + public readonly colorScheme = this._colorScheme.asReadonly(); + + public constructor() { + effect(() => { + this.htmlElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false'); + }); + + const storedScheme = this.storage.getItem('color-scheme') as ColorScheme | null; + const isValidScheme = storedScheme && Object.values(ColorScheme).includes(storedScheme); + this._colorScheme.set(isValidScheme ? storedScheme : ColorScheme.Auto); + } + + /** + * Set theme in memory and dom + */ + public setTheme(theme: string): void { + if (!this.allThemes.includes(theme)) { + throw new Error( + `Expecting one of the configured themes: ${this.allThemes.map(t => `'${t}'`).join(', ')}. But got invalid: '${theme}'`, + ); + } + + this._theme.set(theme); + this.htmlElement.setAttribute('data-theme', theme); + } + + /** + * Set dark/light/auto + */ + public setColorScheme(scheme: ColorScheme, persistInStorage = true): void { + this._colorScheme.set(scheme); // memory + this.htmlElement.setAttribute('data-color-scheme', scheme); // dom + + if (persistInStorage) { + this.storage.setItem('color-scheme', this.colorScheme()); // storage + } + } +} diff --git a/projects/natural/src/lib/styles/_table.scss b/projects/natural/src/lib/styles/_table.scss deleted file mode 100644 index e3b60164..00000000 --- a/projects/natural/src/lib/styles/_table.scss +++ /dev/null @@ -1,94 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; - -@mixin natural-table($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $background: map.get($theme, background); - $foreground: map.get($theme, foreground); - - .responsive-table { - overflow-x: auto; - overflow-y: hidden; - } - - [mat-table] { - width: 100%; - max-width: 100%; - - [mat-cell] { - justify-content: center; - } - - .mat-mdc-cell, - .mat-mdc-header-cell, - .mat-mdc-footer-cell { - &:first-child { - padding-right: 5px; - } - - &:last-child { - padding-left: 5px; - } - - &:not(:first-child):not(:last-child) { - padding-right: 5px; - padding-left: 5px; - } - - &.natural-align-right { - text-align: right; - } - - &.natural-align-center { - text-align: center; - - .mat-sort-header-container { - justify-content: center; - } - } - } - - [mat-row] { - &.selected { - background: mat.m2-get-color-from-palette($background, selected-button); - } - } - - [mat-header-row] { - background: mat.m2-get-color-from-palette($background, app-bar); - } - - .mat-mdc-footer-cell { - font-weight: bold; - } - - .natural-1em-column { - width: 1em; - } - - .natural-2em-column { - width: 2em; - } - - .natural-3em-column { - width: 3em; - } - - .natural-4em-column { - width: 4em; - } - - .natural-5em-column { - width: 5em; - } - - .natural-6em-column { - width: 6em; - } - - .natural-7em-column { - width: 7em; - } - } -} diff --git a/projects/natural/src/lib/styles/material-scrolling-fixes.scss b/projects/natural/src/lib/styles/material-scrolling-fixes.scss new file mode 100644 index 00000000..9facf8bf --- /dev/null +++ b/projects/natural/src/lib/styles/material-scrolling-fixes.scss @@ -0,0 +1,43 @@ +@use '@angular/material' as mat; + +html:not(.disable-material-fixes) { + // Make icon buttons bigger, same as before MD3, so their visual size match their touch target. And we avoid scrolling. + @include mat.icon-button-overrides( + ( + state-layer-size: 48px, + ) + ); + + // Reduce touch target size for buttons. Otherwise their touch targets would create scrolling. + // And it should still be fine to touch because they are naturally bigger because of their labels. + @include mat.button-overrides( + ( + text-touch-target-size: 40px, + protected-touch-target-size: 40px, + outlined-touch-target-size: 40px, + filled-touch-target-size: 40px, + tonal-touch-target-size: 40px, + ) + ); + + // Reduce touch target size for radio buttons. Otherwise their touch targets would create scrolling. + // And it should still be fine to touch because they are naturally bigger because of their labels. + @include mat.radio-overrides( + ( + touch-target-size: 40px, + ) + ); + + // mat-slide-toggle is slightly higher than before MD3, so we can see their ripple entirely. And the + // touch target is the same as before MD3. But the touch target should be fine because the label + // naturally increase the touch surface (and we never had issue in the past). + @include mat.slide-toggle-overrides( + ( + touch-target-size: 40px, + ) + ); + + .mdc-switch { + height: var(--mat-slide-toggle-touch-target-size); + } +} diff --git a/projects/natural/src/lib/styles/table.scss b/projects/natural/src/lib/styles/table.scss new file mode 100644 index 00000000..6e156b63 --- /dev/null +++ b/projects/natural/src/lib/styles/table.scss @@ -0,0 +1,107 @@ +@use '@angular/material' as mat; + +.responsive-table { + overflow-x: auto; + overflow-y: hidden; +} + +:root { + @include mat.table-overrides( + ( + background-color: var(--mat-sys-surface-container-low), + ) + ); + + .mat-mdc-header-row { + background-color: var(--mat-sys-surface-container-high); + } + + .mat-mdc-footer-row { + background: var(--mat-sys-surface-container-low); + } + + @include mat.paginator-overrides( + ( + container-background-color: var(--mat-sys-surface-container-low), + ) + ); +} + +[mat-table] { + width: 100%; + max-width: 100%; + + [mat-cell] { + justify-content: center; + } + + .mdc-data-table__content .mdc-data-table__row:last-child .mdc-data-table__cell { + border-bottom: 1px solid var(--mat-sys-outline-variant); + } + + .mat-mdc-cell, + .mat-mdc-header-cell, + .mat-mdc-footer-cell { + &:first-child { + padding-right: 5px; + } + + &:last-child { + padding-left: 5px; + } + + &:not(:first-child):not(:last-child) { + padding-right: 5px; + padding-left: 5px; + } + + &.natural-align-right { + text-align: right; + } + + &.natural-align-center { + text-align: center; + + .mat-sort-header-container { + justify-content: center; + } + } + } + + [mat-row].selected { + // todo : remove ? when is it used ? + //background: mat.m2-get-color-from-palette($background, selected-button); + } + + .mat-mdc-footer-cell { + font-weight: bold; + } + + .natural-1em-column { + width: 1em; + } + + .natural-2em-column { + width: 2em; + } + + .natural-3em-column { + width: 3em; + } + + .natural-4em-column { + width: 4em; + } + + .natural-5em-column { + width: 5em; + } + + .natural-6em-column { + width: 6em; + } + + .natural-7em-column { + width: 7em; + } +} diff --git a/projects/natural/src/lib/types/types.ts b/projects/natural/src/lib/types/types.ts index 0447f993..a37d0d82 100644 --- a/projects/natural/src/lib/types/types.ts +++ b/projects/natural/src/lib/types/types.ts @@ -162,3 +162,5 @@ export type UntypedModelService = NaturalAbstractModelService = { readonly [KeyType in keyof Pick]: ObservedValueOf[KeyType]>>; }; + +export type NaturalPalette = 'primary' | 'tertiary' | 'error' | undefined; diff --git a/projects/natural/src/public-api.ts b/projects/natural/src/public-api.ts index 408790b2..0038f369 100644 --- a/projects/natural/src/public-api.ts +++ b/projects/natural/src/public-api.ts @@ -22,6 +22,7 @@ export {NaturalDebounceService} from './lib/services/debounce.service'; export * from './lib/services/enum.service'; export * from './lib/services/link-mutation.service'; export {NaturalPersistenceService, NATURAL_PERSISTENCE_VALIDATOR} from './lib/services/persistence.service'; +export {provideThemes, ColorScheme, NaturalThemeService} from './lib/services/theme.service'; export type {PersistenceValidator} from './lib/services/persistence.service'; export * from './lib/services/swiss-parsing-date-adapter.service'; @@ -41,6 +42,7 @@ export type { Literal, NameOrFullName, ResolvedData, + NaturalPalette, } from './lib/types/types'; export * from './lib/modules/alert/public-api'; @@ -64,6 +66,9 @@ export * from './lib/modules/dialog-trigger/public-api'; export * from './lib/modules/avatar/public-api'; export * from './lib/modules/matomo/public-api'; export * from './lib/modules/logger/public-api'; +export * from './lib/modules/color-schemer/public-api'; +export * from './lib/modules/compact-color-schemer/public-api'; +export * from './lib/modules/theme-changer/public-api'; export * from './lib/directives/http-prefix.directive'; export {naturalProviders} from './lib/classes/providers'; diff --git a/src/app/alert/alert.component.html b/src/app/alert/alert.component.html index 71646ab6..bbdcebc9 100644 --- a/src/app/alert/alert.component.html +++ b/src/app/alert/alert.component.html @@ -1,4 +1,4 @@ -

NaturalAlertService

+

NaturalAlertService

alertService.confirm() diff --git a/src/app/app-routing.ts b/src/app/app.routes.ts similarity index 85% rename from src/app/app-routing.ts rename to src/app/app.routes.ts index 5094e25f..c91b6725 100644 --- a/src/app/app-routing.ts +++ b/src/app/app.routes.ts @@ -10,6 +10,7 @@ import { import {resolveHardcodedItem, resolveItem} from '../../projects/natural/src/lib/testing/item.resolver'; import {AlertComponent} from './alert/alert.component'; import {AvatarComponent} from './avatar/avatar.component'; +import {ButtonsComponent} from './buttons/buttons.component'; import {DetailHeaderComponent} from './detail-header/detail-header.component'; import {DetailComponent} from './detail/detail.component'; import {EditableListComponent} from './editable-list/editable-list.component'; @@ -22,7 +23,7 @@ import {ListComponent} from './list/list.component'; import {ModalPlaceholderComponent} from './modal-placeholder/modal-placeholder.component'; import {NavigableListComponent} from './navigable-list/navigable-list.component'; import {OtherComponent} from './other/other.component'; -import {panelsRoutes} from './panels-routing'; +import {panelsRoutes} from './panels.routes'; import {PanelsComponent} from './panels/panels.component'; import {RelationsComponent} from './relations/relations.component'; import {SearchComponent} from './search/search.component'; @@ -30,6 +31,9 @@ import {SelectEnumComponent} from './select-enum/select-enum.component'; import {SelectHierarchicComponent} from './select-hierarchic/select-hierarchic.component'; import {SelectComponent} from './select/select.component'; import {TableStyleComponent} from './table-style/table-style.component'; +import {ThemeMergerComponent} from './theme-merger/theme-merger.component'; +import {TypographyComponent} from './typography/typography.component'; +import {MaterialFixesComponent} from './material-fixes/material-fixes.component'; export const routes: Routes = [ { @@ -164,6 +168,34 @@ export const routes: Routes = [ seo: {title: 'Editor'} satisfies NaturalSeo, }, }, + { + path: 'theme-merger', + component: ThemeMergerComponent, + data: { + seo: {title: 'Theme merger'} satisfies NaturalSeo, + }, + }, + { + path: 'typography', + component: TypographyComponent, + data: { + seo: {title: 'Typography'} satisfies NaturalSeo, + }, + }, + { + path: 'buttons', + component: ButtonsComponent, + data: { + seo: {title: 'Buttons'} satisfies NaturalSeo, + }, + }, + { + path: 'material-fixes', + component: MaterialFixesComponent, + data: { + seo: {title: 'Material fixes'} satisfies NaturalSeo, + }, + }, { path: 'other', component: OtherComponent, diff --git a/src/app/avatar/avatar.component.html b/src/app/avatar/avatar.component.html index 5007a85f..b9694392 100644 --- a/src/app/avatar/avatar.component.html +++ b/src/app/avatar/avatar.component.html @@ -1,4 +1,4 @@ -

natural-avatar

+

natural-avatar

Avatar from different sources

@@ -83,7 +83,7 @@

Misc

Failed sources are not retried

- +
diff --git a/src/app/buttons/buttons.component.html b/src/app/buttons/buttons.component.html new file mode 100644 index 00000000..3b77a2ac --- /dev/null +++ b/src/app/buttons/buttons.component.html @@ -0,0 +1,71 @@ +

natural-avatar

+ +
+ + + + + + + + + + + + + + + + +
+ + + + + + +
+
+ + + + + + +
+
+ + + +
+
diff --git a/src/app/buttons/buttons.component.scss b/src/app/buttons/buttons.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/buttons/buttons.component.spec.ts b/src/app/buttons/buttons.component.spec.ts new file mode 100644 index 00000000..06d0dbf3 --- /dev/null +++ b/src/app/buttons/buttons.component.spec.ts @@ -0,0 +1,22 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; + +import {ButtonsComponent} from './buttons.component'; + +describe('ButtonsComponent', () => { + let component: ButtonsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ButtonsComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ButtonsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/buttons/buttons.component.ts b/src/app/buttons/buttons.component.ts new file mode 100644 index 00000000..46b750eb --- /dev/null +++ b/src/app/buttons/buttons.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {MatButton, MatFabButton, MatIconButton, MatMiniFabButton} from '@angular/material/button'; +import {MatIcon} from '@angular/material/icon'; +import {NaturalIconDirective} from '@ecodev/natural'; + +@Component({ + selector: 'app-buttons', + imports: [NaturalIconDirective, MatButton, MatMiniFabButton, MatFabButton, MatIconButton, MatIcon], + templateUrl: './buttons.component.html', + styleUrl: './buttons.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ButtonsComponent {} diff --git a/src/app/detail-header/detail-header.component.html b/src/app/detail-header/detail-header.component.html index e86f245b..84f675db 100644 --- a/src/app/detail-header/detail-header.component.html +++ b/src/app/detail-header/detail-header.component.html @@ -1,13 +1,13 @@
-

NaturalDetailHeaderComponent

- - - + +
@@ -52,7 +52,7 @@

NaturalAbstractDetail

-

Second linkable tabs

+

Second linkable tabs

Tab d-2 content Tab d-3 content @@ -60,7 +60,7 @@

Second linkable tabs

-

Unlinkable tabs (ignored)

+

Unlinkable tabs (ignored)

Tab b-2 content Tab b-3 content @@ -68,7 +68,7 @@

Unlinkable tabs (ignored)

-

Unlinkable tabs (set to false)

+

Unlinkable tabs (set to false)

Tab c-2 content Tab c-3 content diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 317cb20d..eb3191d5 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -34,7 +34,7 @@ import {Item, ItemInput, ItemService} from '../../../projects/natural/src/lib/te styleUrl: './detail.component.scss', }) export class DetailComponent extends NaturalAbstractDetail implements OnInit { - public readonly collectErrors = collectErrors; + protected readonly collectErrors = collectErrors; public constructor() { const service = inject(ItemService); diff --git a/src/app/editable-list/editable-list.component.html b/src/app/editable-list/editable-list.component.html index e7a298d1..b199a858 100644 --- a/src/app/editable-list/editable-list.component.html +++ b/src/app/editable-list/editable-list.component.html @@ -1,7 +1,7 @@ -

NaturalAbstractEditableList

-
+

NaturalAbstractEditableList

+
-
As a mat-table
+
As a mat-table
@@ -10,7 +10,7 @@

NaturalAbstractEditableList

Name - + Name {{ formArray.at(i).get('name')?.errors | errorMessage }} @@ -21,7 +21,7 @@

NaturalAbstractEditableList

Description - + Description {{ formArray.at(i).get('description')?.errors | errorMessage }} @@ -42,16 +42,16 @@

NaturalAbstractEditableList

-
As a `for` loop
+
As a `for` loop
@for (element of dataSource.data; track element) {
- + Name {{ formArray.at($index).get('name')?.errors | errorMessage }} - + Description {{ formArray.at($index).get('description')?.errors | errorMessage }} diff --git a/src/app/editable-list/editable-list.component.scss b/src/app/editable-list/editable-list.component.scss index e69de29b..1f580b29 100644 --- a/src/app/editable-list/editable-list.component.scss +++ b/src/app/editable-list/editable-list.component.scss @@ -0,0 +1,3 @@ +mat-form-field { + margin-block: 2px; +} diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index b6f8ce46..cb88a830 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -6,12 +6,12 @@
-

Preview

+

Preview

-

Debug

+

Debug

{{ htmlStringBasic }}

@@ -25,12 +25,12 @@

Debug

/>
-

Preview

+

Preview

-

Debug

+

Debug

{{ htmlStringAdvanced }}

@@ -45,7 +45,7 @@

Debug

/>
-

Preview

+

Preview

Preview
-

Debug

+

Debug

{{ htmlStringAdvancedWithImage }}

diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss index 5f41e5f6..0d1ef73a 100644 --- a/src/app/editor/editor.component.scss +++ b/src/app/editor/editor.component.scss @@ -1,5 +1,5 @@ .preview { border-radius: 8px; - background: rgba(0, 0, 0, 0.1); + background-color: var(--mat-sys-surface-container-lowest); padding: 20px 30px; } diff --git a/src/app/file/file.component.html b/src/app/file/file.component.html index 65c0ee39..66b48394 100644 --- a/src/app/file/file.component.html +++ b/src/app/file/file.component.html @@ -1,4 +1,4 @@ -

natural-file

Open the console to see events

+

natural-file

Open the console to see events

@@ -9,7 +9,7 @@

Button

- + +
@@ -208,12 +208,12 @@

Drag'n'drop, relying on service

File component

- - - - + + +
diff --git a/src/app/hierarchic/hierarchic.component.html b/src/app/hierarchic/hierarchic.component.html index 7a55dcd6..91af0292 100644 --- a/src/app/hierarchic/hierarchic.component.html +++ b/src/app/hierarchic/hierarchic.component.html @@ -1,8 +1,8 @@ -

natural-search

+

natural-search

-
Component usage
+
Component usage
natural-search
-
Dialog usage
- +
Dialog usage
+
diff --git a/src/app/hierarchic/hierarchic.component.ts b/src/app/hierarchic/hierarchic.component.ts index a8f31af4..622a28ef 100644 --- a/src/app/hierarchic/hierarchic.component.ts +++ b/src/app/hierarchic/hierarchic.component.ts @@ -84,7 +84,9 @@ export class HierarchicComponent { .afterClosed() .subscribe((result?: HierarchicDialogResult) => { console.log('dialog usage', result); - this.selected = result?.hierarchicSelection ?? {}; + if (result !== undefined) { + this.selected = result.hierarchicSelection ?? {}; + } }); } } diff --git a/src/app/home/_home.theme.scss b/src/app/home/_home.theme.scss deleted file mode 100644 index 87939057..00000000 --- a/src/app/home/_home.theme.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; - -@mixin home($theme) { - $primary: map.get($theme, primary); - $accent: map.get($theme, accent); - $warn: map.get($theme, warn); - - app-home { - .mat-toolbar { - background: #212121; - color: #fff; - } - - #menu { - border-radius: 4px; - background: mat.m2-get-color-from-palette($primary); - background: -moz-linear-gradient( - bottom, - mat.m2-get-color-from-palette($primary) 50%, - mat.m2-get-color-from-palette($accent) 150% - ); /* FF3.6-15 */ - background: -webkit-linear-gradient( - bottom, - mat.m2-get-color-from-palette($primary) 50%, - mat.m2-get-color-from-palette($accent) 150% - ); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient( - to bottom, - mat.m2-get-color-from-palette($primary) 50%, - mat.m2-get-color-from-palette($accent) 150% - ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - } - } -} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 54682d5e..de451c43 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,160 +1,143 @@ -
- - @if (menu) { - - } - - - -
- - + } - - - - - -
- - - - - - -
- -
- - -
-
+ + +
+ + + + + + + + + + + + + + + + Home + + + + Theme merger + + + + Search + + + + List A + + + + List B + + + + Editable list + + + + Table style + + + + Navigable list + + + + Detail + + + + Detail header + + + + Select + + + + Select hierarchic + + + + Select Enum + + + + Relation + + + + Hierarchic + + + + Panels + + + + File + + + + Alert service + + + + Avatar + + + + Editor + + + + Typography + + + + Buttons + + + + Material scrolling fixes + + + + Other tools + + + + + + + diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 2ae26e71..b56ce274 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,4 +1,43 @@ +@use '@angular/material' as mat; + :host { display: flex; flex-direction: column; + @include mat.sidenav-overrides( + ( + container-width: auto, + ) + ); +} + +.theme-choice { + border-radius: 999px; + background: var(--mat-sys-primary); + padding: 5px; + + @include mat.theme-overrides( + ( + on-surface-variant: var(--mat-sys-on-primary), + ) + ); +} + +mat-toolbar { + @include mat.toolbar-overrides( + ( + container-background-color: var(--mat-sys-surface-container), + ) + ); +} + +natural-sidenav-content { + border-top-left-radius: var(--mat-sys-corner-large); + background-color: var(--mat-sys-surface-bright); + padding: 20px; + min-height: calc(100vh - 130px); + overflow: auto; +} + +mat-nav-list { + margin: 0 10px; } diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index 98f589f0..05599a04 100644 --- a/src/app/home/home.component.spec.ts +++ b/src/app/home/home.component.spec.ts @@ -1,5 +1,5 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {naturalProviders} from '@ecodev/natural'; +import {naturalProviders, provideThemes} from '@ecodev/natural'; import {HomeComponent} from './home.component'; import {provideRouter} from '@angular/router'; @@ -9,7 +9,7 @@ describe('Demo HomeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - providers: [provideRouter([]), naturalProviders], + providers: [provideRouter([]), naturalProviders, provideThemes(['natural'])], }).compileComponents(); fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index cea772db..2a7a2d0a 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,15 +1,18 @@ -import {Component, DOCUMENT, effect, inject} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {MatButton, MatIconButton} from '@angular/material/button'; -import {MatAccordion, MatExpansionPanel} from '@angular/material/expansion'; import {MatIcon} from '@angular/material/icon'; -import {MatNavList, MatListItem, MatListItemIcon} from '@angular/material/list'; +import {MatListItem, MatListItemIcon, MatNavList} from '@angular/material/list'; import {MatToolbar} from '@angular/material/toolbar'; -import {RouterLink, RouterOutlet} from '@angular/router'; +import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; +import { + NaturalColorSchemerComponent, + NaturalCompactColorSchemerComponent, + NaturalThemeChangerComponent, +} from '@ecodev/natural'; import {NaturalIconDirective} from '../../../projects/natural/src/lib/modules/icon/icon.directive'; import {NaturalSidenavContainerComponent} from '../../../projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component'; import {NaturalSidenavContentComponent} from '../../../projects/natural/src/lib/modules/sidenav/sidenav-content/sidenav-content.component'; import {NaturalSidenavComponent} from '../../../projects/natural/src/lib/modules/sidenav/sidenav/sidenav.component'; -import {allThemes, ThemeService} from '../shared/services/theme.service'; @Component({ selector: 'app-home', @@ -21,32 +24,24 @@ import {allThemes, ThemeService} from '../shared/services/theme.service'; NaturalIconDirective, NaturalSidenavContainerComponent, NaturalSidenavComponent, - MatAccordion, - MatExpansionPanel, MatNavList, MatListItem, MatListItemIcon, RouterLink, NaturalSidenavContentComponent, RouterOutlet, + RouterLinkActive, + NaturalCompactColorSchemerComponent, + NaturalColorSchemerComponent, + NaturalThemeChangerComponent, ], templateUrl: './home.component.html', styleUrl: './home.component.scss', }) export class HomeComponent { - public readonly themeService = inject(ThemeService); - private readonly document = inject(DOCUMENT); + public readonly router = inject(Router); - public constructor() { - effect(() => { - // Remove old theme class - allThemes.forEach(theme => { - this.document.body.classList.remove(theme); - }); - - // set new theme class - const newTheme = this.themeService.theme(); - this.document.body.classList.add(newTheme); - }); + protected isActive(url: string): boolean { + return this.router.url === url; } } diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html index 0bda2a1a..b0c607fe 100644 --- a/src/app/homepage/homepage.component.html +++ b/src/app/homepage/homepage.component.html @@ -1,3 +1,4 @@ -

@ecodev/natural

diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html index ffc7b003..4f397cd9 100644 --- a/src/app/list/list.component.html +++ b/src/app/list/list.component.html @@ -1,9 +1,9 @@ -

NaturalAbstractList

+

NaturalAbstractList

@if (dataSource) {
-
{{ routeData?.title }}
+
{{ routeData?.title }}
NaturalAbstractList + + @@ -53,20 +56,13 @@

NaturalAbstractList

 + - - + + + @@ -81,6 +77,7 @@

NaturalAbstractList

 + @@ -95,6 +92,7 @@

NaturalAbstractList

 +
@@ -41,11 +42,13 @@

NaturalAbstractList

(click)="$event.stopPropagation()" /> + 		id {{ element.id }}/ name description{{ - element.description - }}description{{ element.description }}description visible but hidden in dropdownhidden should never be visible, even if solicited by url /
@@ -114,7 +112,7 @@

NaturalAbstractList

(page)="pagination($event)" />
-
+ 
columnsForTable : {{ columnsForTable | json }}
selectedColumns : {{ selectedColumns | json }}
diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index 6d3785d5..82e2fc41 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -15,6 +15,10 @@ import {
     MatCell,
     MatHeaderRow,
     MatRow,
+    MatFooterCell,
+    MatFooterRow,
+    MatFooterCellDef,
+    MatFooterRowDef,
 } from '@angular/material/table';
 import {AvailableColumn, Button, NaturalAbstractList, Sorting, SortingOrder} from '@ecodev/natural';
 import {NaturalColumnsPickerComponent} from '../../../projects/natural/src/lib/modules/columns-picker/columns-picker.component';
@@ -31,12 +35,16 @@ import {ItemService} from '../../../projects/natural/src/lib/testing/item.servic
         MatTable,
         MatHeaderCellDef,
         MatHeaderRowDef,
+        MatFooterCellDef,
+        MatFooterRowDef,
         MatColumnDef,
         MatCellDef,
         MatRowDef,
         MatHeaderCell,
+        MatFooterCell,
         MatCell,
         MatHeaderRow,
+        MatFooterRow,
         MatRow,
         MatSort,
         MatSortHeader,
diff --git a/src/app/material-fixes/material-fixes.component.html b/src/app/material-fixes/material-fixes.component.html
new file mode 100644
index 00000000..079c0d9c
--- /dev/null
+++ b/src/app/material-fixes/material-fixes.component.html
@@ -0,0 +1,236 @@
+

+    
+    
+    
+    
+    
+

+
+
Material scrolling fixes

+
+
Make sure your browser show scrolling bars, or else try to scroll on each container, vertically and
+    horizontally.

+
+
Problem

+
+

+    
+
+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+    
+        
+        
+    
+

+
+

+    
+        Option 1
+        Option 2
+    
+

+
+

+    Slide me!
+

+
+
Tolerable problem

+
+
Because always used inside a table, scrolling issue not possible.

+

+    
My column

+

+
+
Because should only be used as Floating button, outside of DOM flow, scrolling or overlapping issue should not be
+    possible.

+
+

+    
+    
+

+
+
Because we prefer to easily (left) align the slider with other elements, and add margin manually in problematic
+    cases only.

+

+    
+        
+    
+

+
+
No problem

+
+

+    
+    
+

+
+

+    
+    
+

+
+

+    
+        Bold
+        Italic
+        Underline
+    
+

+
+

+    Check me!
+

+
+

+    
+        One fish
+        Two fish
+    
+

+
+

+    
+

+
+

+    
+        Input
+        
+    
+

+
+

+    
+        Select
+        
+            First option
+            Second option
+        
+    
+

+
+

+    
+        Textarea
+        
+    
+

+
+

+    
+        
+             This is the expansion title
+             This is a summary of the content
+        
+        
This is the primary content of the panel.

+    
+

+
+

+    
+        
+        
+            @for (option of options; track option) {
+                {{ option }}
+            }
+        
+    
+

+
+

+    
+        Item 1
+        Item 2
+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+

+
+

+    
+         Content 1
+         Content 2
+         Content 3
+    
+

+
+

+    
+        
+        My App
+        
+        
+    
+

diff --git a/src/app/material-fixes/material-fixes.component.scss b/src/app/material-fixes/material-fixes.component.scss
new file mode 100644
index 00000000..1f3913cf
--- /dev/null
+++ b/src/app/material-fixes/material-fixes.component.scss
@@ -0,0 +1,44 @@
+.controls {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background: var(--mat-sys-background);
+
+    label {
+        display: inline-block;
+        margin: 0.5em;
+    }
+}
+
+.container {
+    background: lightcyan;
+}
+
+.container:not(.sample) {
+    display: inline-block;
+    margin: 1em;
+    overflow: scroll;
+}
+
+.sample {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+::ng-deep .showContainer .container {
+    border: 1px red solid !important;
+}
+
+::ng-deep .showTouchTarget .mat-mdc-button-touch-target {
+    border: 1px green solid !important;
+}
+
+::ng-deep .showRipple .mat-mdc-button-ripple {
+    border: 1px blueviolet solid !important;
+}
+
+::ng-deep .showElement .container > *,
+.sample.element {
+    border: 1px orange solid !important;
+}
diff --git a/src/app/material-fixes/material-fixes.component.ts b/src/app/material-fixes/material-fixes.component.ts
new file mode 100644
index 00000000..ef319f1e
--- /dev/null
+++ b/src/app/material-fixes/material-fixes.component.ts
@@ -0,0 +1,105 @@
+import {ChangeDetectionStrategy, Component, DOCUMENT, effect, inject, model} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
+import {MatButton, MatFabButton, MatIconButton, MatMiniFabButton} from '@angular/material/button';
+import {FormsModule} from '@angular/forms';
+import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from '@angular/material/autocomplete';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {MatChip, MatChipSet} from '@angular/material/chips';
+import {MatDivider, MatList, MatListItem} from '@angular/material/list';
+import {
+    MatExpansionPanel,
+    MatExpansionPanelDescription,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+} from '@angular/material/expansion';
+import {MatSelect} from '@angular/material/select';
+import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatProgressBar} from '@angular/material/progress-bar';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
+import {MatRadioButton, MatRadioGroup} from '@angular/material/radio';
+import {MatSlideToggle} from '@angular/material/slide-toggle';
+import {MatSlider, MatSliderThumb} from '@angular/material/slider';
+import {MatSort, MatSortHeader} from '@angular/material/sort';
+import {MatTab, MatTabGroup} from '@angular/material/tabs';
+import {MatToolbar} from '@angular/material/toolbar';
+
+@Component({
+    selector: 'app-material-fixes',
+    imports: [
+        FormsModule,
+        MatAutocomplete,
+        MatAutocompleteTrigger,
+        MatButton,
+        MatButtonToggle,
+        MatButtonToggleGroup,
+        MatCheckbox,
+        MatChip,
+        MatChipSet,
+        MatDivider,
+        MatExpansionPanel,
+        MatExpansionPanelDescription,
+        MatExpansionPanelHeader,
+        MatExpansionPanelTitle,
+        MatFabButton,
+        MatFormField,
+        MatIcon,
+        MatIconButton,
+        MatInput,
+        MatLabel,
+        MatList,
+        MatListItem,
+        MatMenu,
+        MatMenuItem,
+        MatMenuTrigger,
+        MatMiniFabButton,
+        MatOption,
+        MatPaginator,
+        MatProgressBar,
+        MatProgressSpinner,
+        MatRadioButton,
+        MatRadioGroup,
+        MatSelect,
+        MatSlideToggle,
+        MatSlider,
+        MatSliderThumb,
+        MatSort,
+        MatSortHeader,
+        MatTab,
+        MatTabGroup,
+        MatToolbar,
+    ],
+    templateUrl: './material-fixes.component.html',
+    styleUrl: './material-fixes.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class.showContainer]': 'showContainer',
+        '[class.showTouchTarget]': 'showTouchTarget',
+        '[class.showRipple]': 'showRipple',
+        '[class.showElement]': 'showElement',
+    },
+})
+export class MaterialFixesComponent {
+    protected readonly document = inject(DOCUMENT);
+    protected showContainer = false;
+    protected showTouchTarget = false;
+    protected showRipple = false;
+    protected showElement = false;
+    protected readonly applyFixes = model(true);
+    protected readonly options = ['first', 'second', 'third'];
+
+    public constructor() {
+        const classList = this.document.documentElement.classList;
+        const klass = 'disable-material-fixes';
+
+        effect(() => {
+            if (this.applyFixes()) {
+                classList.remove(klass);
+            } else {
+                classList.add(klass);
+            }
+        });
+    }
+}
diff --git a/src/app/navigable-list/navigable-list.component.html b/src/app/navigable-list/navigable-list.component.html
index f474634f..a46b8708 100644
--- a/src/app/navigable-list/navigable-list.component.html
+++ b/src/app/navigable-list/navigable-list.component.html
@@ -1,4 +1,4 @@
-
NaturalAbstractNavigableList

+
NaturalAbstractNavigableList

 
 @if (dataSource) {
     

diff --git a/src/app/other/other.component.html b/src/app/other/other.component.html
index 6ee34e2c..effce9e5 100644
--- a/src/app/other/other.component.html
+++ b/src/app/other/other.component.html
@@ -1,5 +1,5 @@
 

-    
natural-table-button

+    
natural-table-button

     

         @for (conf of configurations; track conf) {
             natural-table-button
         }
     

 
-    
HTTP Prefix

+    
HTTP Prefix

     

         

             
@@ -57,7 +57,7 @@ 
HTTP Prefix

     

     

     

-    
Icons

+    
Icons

     

         Native font mat-icon
         
@@ -73,7 +73,7 @@ 
Icons

     

     

         
 
         
 
     

@@ -129,7 +129,7 @@ 
Dialog trigger

     

     

 
-    
Error handler

+    
Error handler

     
     
     
diff --git a/src/app/other/other.component.ts b/src/app/other/other.component.ts
index eb3ed172..357752e6 100644
--- a/src/app/other/other.component.ts
+++ b/src/app/other/other.component.ts
@@ -3,13 +3,14 @@ import {HttpClient} from '@angular/common/http';
 import {Component, inject, OnInit} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MatButton} from '@angular/material/button';
-import {MatRipple, ThemePalette} from '@angular/material/core';
+import {MatRipple} from '@angular/material/core';
 import {MatDatepickerToggle} from '@angular/material/datepicker';
 import {MatFormField, MatLabel, MatPrefix, MatSuffix} from '@angular/material/form-field';
 import {MatIcon} from '@angular/material/icon';
 import {MatInput} from '@angular/material/input';
 import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
 import {Params, QueryParamsHandling, RouterLink, RouterOutlet} from '@angular/router';
+import {NaturalPalette} from '@ecodev/natural';
 import {NaturalHttpPrefixDirective} from '../../../projects/natural/src/lib/directives/http-prefix.directive';
 import {NaturalIconDirective} from '../../../projects/natural/src/lib/modules/icon/icon.directive';
 import {NaturalTableButtonComponent} from '../../../projects/natural/src/lib/modules/table-button/table-button.component';
@@ -23,7 +24,7 @@ type TableButtonConfiguration = {
     queryParamsHandling: QueryParamsHandling;
     fragment?: string | undefined;
     preserveFragment: boolean;
-    color: ThemePalette;
+    color: NaturalPalette;
 };
 
 @Component({
diff --git a/src/app/panels-routing.ts b/src/app/panels.routes.ts
similarity index 100%
rename from src/app/panels-routing.ts
rename to src/app/panels.routes.ts
diff --git a/src/app/panels/panels.component.html b/src/app/panels/panels.component.html
index de3b49f4..0d596a60 100644
--- a/src/app/panels/panels.component.html
+++ b/src/app/panels/panels.component.html
@@ -1,4 +1,4 @@
-
NaturalPanelsService

+
NaturalPanelsService

 
 

     Panel 1
diff --git a/src/app/relations/relations.component.html b/src/app/relations/relations.component.html
index e12ca4f9..66e62e6c 100644
--- a/src/app/relations/relations.component.html
+++ b/src/app/relations/relations.component.html
@@ -1,12 +1,12 @@
-
natural-relations

-
natural-relations
+
Use ItemService.watchAll() that always returns 5 elements. Seems to be buggy but it's normal.
 

 
 @if (isUpdatePage()) {
-    

-        

-            
Hierarchic selector

+    

+        

+            
Hierarchic selector

             natural-relations
                 (selectionChange)="relationsAdded('Hierarchic selector')"
             />
         

-        

-            
Service

+        

+            
Service

             natural-relations
                 (selectionChange)="relationsAdded('Service')"
             />
         

-        

-            
No result service

+        

+            
No result service

             natural-relations
                 (selectionChange)="relationsAdded('NoResultService')"
             />
         

-        

-            
ErrorService

+        

+            
ErrorService

              div {
-        natural-relations {
-            border-radius: 4px;
-            background: rgba(0, 0, 0, 0.1);
-            padding: 20px;
-        }
-    }
-}
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index bebf1ba4..e8d2a822 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,20 +1,20 @@
-
natural-search

+
natural-search

 
 

     
-        
+        
     
 
     

-        
-        
-        
+        
+        
+        
     

 
     

diff --git a/src/app/select-enum/select-enum.component.html b/src/app/select-enum/select-enum.component.html
index db92a941..12e3b915 100644
--- a/src/app/select-enum/select-enum.component.html
+++ b/src/app/select-enum/select-enum.component.html
@@ -1,17 +1,17 @@
-
natural-select-enum

+
natural-select-enum

 
 

     

-        
-        
-        
-        
+        
+        
+        
+        
     

 
     

         
ngModel

-        
-        
+        
+        
     

     

         

diff --git a/src/app/select-hierarchic/select-hierarchic.component.html b/src/app/select-hierarchic/select-hierarchic.component.html
index cac28829..8f7c9cd4 100644
--- a/src/app/select-hierarchic/select-hierarchic.component.html
+++ b/src/app/select-hierarchic/select-hierarchic.component.html
@@ -1,17 +1,17 @@
-
natural-select-hierarchic

+
natural-select-hierarchic

 
 

     

-        
-        
-        
-        
+        
+        
+        
+        
     

 
     

         
ngModel

-        
-        
+        
+        
     

     

         

@@ -56,8 +56,8 @@ 
FormControl

                 [config]="hierarchicConfig"
                 [formControl]="formControl"
             />
-            
-            
+            
+            
             
         

 
@@ -91,10 +91,10 @@ 
FormGroup

                     [config]="hierarchicConfig"
                 />
             

-            
-            
             
diff --git a/src/app/select/select.component.html b/src/app/select/select.component.html
index aadbc5a5..c7ddfb3b 100644
--- a/src/app/select/select.component.html
+++ b/src/app/select/select.component.html
@@ -1,17 +1,17 @@
-
natural-select

+
natural-select

 
 

     

-        
-        
-        
-        
+        
+        
+        
+        
     

 
     

         
ngModel

-        
-        
+        
+        
     

     

         

@@ -50,8 +50,8 @@ 
FormControl

                 [service]="service"
                 [formControl]="formControl"
             />
-            
-            
+            
+            
             
         

 
@@ -81,10 +81,10 @@ 
FormGroup

             

                 
             

-            
-            
             
diff --git a/src/app/shared/services/theme.service.ts b/src/app/shared/services/theme.service.ts
deleted file mode 100644
index 80126348..00000000
--- a/src/app/shared/services/theme.service.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {computed, inject, Injectable, signal} from '@angular/core';
-import {LOCAL_STORAGE} from '@ecodev/natural';
-
-export const allThemes = ['default', 'defaultDark'] as const;
-export type Theme = (typeof allThemes)[number];
-
-@Injectable({
-    providedIn: 'root',
-})
-export class ThemeService {
-    private readonly storage = inject(LOCAL_STORAGE);
-    private readonly isDark = signal(true);
-    public readonly theme = computed(() => (this.isDark() ? 'defaultDark' : 'default'));
-
-    public constructor() {
-        const theme = this.storage.getItem('theme') as Theme | null;
-        this.set(!!theme?.includes('Dark'));
-    }
-
-    public set(isDark: boolean): void {
-        this.isDark.set(isDark);
-        this.storage.setItem('theme', this.theme());
-    }
-
-    public toggle(): void {
-        this.set(!this.isDark());
-    }
-}
diff --git a/src/app/table-style/table-style.component.html b/src/app/table-style/table-style.component.html
index 0c46fded..68b77f42 100644
--- a/src/app/table-style/table-style.component.html
+++ b/src/app/table-style/table-style.component.html
@@ -1,7 +1,7 @@
-
CSS style for MatTable

+
CSS style for MatTable

 
 @for (klass of classes1; track klass) {
-    
{{ klass }}

+    
{{ klass }}

     @if (klass === 'natural-align-right') {
         
When used with mat-sort-header, it should be combined with
@@ -45,7 +45,7 @@ 
{{ klass }}

 }
 
 @for (klass of classes2; track klass) {
-    
{{ klass }}

+    
{{ klass }}

 
     
diff --git a/src/app/theme-merger/theme-merger.component.html b/src/app/theme-merger/theme-merger.component.html
new file mode 100644
index 00000000..c545fb6f
--- /dev/null
+++ b/src/app/theme-merger/theme-merger.component.html
@@ -0,0 +1,154 @@
+
+
+
+
+

+    
+        Primary
+        
+    
+    
+        Secondary
+        
+    
+    
+        Tertiary
+        
+    
+    
+
+    @if (theme1) {
+        

+            arrow_right_alt
+        

+
+        
+            Theme name
+            
+        
+        
+        
+
+        
+    } @else {
+        

+            
+        

+    }
+

+

+
+@if (theme1) {
+    

+        @if (showPropertyNames) {
+            

+                

+                @for (tokenName of getTokenNames(theme1); track $index) {
+                    
{{ camelToKebab(tokenName) }}

+                }
+            

+        }
+
+        

+            

+                

+                    
Theme 1 - Light

+                    
+                

+                
+                

+                    @for (variation of getVariationsForTheme(1); track variation) {
+                        
+                    }
+                

+            

+            @for (tokenName of getTokenNames(theme1); track $index) {
+                

+                    @if (tokenName) {
+                        @for (item of getTokensForName(theme1, tokenName); track item.variation) {
+                            

+                        }
+                    }
+                

+            }
+        

+
+        

+            

+                

+                    
{{ theme2 ? 'Theme 2' : 'Theme 1' }} - Dark

+                    
+                

+                

+                    
+                    @if (theme2) {
+                        
+                    }
+                

+                

+                    @for (variation of getVariationsForTheme(2); track variation) {
+                        
+                    }
+                

+            

+
+            @for (tokenName of getTokenNames(getRightTheme()); track $index) {
+                

+                    @if (tokenName) {
+                        @for (item of getTokensForNameRight(tokenName); track item.variation) {
+                            

+                        }
+                    }
+                

+            }
+        

+    

+}
diff --git a/src/app/theme-merger/theme-merger.component.scss b/src/app/theme-merger/theme-merger.component.scss
new file mode 100644
index 00000000..8e6da4b3
--- /dev/null
+++ b/src/app/theme-merger/theme-merger.component.scss
@@ -0,0 +1,81 @@
+@use '@angular/material' as mat;
+
+.container {
+    border-radius: var(--mat-sys-corner-extra-large);
+    background: var(--mat-sys-surface-bright);
+}
+
+.theme-merger-container {
+    margin: 0 auto;
+    padding: 2rem;
+    max-width: 1400px;
+
+    h1 {
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+}
+
+input[type='file'] {
+    display: none;
+}
+
+.generate-section {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+
+    .generate-controls {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+
+        label {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .theme-name-input {
+            padding: 0.6rem 1rem;
+            min-width: 250px;
+            font-size: 0.95rem;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+}
+
+.tokens-display {
+    button {
+        margin-bottom: 0.5rem;
+    }
+
+    .tokens-column {
+        padding: 20px;
+        width: auto;
+        color: var(--mat-sys-on-surface);
+
+        &.color-column {
+            background: var(--mat-sys-surface);
+        }
+        .token-row {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 5px;
+            min-height: 30px;
+        }
+
+        .token-name {
+            align-items: center;
+            font: var(--mat-sys-title-medium);
+        }
+
+        .column-header {
+            margin-bottom: 1rem;
+            height: 140px;
+            min-height: 4rem;
+        }
+    }
+}
diff --git a/src/app/theme-merger/theme-merger.component.ts b/src/app/theme-merger/theme-merger.component.ts
new file mode 100644
index 00000000..f3e79dc3
--- /dev/null
+++ b/src/app/theme-merger/theme-merger.component.ts
@@ -0,0 +1,445 @@
+import {Component, DOCUMENT, ElementRef, inject, OnInit, viewChild} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButton, MatIconButton} from '@angular/material/button';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {MatFormField, MatSuffix} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
+import {MatInput, MatLabel} from '@angular/material/input';
+import {MatTooltip} from '@angular/material/tooltip';
+import {copyToClipboard, LOCAL_STORAGE, NaturalAlertService} from '@ecodev/natural';
+import {
+    camelToKebab,
+    generateScss,
+    type MaterialTheme,
+    type SchemeVariation,
+    type ThemeData,
+    type ThemeToken,
+    tokenOrderReference,
+} from './theme-merger.utils';
+
+@Component({
+    selector: 'app-theme-merger',
+    imports: [
+        FormsModule,
+        MatFormField,
+        MatInput,
+        MatLabel,
+        MatButton,
+        MatCheckbox,
+        MatIcon,
+        MatIconButton,
+        MatSuffix,
+        MatTooltip,
+    ],
+    templateUrl: './theme-merger.component.html',
+    styleUrl: './theme-merger.component.scss',
+})
+export class ThemeMergerComponent implements OnInit {
+    private readonly document = inject(DOCUMENT);
+    private readonly localStorage = inject(LOCAL_STORAGE);
+    private readonly alertService = inject(NaturalAlertService);
+    private readonly theme2Upload = viewChild>('theme2Upload');
+    protected readonly camelToKebab = camelToKebab;
+
+    protected theme1: ThemeData | null = null;
+    protected theme2: ThemeData | null = null;
+    private _themeName = 'natural';
+    private theme1RightColumnSelectedVariations = new Set(['dark']);
+    protected showPropertyNames = true;
+    protected primary = '0086B2';
+    protected secondary = '';
+    protected tertiary = 'FF960B';
+    private _lightModeEnabled = true;
+    private _darkModeEnabled = true;
+
+    private readonly THEME_NAME_STORAGE_KEY = 'theme-merger-theme-name';
+    private readonly LIGHT_MODE_STORAGE_KEY = 'theme-merger-light-mode';
+    private readonly DARK_MODE_STORAGE_KEY = 'theme-merger-dark-mode';
+
+    protected get themeName(): string {
+        return this._themeName;
+    }
+
+    protected set themeName(value: string) {
+        this._themeName = value;
+        this.saveThemeNameToLocalStorage();
+    }
+
+    protected get lightModeEnabled(): boolean {
+        return this._lightModeEnabled;
+    }
+
+    protected set lightModeEnabled(value: boolean) {
+        this._lightModeEnabled = value;
+        this.saveLightModeToLocalStorage();
+    }
+
+    protected get darkModeEnabled(): boolean {
+        return this._darkModeEnabled;
+    }
+
+    protected set darkModeEnabled(value: boolean) {
+        this._darkModeEnabled = value;
+        this.saveDarkModeToLocalStorage();
+    }
+
+    public ngOnInit(): void {
+        this.loadThemeNameFromLocalStorage();
+        this.loadLightModeFromLocalStorage();
+        this.loadDarkModeFromLocalStorage();
+    }
+
+    private loadThemeNameFromLocalStorage(): void {
+        const savedThemeName = this.localStorage.getItem(this.THEME_NAME_STORAGE_KEY);
+        if (savedThemeName) {
+            this._themeName = savedThemeName;
+        }
+    }
+
+    private saveThemeNameToLocalStorage(): void {
+        this.localStorage.setItem(this.THEME_NAME_STORAGE_KEY, this._themeName);
+    }
+
+    private loadLightModeFromLocalStorage(): void {
+        const savedLightMode = this.localStorage.getItem(this.LIGHT_MODE_STORAGE_KEY);
+        if (savedLightMode !== null) {
+            this._lightModeEnabled = savedLightMode === 'true';
+        }
+    }
+
+    private saveLightModeToLocalStorage(): void {
+        this.localStorage.setItem(this.LIGHT_MODE_STORAGE_KEY, String(this._lightModeEnabled));
+    }
+
+    private loadDarkModeFromLocalStorage(): void {
+        const savedDarkMode = this.localStorage.getItem(this.DARK_MODE_STORAGE_KEY);
+        if (savedDarkMode !== null) {
+            this._darkModeEnabled = savedDarkMode === 'true';
+        }
+    }
+
+    private saveDarkModeToLocalStorage(): void {
+        this.localStorage.setItem(this.DARK_MODE_STORAGE_KEY, String(this._darkModeEnabled));
+    }
+
+    private readonly lightVariations: SchemeVariation[] = ['light', 'light-medium-contrast', 'light-high-contrast'];
+    private readonly darkVariations: SchemeVariation[] = ['dark', 'dark-medium-contrast', 'dark-high-contrast'];
+    private readonly allVariations: SchemeVariation[] = [...this.lightVariations, ...this.darkVariations];
+
+    protected clearTheme2(): void {
+        this.theme2 = null;
+        // Reset the file input so the same file can be selected again
+        const uploadInput = this.theme2Upload();
+        if (uploadInput) {
+            uploadInput.nativeElement.value = '';
+        }
+    }
+
+    protected onFileSelected(event: Event, themeNumber: 1 | 2): void {
+        const input = event.target as HTMLInputElement;
+        if (!input.files || input.files.length === 0) {
+            return;
+        }
+
+        const file = input.files[0];
+        const reader = new FileReader();
+
+        reader.onload = (e: ProgressEvent) => {
+            try {
+                const content = e.target?.result as string;
+                const theme = JSON.parse(content) as MaterialTheme;
+
+                if (theme.schemes) {
+                    const tokensByVariation = new Map();
+
+                    // Parse all available variations
+                    this.allVariations.forEach(variation => {
+                        if (theme.schemes![variation]) {
+                            tokensByVariation.set(variation, this.parseTokens(theme.schemes![variation]));
+                        }
+                    });
+
+                    // Default to 'light' for theme 1, 'dark' for theme 2
+                    const defaultVariation = themeNumber === 1 ? 'light' : 'dark';
+
+                    const themeData: ThemeData = {
+                        name: file.name,
+                        seed: theme.seed,
+                        coreColors: theme.coreColors,
+                        schemes: theme.schemes,
+                        selectedVariations: new Set([defaultVariation]),
+                        tokensByVariation,
+                    };
+
+                    if (themeNumber === 1) {
+                        this.theme1 = themeData;
+                        // Set primary and tertiary from theme1's coreColors
+                        if (themeData.coreColors) {
+                            if (themeData.coreColors.primary) {
+                                this.primary = themeData.coreColors.primary.replace('#', '');
+                            }
+                            if (themeData.coreColors.tertiary) {
+                                this.tertiary = themeData.coreColors.tertiary.replace('#', '');
+                            }
+                        }
+                    } else {
+                        this.theme2 = themeData;
+                    }
+
+                    // Auto-generate and copy SCSS after file upload
+                    // Use setTimeout to ensure the view is updated first
+                    setTimeout(() => {
+                        this.generateAndCopyScss(true);
+                    }, 0);
+                }
+            } catch (error) {
+                console.error('Error parsing JSON file:', error);
+                this.alertService.error(
+                    'Error parsing JSON file. Please ensure it is a valid Material Design 3 theme file.',
+                );
+            }
+        };
+
+        reader.readAsText(file);
+    }
+
+    private parseTokens(lightScheme: Record): ThemeToken[] {
+        return Object.entries(lightScheme).map(([name, hex]) => ({
+            name,
+            hex: hex.startsWith('#') ? hex : `#${hex}`,
+        }));
+    }
+
+    protected toggleVariation(theme: ThemeData, variation: SchemeVariation): void {
+        if (theme.schemes[variation]) {
+            if (theme.selectedVariations.has(variation)) {
+                theme.selectedVariations.delete(variation);
+            } else {
+                theme.selectedVariations.add(variation);
+            }
+            // Trigger change detection by creating a new Set
+            theme.selectedVariations = new Set(theme.selectedVariations);
+        }
+    }
+
+    protected isVariationSelected(theme: ThemeData, variation: SchemeVariation): boolean {
+        return theme.selectedVariations.has(variation);
+    }
+
+    protected getVariationLabel(variation: SchemeVariation): string {
+        const labels: Record = {
+            light: 'Light',
+            'light-medium-contrast': 'Light Medium',
+            'light-high-contrast': 'Light High',
+            dark: 'Dark',
+            'dark-medium-contrast': 'Dark Medium',
+            'dark-high-contrast': 'Dark High',
+        };
+        return labels[variation];
+    }
+
+    protected getTokenNames(theme: ThemeData): (string | null)[] {
+        // Get token names from the first available variation
+        const firstVariation = Array.from(theme.tokensByVariation.keys())[0];
+        if (!firstVariation) {
+            return [];
+        }
+
+        const tokens = theme.tokensByVariation.get(firstVariation);
+        if (!tokens) {
+            return [];
+        }
+
+        // Create a map of kebab-case names to original camelCase names
+        const kebabToOriginal = new Map();
+        tokens.forEach(t => {
+            const kebabName = this.camelToKebab(t.name);
+            kebabToOriginal.set(kebabName, t.name);
+        });
+
+        // Return tokens in the order specified by tokenOrderReference
+        // Include null values for spacing
+        return tokenOrderReference
+            .map(tokenName => {
+                if (tokenName === null) {
+                    return null;
+                }
+                // Check if this token exists in the theme (comparing kebab-case)
+                return kebabToOriginal.has(tokenName) ? kebabToOriginal.get(tokenName)! : null;
+            })
+            .filter(tokenName => tokenName !== null || tokenOrderReference.includes(tokenName));
+    }
+
+    protected getTokensForName(theme: ThemeData, tokenName: string): {variation: SchemeVariation; token: ThemeToken}[] {
+        const result: {variation: SchemeVariation; token: ThemeToken}[] = [];
+
+        // Return tokens only for selected variations, in the order of variations array
+        this.allVariations.forEach(variation => {
+            if (theme.selectedVariations.has(variation)) {
+                const tokens = theme.tokensByVariation.get(variation);
+                const token = tokens?.find(t => t.name === tokenName);
+                if (token) {
+                    result.push({variation, token});
+                }
+            }
+        });
+
+        return result;
+    }
+
+    protected getVariationsForTheme(themeNumber: 1 | 2): SchemeVariation[] {
+        return themeNumber === 1 ? this.lightVariations : this.darkVariations;
+    }
+
+    protected getRightTheme(): ThemeData {
+        return this.theme2 ?? this.theme1!;
+    }
+
+    private getRightThemeSelectedVariations(): Set {
+        return this.theme2 ? this.theme2.selectedVariations : this.theme1RightColumnSelectedVariations;
+    }
+
+    protected isVariationSelectedRight(variation: SchemeVariation): boolean {
+        return this.getRightThemeSelectedVariations().has(variation);
+    }
+
+    protected toggleVariationRight(variation: SchemeVariation): void {
+        const rightTheme = this.getRightTheme();
+        if (rightTheme.schemes[variation]) {
+            if (this.theme2) {
+                // Use theme2's own selected variations
+                this.toggleVariation(this.theme2, variation);
+            } else {
+                // Use separate state for theme1 as right column
+                if (this.theme1RightColumnSelectedVariations.has(variation)) {
+                    this.theme1RightColumnSelectedVariations.delete(variation);
+                } else {
+                    this.theme1RightColumnSelectedVariations.add(variation);
+                }
+                // Trigger change detection
+                this.theme1RightColumnSelectedVariations = new Set(this.theme1RightColumnSelectedVariations);
+            }
+        }
+    }
+
+    protected getTokensForNameRight(tokenName: string): {variation: SchemeVariation; token: ThemeToken}[] {
+        const result: {variation: SchemeVariation; token: ThemeToken}[] = [];
+        const rightTheme = this.getRightTheme();
+        const selectedVariations = this.getRightThemeSelectedVariations();
+
+        // Return tokens only for selected variations, in the order of variations array
+        this.allVariations.forEach(variation => {
+            if (selectedVariations.has(variation)) {
+                const tokens = rightTheme.tokensByVariation.get(variation);
+                const token = tokens?.find(t => t.name === tokenName);
+                if (token) {
+                    result.push({variation, token});
+                }
+            }
+        });
+
+        return result;
+    }
+
+    protected generateAndCopyScss(isDefault: boolean): void {
+        if (!this.theme1) {
+            this.alertService.error('Please upload at least Theme 1.');
+            return;
+        }
+
+        const rightTheme = this.getRightTheme();
+
+        // Check if at least one mode is enabled
+        if (!this.lightModeEnabled && !this.darkModeEnabled) {
+            this.alertService.error('Please enable at least one mode (Light or Dark).');
+            return;
+        }
+
+        // Validate that exactly one variation is selected for each theme
+        if (this.theme1.selectedVariations.size !== 1) {
+            this.alertService.error('Please select exactly ONE variation for Theme 1.');
+            return;
+        }
+
+        const rightThemeSelectedVariations = this.getRightThemeSelectedVariations();
+        if (rightThemeSelectedVariations.size !== 1) {
+            this.alertService.error(
+                `Please select exactly ONE variation for ${this.theme2 ? 'Theme 2' : 'Theme 1 (right column)'}.`,
+            );
+            return;
+        }
+
+        // Get the selected variations
+        const theme1Variation = Array.from(this.theme1.selectedVariations)[0];
+        const theme2Variation = Array.from(rightThemeSelectedVariations)[0];
+
+        // Get tokens from the selected variations
+        const theme1Tokens = this.theme1.tokensByVariation.get(theme1Variation);
+        const theme2Tokens = rightTheme.tokensByVariation.get(theme2Variation);
+
+        if (!theme1Tokens || !theme2Tokens) {
+            this.alertService.error('Error retrieving tokens from selected variations.');
+            return;
+        }
+
+        const scss = generateScss(
+            this.themeName.trim(),
+            this.theme1,
+            this.theme2,
+            theme1Tokens,
+            theme2Tokens,
+            theme1Variation,
+            theme2Variation,
+            isDefault,
+            this.lightModeEnabled,
+            this.darkModeEnabled,
+        );
+
+        // Copy to clipboard
+        try {
+            copyToClipboard(this.document, scss);
+            this.alertService.info('SCSS copied to clipboard!');
+        } catch (error) {
+            this.alertService.error('Failed to copy to clipboard. Please check browser permissions.');
+        }
+    }
+
+    protected copyBuilderLink(): void {
+        if (!this.primary.trim() && !this.secondary.trim() && !this.tertiary.trim()) {
+            this.alertService.error('Please enter at least a primary, secondary, or tertiary color.');
+            return;
+        }
+
+        const baseUrl = 'https://material-foundation.github.io/material-theme-builder/';
+        const params = new URLSearchParams();
+
+        // Add primary color if provided
+        if (this.primary.trim()) {
+            params.append('primary', this.primary.replace('#', '').toUpperCase());
+        }
+
+        // Add secondary color if provided
+        if (this.secondary.trim()) {
+            params.append('secondary', this.secondary.replace('#', '').toUpperCase());
+        }
+
+        // Add tertiary color if provided
+        if (this.tertiary.trim()) {
+            params.append('tertiary', this.tertiary.replace('#', '').toUpperCase());
+        }
+
+        // Force neutral and neutralVariant to white
+        params.append('neutral', 'FFFFFF');
+        params.append('neutralVariant', 'FFFFFF');
+        params.append('colorMatch', 'true');
+
+        const url = `${baseUrl}?${params.toString()}`;
+
+        try {
+            copyToClipboard(this.document, url);
+            this.alertService.info('Theme Builder URL copied to clipboard!');
+        } catch (error) {
+            this.alertService.error('Failed to copy to clipboard. Please check browser permissions.');
+        }
+    }
+}
diff --git a/src/app/theme-merger/theme-merger.utils.ts b/src/app/theme-merger/theme-merger.utils.ts
new file mode 100644
index 00000000..4ef9d802
--- /dev/null
+++ b/src/app/theme-merger/theme-merger.utils.ts
@@ -0,0 +1,373 @@
+export type ThemeToken = {
+    name: string;
+    hex: string;
+};
+
+export type SchemeVariation =
+    | 'light'
+    | 'light-medium-contrast'
+    | 'light-high-contrast'
+    | 'dark'
+    | 'dark-medium-contrast'
+    | 'dark-high-contrast';
+
+export type MaterialTheme = {
+    seed?: string;
+    coreColors?: {
+        primary?: string;
+        secondary?: string;
+        tertiary?: string;
+        neutral?: string;
+        neutralVariant?: string;
+    };
+    schemes?: Record>;
+};
+
+export type ThemeData = {
+    name: string;
+    seed?: string;
+    coreColors?: {
+        primary?: string;
+        secondary?: string;
+        tertiary?: string;
+        neutral?: string;
+        neutralVariant?: string;
+    };
+    schemes: Record>;
+    selectedVariations: Set;
+    tokensByVariation: Map;
+};
+
+export const tokenOrderReference: readonly (string | null)[] = [
+    'primary',
+    'primary-container',
+    'primary-fixed',
+    'primary-fixed-dim',
+    'on-primary',
+    'on-primary-container',
+    'on-primary-fixed',
+    'on-primary-fixed-variant',
+    'inverse-primary',
+    null,
+    'secondary',
+    'secondary-container',
+    'secondary-fixed',
+    'secondary-fixed-dim',
+    'on-secondary',
+    'on-secondary-container',
+    'on-secondary-fixed',
+    'on-secondary-fixed-variant',
+    null,
+    'tertiary',
+    'tertiary-container',
+    'tertiary-fixed',
+    'tertiary-fixed-dim',
+    'on-tertiary',
+    'on-tertiary-container',
+    'on-tertiary-fixed',
+    'on-tertiary-fixed-variant',
+    null,
+    'error',
+    'error-container',
+    'on-error',
+    'on-error-container',
+    null,
+    'surface',
+    'surface-variant',
+    'on-surface',
+    'on-surface-variant',
+    'surface-dim',
+    'surface-bright',
+    'surface-container-lowest',
+    'surface-container-low',
+    'surface-container',
+    'surface-container-high',
+    'surface-container-highest',
+    'surface-tint',
+    'inverse-surface',
+    'inverse-on-surface',
+    null,
+    'background',
+    'on-background',
+    null,
+    'outline',
+    'outline-variant',
+    'shadow',
+    'scrim',
+] as const;
+
+export function generateScss(
+    themeName: string,
+    theme1: ThemeData,
+    theme2: ThemeData | null,
+    theme1Tokens: ThemeToken[],
+    theme2Tokens: ThemeToken[],
+    theme1Variation: SchemeVariation,
+    theme2Variation: SchemeVariation,
+    isDefault: boolean,
+    lightModeEnabled: boolean,
+    darkModeEnabled: boolean,
+): string {
+    let themOverride = generateThemOverride(
+        themeName,
+        theme1Tokens,
+        theme2Tokens,
+        isDefault,
+        lightModeEnabled,
+        darkModeEnabled,
+    );
+
+    if (lightModeEnabled && darkModeEnabled) {
+        const themOverrideSingleColor = generateThemOverride(
+            themeName,
+            theme1Tokens,
+            theme2Tokens,
+            isDefault,
+            lightModeEnabled,
+            false,
+        );
+
+        themOverride = `
+        // Only light color for old browsers that don't support light-dark()
+        ${themOverrideSingleColor}
+
+        // Both colors for new browsers that support light-dark()
+        @supports (color: light-dark(white, black)) {
+            ${themOverride}
+        }`;
+    }
+
+    const comment = generateComment(theme1, theme1Variation, theme2, theme2Variation);
+
+    const scss = `${comment}@use '@angular/material' as mat;
+${themOverride}
+`;
+
+    return scss;
+}
+function generateThemOverride(
+    themeName: string,
+    theme1Tokens: ThemeToken[],
+    theme2Tokens: ThemeToken[],
+    isDefault: boolean,
+    lightModeEnabled: boolean,
+    darkModeEnabled: boolean,
+): string {
+    // Create a map of kebab-case names to tokens
+    const kebabToTheme1Token = new Map();
+    const kebabToTheme2Token = new Map();
+    theme1Tokens.forEach(t => kebabToTheme1Token.set(camelToKebab(t.name), t));
+    theme2Tokens.forEach(t => kebabToTheme2Token.set(camelToKebab(t.name), t));
+
+    // Build the SCSS properties using tokenOrderReference for ordering
+    const properties: string[] = [];
+    tokenOrderReference.forEach(kebabName => {
+        // null values represent spacing
+        if (kebabName === null) {
+            properties.push('');
+            return;
+        }
+
+        // Only include tokens that exist in the required themes
+        const theme1Token = kebabToTheme1Token.get(kebabName);
+        const theme2Token = kebabToTheme2Token.get(kebabName);
+
+        // Generate CSS based on which modes are enabled
+        if (lightModeEnabled && darkModeEnabled) {
+            // Both modes: use light-dark()
+            if (theme1Token && theme2Token) {
+                properties.push(`            ${kebabName}: light-dark(${theme1Token.hex}, ${theme2Token.hex})`);
+            }
+        } else if (lightModeEnabled) {
+            // Light mode only: use only theme1 color
+            if (theme1Token) {
+                properties.push(`            ${kebabName}: ${theme1Token.hex}`);
+            }
+        } else if (darkModeEnabled) {
+            // Dark mode only: use only theme2 color
+            if (theme2Token) {
+                properties.push(`            ${kebabName}: ${theme2Token.hex}`);
+            }
+        }
+    });
+
+    // Generate SCSS - handle commas properly (don't add comma to empty lines)
+    const propertiesString = properties
+        .map((prop, index) => {
+            if (prop === '') {
+                // Empty line for spacing
+                return '';
+            }
+            // Add comma to all properties except the last non-empty one
+            const remainingProps = properties.slice(index + 1);
+            const hasMoreProps = remainingProps.some(p => p !== '');
+            return hasMoreProps ? `${prop},` : prop;
+        })
+        .join('\n');
+
+    // Build the selector based on whether a theme name is provided
+    let selector: string;
+    if (!themeName) {
+        // No theme name: use only :root, :host
+        selector = isDefault ? ':root, :host' : ':host';
+    } else {
+        // Theme name provided: include the data-theme selector
+        const defaultSelector = isDefault ? ':root, :host,' : '';
+        selector = defaultSelector + `\n[data-theme="${themeName}"]`;
+    }
+
+    const themOverride = `/* prettier-ignore */
+${selector} {
+    @include mat.theme-overrides((
+    ${propertiesString}
+    ));
+}`;
+    return themOverride;
+}
+
+function generateComment(
+    theme1: ThemeData,
+    theme1Variation: SchemeVariation,
+    theme2: ThemeData | null,
+    theme2Variation: SchemeVariation,
+): string {
+    // Build comment with seed and coreColors
+    const commentLines: string[] = [];
+
+    // If using only one theme with different variations
+    if (!theme2) {
+        if (theme1.seed || theme1.coreColors) {
+            commentLines.push(`Theme 1 (${theme1Variation} + ${theme2Variation}):`);
+            if (theme1.seed) {
+                commentLines.push(`  Seed: ${theme1.seed}`);
+            }
+            if (theme1.coreColors) {
+                commentLines.push(`  Core Colors:`);
+                if (theme1.coreColors.primary) {
+                    commentLines.push(`    Primary: ${theme1.coreColors.primary}`);
+                }
+                if (theme1.coreColors.secondary) {
+                    commentLines.push(`    Secondary: ${theme1.coreColors.secondary}`);
+                }
+                if (theme1.coreColors.tertiary) {
+                    commentLines.push(`    Tertiary: ${theme1.coreColors.tertiary}`);
+                }
+                if (theme1.coreColors.neutral) {
+                    commentLines.push(`    Neutral: ${theme1.coreColors.neutral}`);
+                }
+                if (theme1.coreColors.neutralVariant) {
+                    commentLines.push(`    Neutral Variant: ${theme1.coreColors.neutralVariant}`);
+                }
+            }
+        }
+    } else {
+        // Using two different themes
+        // Add theme 1 info
+        if (theme1.seed || theme1.coreColors) {
+            commentLines.push(`Theme 1 (${theme1Variation}):`);
+            if (theme1.seed) {
+                commentLines.push(`  Seed: ${theme1.seed}`);
+            }
+            if (theme1.coreColors) {
+                commentLines.push(`  Core Colors:`);
+                if (theme1.coreColors.primary) {
+                    commentLines.push(`    Primary: ${theme1.coreColors.primary}`);
+                }
+                if (theme1.coreColors.secondary) {
+                    commentLines.push(`    Secondary: ${theme1.coreColors.secondary}`);
+                }
+                if (theme1.coreColors.tertiary) {
+                    commentLines.push(`    Tertiary: ${theme1.coreColors.tertiary}`);
+                }
+                if (theme1.coreColors.neutral) {
+                    commentLines.push(`    Neutral: ${theme1.coreColors.neutral}`);
+                }
+                if (theme1.coreColors.neutralVariant) {
+                    commentLines.push(`    Neutral Variant: ${theme1.coreColors.neutralVariant}`);
+                }
+            }
+        }
+
+        // Add theme 2 info
+        if (theme2.seed || theme2.coreColors) {
+            if (commentLines.length > 0) {
+                commentLines.push('');
+            }
+            commentLines.push(`Theme 2 (${theme2Variation}):`);
+            if (theme2.seed) {
+                commentLines.push(`  Seed: ${theme2.seed}`);
+            }
+            if (theme2.coreColors) {
+                commentLines.push(`  Core Colors:`);
+                if (theme2.coreColors.primary) {
+                    commentLines.push(`    Primary: ${theme2.coreColors.primary}`);
+                }
+                if (theme2.coreColors.secondary) {
+                    commentLines.push(`    Secondary: ${theme2.coreColors.secondary}`);
+                }
+                if (theme2.coreColors.tertiary) {
+                    commentLines.push(`    Tertiary: ${theme2.coreColors.tertiary}`);
+                }
+                if (theme2.coreColors.neutral) {
+                    commentLines.push(`    Neutral: ${theme2.coreColors.neutral}`);
+                }
+                if (theme2.coreColors.neutralVariant) {
+                    commentLines.push(`    Neutral Variant: ${theme2.coreColors.neutralVariant}`);
+                }
+            }
+        }
+    }
+
+    // Generate Material Theme Builder links
+    if (theme1.coreColors) {
+        const url1 = generateThemeBuilderUrl(theme1.coreColors);
+        if (url1) {
+            commentLines.push('');
+            commentLines.push(`Theme 1 Builder Link:`);
+            commentLines.push(`  ${url1}`);
+        }
+    }
+    if (theme2?.coreColors) {
+        const url2 = generateThemeBuilderUrl(theme2.coreColors);
+        if (url2) {
+            commentLines.push('');
+            commentLines.push(`Theme 2 Builder Link:`);
+            commentLines.push(`  ${url2}`);
+        }
+    }
+
+    const comment = commentLines.length > 0 ? `/*\n${commentLines.map(line => ' * ' + line).join('\n')}\n */\n\n` : '';
+    return comment;
+}
+
+function generateThemeBuilderUrl(coreColors: NonNullable): string {
+    const baseUrl = 'http://material-foundation.github.io/material-theme-builder/';
+    const params = new URLSearchParams();
+
+    if (coreColors.primary) {
+        params.append('primary', coreColors.primary.replace('#', ''));
+    }
+    if (coreColors.secondary) {
+        params.append('secondary', coreColors.secondary.replace('#', ''));
+    }
+    if (coreColors.tertiary) {
+        params.append('tertiary', coreColors.tertiary.replace('#', ''));
+    }
+    if (coreColors.neutral) {
+        params.append('neutral', coreColors.neutral.replace('#', ''));
+    }
+    if (coreColors.neutralVariant) {
+        params.append('neutralVariant', coreColors.neutralVariant.replace('#', ''));
+    }
+
+    params.append('colorMatch', 'true');
+
+    return params.toString() ? `${baseUrl}?${params.toString()}` : '';
+}
+
+export function camelToKebab(str: string | null): string {
+    if (!str) {
+        return '';
+    }
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
diff --git a/src/app/typography/typography.component.html b/src/app/typography/typography.component.html
new file mode 100644
index 00000000..9845a2ea
--- /dev/null
+++ b/src/app/typography/typography.component.html
@@ -0,0 +1,14 @@
+

+    
57px mat-font-display-lg

+    
45px mat-font-display-md

+    
36px mat-font-display-sm

+    
32px mat-font-headline-lg

+    
28px mat-font-headline-md

+    
24px mat-font-headline-sm

+    
22px mat-font-title-lg

+    
16px mat-font-title-md

+    
14px mat-font-title-sm

+    
16px mat-font-body-lg

+    
14px mat-font-body-md

+    
12px mat-font-body-sm

+

diff --git a/src/app/typography/typography.component.scss b/src/app/typography/typography.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/typography/typography.component.spec.ts b/src/app/typography/typography.component.spec.ts
new file mode 100644
index 00000000..f3bba617
--- /dev/null
+++ b/src/app/typography/typography.component.spec.ts
@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TypographyComponent} from './typography.component';
+
+describe('TypographyComponent', () => {
+    let component: TypographyComponent;
+    let fixture: ComponentFixture;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [TypographyComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TypographyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/typography/typography.component.ts b/src/app/typography/typography.component.ts
new file mode 100644
index 00000000..7ae0e8fb
--- /dev/null
+++ b/src/app/typography/typography.component.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'app-typography',
+    imports: [],
+    templateUrl: './typography.component.html',
+    styleUrl: './typography.component.scss',
+})
+export class TypographyComponent {}
diff --git a/src/assets/github.svg b/src/assets/github.svg
index 49884fa6..3fc66cc4 100644
--- a/src/assets/github.svg
+++ b/src/assets/github.svg
@@ -1,6 +1,5 @@
-
-    GitHub icon
+
     
 
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 6bad313b..4e6d5936 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1 @@
-Logo
\ No newline at end of file
+Logo
diff --git a/src/index.html b/src/index.html
index b37f410d..0e2ab0e2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,28 @@
 
-
+
     
         
         @ecodev/natural
         
         
         
+        
+        
     
-    
-        
+    
+        
             
         
+
+        
     
 
diff --git a/src/main.ts b/src/main.ts
index bbc129cb..08224fa5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,8 +13,9 @@ import {
     provideIcons,
     providePanels,
     provideSeo,
+    provideThemes,
 } from '@ecodev/natural';
-import {routes} from './app/app-routing';
+import {routes} from './app/app.routes';
 import {AppComponent} from './app/app.component';
 import {DemoLoggerExtra} from './app/demo.error-handler';
 import {AnyLinkMutationService} from './app/shared/services/any-link-mutation.service';
@@ -76,6 +77,19 @@ bootstrapApplication(AppComponent, {
             defaultDescription: 'An amazing angular library',
             languages: ['fr', 'en', 'de', 'it', 'pt'],
         }),
+        provideThemes([
+            'natural',
+            'epicerio',
+            'chez-emmy',
+            'epicentre',
+            'epicoop',
+            'jardinvivant',
+            'lacanopee',
+            'lavracrie',
+            'lelocalhauterive',
+            'levorace',
+            'rucher',
+        ]),
     ],
 }).catch((err: unknown) => {
     console.error(err);
diff --git a/src/styles.scss b/src/styles.scss
index 2c280ade..a0821f9b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,172 +1,47 @@
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
-@use 'sass:map';
-@use '../projects/natural/src/lib/natural.theme';
-@use '../projects/natural-editor/theming/natural-editor.theme';
-@use 'app/home/home.theme';
+@use '../projects/natural/src/lib/natural';
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1');
 
-@include mat.all-component-typographies();
-@include mat.elevation-classes();
-@include mat.app-background();
-
-// Include components themes
-@mixin components-theme($theme) {
-    @include natural.natural($theme);
-    @include natural-editor.natural-editor($theme);
-    @include home.home($theme);
-}
-
-$blue: (
-    50: #ebf2fc,
-    100: #c4daf7,
-    200: #9ec2f1,
-    300: #77aaec,
-    400: #5092e7,
-    500: #2a7ae2,
-    600: #2364b9,
-    700: #1b4e90,
-    800: #143867,
-    900: #0c223e,
-    A100: #80d8ff,
-    A200: #40c4ff,
-    A400: #00b0ff,
-    A700: #0091ea,
-    contrast: (
-        50: rgba(black, 0.87),
-        100: rgba(black, 0.87),
-        200: rgba(black, 0.87),
-        300: rgba(black, 0.87),
-        400: rgba(black, 0.87),
-        500: white,
-        600: white,
-        700: white,
-        800: white,
-        900: white,
-        A100: rgba(black, 0.87),
-        A200: rgba(black, 0.87),
-        A400: rgba(black, 0.87),
-        A700: white,
-    ),
-);
-
-$purple: (
-    50: #f3ebfb,
-    100: #dcc4f5,
-    200: #c59eef,
-    300: #ae77e9,
-    400: #9750e3,
-    500: #812add,
-    600: #6a23b5,
-    700: #531b8d,
-    800: #3b1465,
-    900: #240c3d,
-    A100: #b388ff,
-    A200: #7c4dff,
-    A400: #651fff,
-    A700: #6200ea,
-    contrast: (
-        50: rgba(black, 0.87),
-        100: rgba(black, 0.87),
-        200: rgba(black, 0.87),
-        300: rgba(black, 0.87),
-        400: rgba(black, 0.87),
-        500: rgba(black, 0.87),
-        600: white,
-        700: white,
-        800: white,
-        900: white,
-        A100: rgba(black, 0.87),
-        A200: white,
-        A400: white,
-        A700: white,
-    ),
-);
-
-$pink: (
-    50: #f8ebfc,
-    100: #ebc4f7,
-    200: #de9ef1,
-    300: #d177ec,
-    400: #c450e7,
-    500: #b72ae2,
-    600: #9623b9,
-    700: #751b90,
-    800: #541467,
-    900: #320c3e,
-    A100: #ea80fc,
-    A200: #e040fb,
-    A400: #d500f9,
-    A700: #aa00ff,
-    contrast: (
-        50: rgba(black, 0.87),
-        100: rgba(black, 0.87),
-        200: rgba(black, 0.87),
-        300: rgba(black, 0.87),
-        400: rgba(black, 0.87),
-        500: rgba(black, 0.87),
-        600: white,
-        700: white,
-        800: white,
-        900: white,
-        A100: rgba(black, 0.87),
-        A200: white,
-        A400: white,
-        A700: white,
-    ),
-);
-
-$theme-primary: mat.m2-define-palette($blue);
-$theme-accent: mat.m2-define-palette($pink);
-$theme-warn: mat.m2-define-palette(mat.$m2-red-palette);
-$light-theme: mat.m2-define-light-theme(
-    (
-        color: (
-            primary: $theme-primary,
-            accent: $theme-accent,
-            warn: $theme-warn,
-        ),
-        typography: natural.$typography,
-    )
-);
-$dark-theme: mat.m2-define-dark-theme(
-    (
-        color: (
-            primary: $theme-primary,
-            accent: $theme-accent,
-            warn: $theme-warn,
-        ),
-    )
-);
-
-$baseColorLight: mat.m2-get-color-from-palette(map.get($light-theme, foreground), base);
-$baseColorDark: mat.m2-get-color-from-palette(map.get($dark-theme, foreground), base);
-$baseBgColorDark: mat.m2-get-color-from-palette(map.get($dark-theme, background), background);
-
-@include mat.all-component-themes($light-theme);
-
-.default {
-    color: $baseColorLight;
-    @include components-theme($light-theme);
-}
-
-.defaultDark {
-    background: $baseBgColorDark;
-    color: $baseColorDark;
-
-    @include mat.all-component-colors($dark-theme);
-    @include components-theme($dark-theme);
-}
-
-body {
-    margin: 0;
+html {
+    @include mat.theme(
+        (
+            color: (),
+            typography: Roboto,
+            density: 0,
+        )
+    );
 }
 
 html,
 body,
 app-root {
+    margin: 0;
     height: 100%;
     min-height: 100%;
-    font-size: 14px;
+}
+
+body {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
+    font: var(--mat-sys-body-medium);
+
+    @include mat.table-overrides(
+        (
+            row-item-outline-color: var(--mat-sys-outline-variant),
+        )
+    );
+
+    @include mat.sidenav-overrides(
+        (
+            container-background-color: var(--mat-sys-surface-container),
+            content-background-color: var(--mat-sys-surface-container),
+        )
+    );
 }
 
 app-root {
@@ -176,20 +51,6 @@ app-root {
     align-items: center;
 }
 
-/**
- * Debug
- */
-p.debug,
-pre.debug {
-    margin: 10px;
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    background: rgba(0, 0, 0, 0.2);
-    padding: 10px;
-    font-size: 16px;
-    line-height: 1.5em;
-    font-family: Courrier, monospace;
-}
-
 .app-component > router-outlet + * {
     flex: 1;
     flex-direction: column;
@@ -203,16 +64,23 @@ pre.debug {
     .mat-expansion-panel {
         background: transparent;
     }
-
-    * {
-        color: white !important;
-    }
 }
 
 .nat-gap-50 {
     gap: 50px;
 }
 
-[class^='app-'] .mat-headline-4 {
+[class^='app-'] .mat-font-headline-lg {
     margin-bottom: 30px !important;
 }
+
+p.debug,
+pre.debug {
+    border: 1px solid var(--mat-sys-outline-variant);
+    border-radius: var(--mat-sys-corner-small);
+    background: var(--mat-sys-surface-container);
+    padding: 10px;
+    font-size: 16px;
+    line-height: 1.5em;
+    font-family: Courrier, monospace;
+}
diff --git a/src/styles/chez-emmy.scss b/src/styles/chez-emmy.scss
new file mode 100644
index 00000000..252deecb
--- /dev/null
+++ b/src/styles/chez-emmy.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #87BC73
+ *   Core Colors:
+ *     Primary: #87BC73
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=87BC73&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="chez-emmy"] {
+    @include mat.theme-overrides((
+        primary: #39692B,
+        primary-container: #87BC73,
+        primary-fixed: #BAF2A3,
+        primary-fixed-dim: #9FD589,
+        on-primary: #FFFFFF,
+        on-primary-container: #1C4B10,
+        on-primary-fixed: #032100,
+        on-primary-fixed-variant: #225115,
+        inverse-primary: #9FD589,
+
+        secondary: #506446,
+        secondary-container: #D2EAC4,
+        secondary-fixed: #D2EAC4,
+        secondary-fixed-dim: #B6CDA9,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #556A4C,
+        on-secondary-fixed: #0E2008,
+        on-secondary-fixed-variant: #384C30,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #39692B,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F8FAF1,
+        on-background: #191C17,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="chez-emmy"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#39692B, #A2D88C),
+            primary-container: light-dark(#87BC73, #87BC73),
+            primary-fixed: light-dark(#BAF2A3, #BAF2A3),
+            primary-fixed-dim: light-dark(#9FD589, #9FD589),
+            on-primary: light-dark(#FFFFFF, #083900),
+            on-primary-container: light-dark(#1C4B10, #1C4B10),
+            on-primary-fixed: light-dark(#032100, #032100),
+            on-primary-fixed-variant: light-dark(#225115, #225115),
+            inverse-primary: light-dark(#9FD589, #39692B),
+
+            secondary: light-dark(#506446, #B6CDA9),
+            secondary-container: light-dark(#D2EAC4, #384C30),
+            secondary-fixed: light-dark(#D2EAC4, #D2EAC4),
+            secondary-fixed-dim: light-dark(#B6CDA9, #B6CDA9),
+            on-secondary: light-dark(#FFFFFF, #22351C),
+            on-secondary-container: light-dark(#556A4C, #A5BC99),
+            on-secondary-fixed: light-dark(#0E2008, #0E2008),
+            on-secondary-fixed-variant: light-dark(#384C30, #384C30),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#39692B, #9FD589),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F8FAF1, #11140F),
+            on-background: light-dark(#191C17, #E1E3DB),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/epicentre.scss b/src/styles/epicentre.scss
new file mode 100644
index 00000000..a1c75284
--- /dev/null
+++ b/src/styles/epicentre.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #0086B2
+ *   Core Colors:
+ *     Primary: #0086B2
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=0086B2&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="epicentre"] {
+    @include mat.theme-overrides((
+        primary: #006385,
+        primary-container: #007EA7,
+        primary-fixed: #C2E8FF,
+        primary-fixed-dim: #76D1FF,
+        on-primary: #FFFFFF,
+        on-primary-container: #FBFCFF,
+        on-primary-fixed: #001E2C,
+        on-primary-fixed-variant: #004D67,
+        inverse-primary: #76D1FF,
+
+        secondary: #426274,
+        secondary-container: #C3E4FA,
+        secondary-fixed: #C5E7FC,
+        secondary-fixed-dim: #AACBE0,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #466779,
+        on-secondary-fixed: #001E2C,
+        on-secondary-fixed-variant: #2A4B5C,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #006688,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F6FAFE,
+        on-background: #181C1F,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="epicentre"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#006385, #76D1FF),
+            primary-container: light-dark(#007EA7, #319BC8),
+            primary-fixed: light-dark(#C2E8FF, #C2E8FF),
+            primary-fixed-dim: light-dark(#76D1FF, #76D1FF),
+            on-primary: light-dark(#FFFFFF, #003548),
+            on-primary-container: light-dark(#FBFCFF, #00131D),
+            on-primary-fixed: light-dark(#001E2C, #001E2C),
+            on-primary-fixed-variant: light-dark(#004D67, #004D67),
+            inverse-primary: light-dark(#76D1FF, #006688),
+
+            secondary: light-dark(#426274, #AACBE0),
+            secondary-container: light-dark(#C3E4FA, #2A4B5C),
+            secondary-fixed: light-dark(#C5E7FC, #C5E7FC),
+            secondary-fixed-dim: light-dark(#AACBE0, #AACBE0),
+            on-secondary: light-dark(#FFFFFF, #103444),
+            on-secondary-container: light-dark(#466779, #99BACE),
+            on-secondary-fixed: light-dark(#001E2C, #001E2C),
+            on-secondary-fixed-variant: light-dark(#2A4B5C, #2A4B5C),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#006688, #76D1FF),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F6FAFE, #101417),
+            on-background: light-dark(#181C1F, #DFE3E7),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/epicerio.scss b/src/styles/epicerio.scss
new file mode 100644
index 00000000..afbf76e0
--- /dev/null
+++ b/src/styles/epicerio.scss
@@ -0,0 +1,140 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #FF960B
+ *   Core Colors:
+ *     Primary: #FF960B
+ *     Tertiary: #107DD0
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=FF960B&tertiary=107DD0&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+[data-theme="epicerio"] {
+    @include mat.theme-overrides((
+        primary: #8C5000,
+        primary-container: #FF960B,
+        primary-fixed: #FFDCBF,
+        primary-fixed-dim: #FFB874,
+        on-primary: #FFFFFF,
+        on-primary-container: #653800,
+        on-primary-fixed: #2D1600,
+        on-primary-fixed-variant: #6A3B00,
+        inverse-primary: #FFB874,
+
+        secondary: #825425,
+        secondary-container: #FDC087,
+        secondary-fixed: #FFDCBF,
+        secondary-fixed-dim: #F7BA82,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #784C1E,
+        on-secondary-fixed: #2D1600,
+        on-secondary-fixed-variant: #663D10,
+
+        tertiary: #005EA1,
+        tertiary-container: #0078CA,
+        tertiary-fixed: #D2E4FF,
+        tertiary-fixed-dim: #9FCAFF,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #FDFCFF,
+        on-tertiary-fixed: #001D36,
+        on-tertiary-fixed-variant: #00497E,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #8C5000,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #FFF8F5,
+        on-background: #231A12,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+    [data-theme="epicerio"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#8C5000, #FFBE81),
+            primary-container: light-dark(#FF960B, #FF960B),
+            primary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            primary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-primary: light-dark(#FFFFFF, #4B2800),
+            on-primary-container: light-dark(#653800, #653800),
+            on-primary-fixed: light-dark(#2D1600, #2D1600),
+            on-primary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+            inverse-primary: light-dark(#FFB874, #8C5000),
+
+            secondary: light-dark(#825425, #F7BA82),
+            secondary-container: light-dark(#FDC087, #693F12),
+            secondary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            secondary-fixed-dim: light-dark(#F7BA82, #F7BA82),
+            on-secondary: light-dark(#FFFFFF, #4B2800),
+            on-secondary-container: light-dark(#784C1E, #E8AC75),
+            on-secondary-fixed: light-dark(#2D1600, #2D1600),
+            on-secondary-fixed-variant: light-dark(#663D10, #663D10),
+
+            tertiary: light-dark(#005EA1, #9FCAFF),
+            tertiary-container: light-dark(#0078CA, #3B94E9),
+            tertiary-fixed: light-dark(#D2E4FF, #D2E4FF),
+            tertiary-fixed-dim: light-dark(#9FCAFF, #9FCAFF),
+            on-tertiary: light-dark(#FFFFFF, #003259),
+            on-tertiary-container: light-dark(#FDFCFF, #000D1D),
+            on-tertiary-fixed: light-dark(#001D36, #001D36),
+            on-tertiary-fixed-variant: light-dark(#00497E, #00497E),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#8C5000, #FFB874),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#FFF8F5, #1A120A),
+            on-background: light-dark(#231A12, #F2DFD1),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/epicoop.scss b/src/styles/epicoop.scss
new file mode 100644
index 00000000..de7e92bd
--- /dev/null
+++ b/src/styles/epicoop.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #0086B2
+ *   Core Colors:
+ *     Primary: #0086B2
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=0086B2&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="epicoop"] {
+    @include mat.theme-overrides((
+        primary: #006385,
+        primary-container: #007EA7,
+        primary-fixed: #C2E8FF,
+        primary-fixed-dim: #76D1FF,
+        on-primary: #FFFFFF,
+        on-primary-container: #FBFCFF,
+        on-primary-fixed: #001E2C,
+        on-primary-fixed-variant: #004D67,
+        inverse-primary: #76D1FF,
+
+        secondary: #426274,
+        secondary-container: #C3E4FA,
+        secondary-fixed: #C5E7FC,
+        secondary-fixed-dim: #AACBE0,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #466779,
+        on-secondary-fixed: #001E2C,
+        on-secondary-fixed-variant: #2A4B5C,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #006688,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F6FAFE,
+        on-background: #181C1F,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="epicoop"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#006385, #76D1FF),
+            primary-container: light-dark(#007EA7, #319BC8),
+            primary-fixed: light-dark(#C2E8FF, #C2E8FF),
+            primary-fixed-dim: light-dark(#76D1FF, #76D1FF),
+            on-primary: light-dark(#FFFFFF, #003548),
+            on-primary-container: light-dark(#FBFCFF, #00131D),
+            on-primary-fixed: light-dark(#001E2C, #001E2C),
+            on-primary-fixed-variant: light-dark(#004D67, #004D67),
+            inverse-primary: light-dark(#76D1FF, #006688),
+
+            secondary: light-dark(#426274, #AACBE0),
+            secondary-container: light-dark(#C3E4FA, #2A4B5C),
+            secondary-fixed: light-dark(#C5E7FC, #C5E7FC),
+            secondary-fixed-dim: light-dark(#AACBE0, #AACBE0),
+            on-secondary: light-dark(#FFFFFF, #103444),
+            on-secondary-container: light-dark(#466779, #99BACE),
+            on-secondary-fixed: light-dark(#001E2C, #001E2C),
+            on-secondary-fixed-variant: light-dark(#2A4B5C, #2A4B5C),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#006688, #76D1FF),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F6FAFE, #101417),
+            on-background: light-dark(#181C1F, #DFE3E7),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/jardinvivant.scss b/src/styles/jardinvivant.scss
new file mode 100644
index 00000000..bdcaa90d
--- /dev/null
+++ b/src/styles/jardinvivant.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #0086B2
+ *   Core Colors:
+ *     Primary: #0086B2
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=0086B2&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="jardinvivant"] {
+    @include mat.theme-overrides((
+        primary: #006385,
+        primary-container: #007EA7,
+        primary-fixed: #C2E8FF,
+        primary-fixed-dim: #76D1FF,
+        on-primary: #FFFFFF,
+        on-primary-container: #FBFCFF,
+        on-primary-fixed: #001E2C,
+        on-primary-fixed-variant: #004D67,
+        inverse-primary: #76D1FF,
+
+        secondary: #426274,
+        secondary-container: #C3E4FA,
+        secondary-fixed: #C5E7FC,
+        secondary-fixed-dim: #AACBE0,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #466779,
+        on-secondary-fixed: #001E2C,
+        on-secondary-fixed-variant: #2A4B5C,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #006688,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F6FAFE,
+        on-background: #181C1F,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="jardinvivant"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#006385, #76D1FF),
+            primary-container: light-dark(#007EA7, #319BC8),
+            primary-fixed: light-dark(#C2E8FF, #C2E8FF),
+            primary-fixed-dim: light-dark(#76D1FF, #76D1FF),
+            on-primary: light-dark(#FFFFFF, #003548),
+            on-primary-container: light-dark(#FBFCFF, #00131D),
+            on-primary-fixed: light-dark(#001E2C, #001E2C),
+            on-primary-fixed-variant: light-dark(#004D67, #004D67),
+            inverse-primary: light-dark(#76D1FF, #006688),
+
+            secondary: light-dark(#426274, #AACBE0),
+            secondary-container: light-dark(#C3E4FA, #2A4B5C),
+            secondary-fixed: light-dark(#C5E7FC, #C5E7FC),
+            secondary-fixed-dim: light-dark(#AACBE0, #AACBE0),
+            on-secondary: light-dark(#FFFFFF, #103444),
+            on-secondary-container: light-dark(#466779, #99BACE),
+            on-secondary-fixed: light-dark(#001E2C, #001E2C),
+            on-secondary-fixed-variant: light-dark(#2A4B5C, #2A4B5C),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#006688, #76D1FF),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F6FAFE, #101417),
+            on-background: light-dark(#181C1F, #DFE3E7),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/lacanopee.scss b/src/styles/lacanopee.scss
new file mode 100644
index 00000000..3ed92b47
--- /dev/null
+++ b/src/styles/lacanopee.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #6B886A
+ *   Core Colors:
+ *     Primary: #6B886A
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=6B886A&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="lacanopee"] {
+    @include mat.theme-overrides((
+        primary: #476347,
+        primary-container: #5F7C5E,
+        primary-fixed: #CBEBC8,
+        primary-fixed-dim: #B0CFAD,
+        on-primary: #FFFFFF,
+        on-primary-container: #F7FFF2,
+        on-primary-fixed: #06210B,
+        on-primary-fixed-variant: #324D33,
+        inverse-primary: #B0CFAD,
+
+        secondary: #566154,
+        secondary-container: #D7E3D2,
+        secondary-fixed: #DAE6D5,
+        secondary-fixed-dim: #BECABA,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #5A6658,
+        on-secondary-fixed: #141E14,
+        on-secondary-fixed-variant: #3F4A3D,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #496549,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #FAF9F5,
+        on-background: #1A1C1A,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="lacanopee"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#476347, #B0CFAD),
+            primary-container: light-dark(#5F7C5E, #7B9879),
+            primary-fixed: light-dark(#CBEBC8, #CBEBC8),
+            primary-fixed-dim: light-dark(#B0CFAD, #B0CFAD),
+            on-primary: light-dark(#FFFFFF, #1C361E),
+            on-primary-container: light-dark(#F7FFF2, #031D08),
+            on-primary-fixed: light-dark(#06210B, #06210B),
+            on-primary-fixed-variant: light-dark(#324D33, #324D33),
+            inverse-primary: light-dark(#B0CFAD, #496549),
+
+            secondary: light-dark(#566154, #BECABA),
+            secondary-container: light-dark(#D7E3D2, #3F4A3D),
+            secondary-fixed: light-dark(#DAE6D5, #DAE6D5),
+            secondary-fixed-dim: light-dark(#BECABA, #BECABA),
+            on-secondary: light-dark(#FFFFFF, #283328),
+            on-secondary-container: light-dark(#5A6658, #ACB9A9),
+            on-secondary-fixed: light-dark(#141E14, #141E14),
+            on-secondary-fixed-variant: light-dark(#3F4A3D, #3F4A3D),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#496549, #B0CFAD),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#FAF9F5, #121412),
+            on-background: light-dark(#1A1C1A, #E3E3DE),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/lavracrie.scss b/src/styles/lavracrie.scss
new file mode 100644
index 00000000..14eaa4a4
--- /dev/null
+++ b/src/styles/lavracrie.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #95B250
+ *   Core Colors:
+ *     Primary: #95B250
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=95B250&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="lavracrie"] {
+    @include mat.theme-overrides((
+        primary: #4E6708,
+        primary-container: #95B250,
+        primary-fixed: #CFEE84,
+        primary-fixed-dim: #B3D26C,
+        on-primary: #FFFFFF,
+        on-primary-container: #314300,
+        on-primary-fixed: #151F00,
+        on-primary-fixed-variant: #394D00,
+        inverse-primary: #B3D26C,
+
+        secondary: #57633B,
+        secondary-container: #D8E5B3,
+        secondary-fixed: #DBE8B6,
+        secondary-fixed-dim: #BFCC9C,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #5B673F,
+        on-secondary-fixed: #151F01,
+        on-secondary-fixed-variant: #404B26,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #4E6708,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #FAFAEE,
+        on-background: #1B1C15,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="lavracrie"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#4E6708, #B3D26C),
+            primary-container: light-dark(#95B250, #95B250),
+            primary-fixed: light-dark(#CFEE84, #CFEE84),
+            primary-fixed-dim: light-dark(#B3D26C, #B3D26C),
+            on-primary: light-dark(#FFFFFF, #263500),
+            on-primary-container: light-dark(#314300, #314300),
+            on-primary-fixed: light-dark(#151F00, #151F00),
+            on-primary-fixed-variant: light-dark(#394D00, #394D00),
+            inverse-primary: light-dark(#B3D26C, #4E6708),
+
+            secondary: light-dark(#57633B, #BFCC9C),
+            secondary-container: light-dark(#D8E5B3, #424D28),
+            secondary-fixed: light-dark(#DBE8B6, #DBE8B6),
+            secondary-fixed-dim: light-dark(#BFCC9C, #BFCC9C),
+            on-secondary: light-dark(#FFFFFF, #2A3411),
+            on-secondary-container: light-dark(#5B673F, #B1BE8E),
+            on-secondary-fixed: light-dark(#151F01, #151F01),
+            on-secondary-fixed-variant: light-dark(#404B26, #404B26),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#4E6708, #B3D26C),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#FAFAEE, #12140D),
+            on-background: light-dark(#1B1C15, #E3E3D7),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/lelocalhauterive.scss b/src/styles/lelocalhauterive.scss
new file mode 100644
index 00000000..a49ded9a
--- /dev/null
+++ b/src/styles/lelocalhauterive.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #4CAF50
+ *   Core Colors:
+ *     Primary: #4CAF50
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=4CAF50&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="lelocalhauterive"] {
+    @include mat.theme-overrides((
+        primary: #006E1C,
+        primary-container: #4CAF50,
+        primary-fixed: #94F990,
+        primary-fixed-dim: #78DC77,
+        on-primary: #FFFFFF,
+        on-primary-container: #003C0B,
+        on-primary-fixed: #002204,
+        on-primary-fixed-variant: #005313,
+        inverse-primary: #78DC77,
+
+        secondary: #42673F,
+        secondary-container: #C3EEBB,
+        secondary-fixed: #C3EEBB,
+        secondary-fixed-dim: #A8D1A1,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #486D45,
+        on-secondary-fixed: #002204,
+        on-secondary-fixed-variant: #2B4F2A,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #006E1C,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F5FBEF,
+        on-background: #171D16,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="lelocalhauterive"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#006E1C, #78DC77),
+            primary-container: light-dark(#4CAF50, #4CAF50),
+            primary-fixed: light-dark(#94F990, #94F990),
+            primary-fixed-dim: light-dark(#78DC77, #78DC77),
+            on-primary: light-dark(#FFFFFF, #00390A),
+            on-primary-container: light-dark(#003C0B, #003C0B),
+            on-primary-fixed: light-dark(#002204, #002204),
+            on-primary-fixed-variant: light-dark(#005313, #005313),
+            inverse-primary: light-dark(#78DC77, #006E1C),
+
+            secondary: light-dark(#42673F, #A8D1A1),
+            secondary-container: light-dark(#C3EEBB, #2B4F2A),
+            secondary-fixed: light-dark(#C3EEBB, #C3EEBB),
+            secondary-fixed-dim: light-dark(#A8D1A1, #A8D1A1),
+            on-secondary: light-dark(#FFFFFF, #143815),
+            on-secondary-container: light-dark(#486D45, #97C091),
+            on-secondary-fixed: light-dark(#002204, #002204),
+            on-secondary-fixed-variant: light-dark(#2B4F2A, #2B4F2A),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#006E1C, #78DC77),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F5FBEF, #0F150E),
+            on-background: light-dark(#171D16, #DEE4D9),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/levorace.scss b/src/styles/levorace.scss
new file mode 100644
index 00000000..dd43e8ec
--- /dev/null
+++ b/src/styles/levorace.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #4CAF50
+ *   Core Colors:
+ *     Primary: #4CAF50
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=4CAF50&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="levorace"] {
+    @include mat.theme-overrides((
+        primary: #006E1C,
+        primary-container: #4CAF50,
+        primary-fixed: #94F990,
+        primary-fixed-dim: #78DC77,
+        on-primary: #FFFFFF,
+        on-primary-container: #003C0B,
+        on-primary-fixed: #002204,
+        on-primary-fixed-variant: #005313,
+        inverse-primary: #78DC77,
+
+        secondary: #42673F,
+        secondary-container: #C3EEBB,
+        secondary-fixed: #C3EEBB,
+        secondary-fixed-dim: #A8D1A1,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #486D45,
+        on-secondary-fixed: #002204,
+        on-secondary-fixed-variant: #2B4F2A,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #006E1C,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F5FBEF,
+        on-background: #171D16,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="levorace"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#006E1C, #78DC77),
+            primary-container: light-dark(#4CAF50, #4CAF50),
+            primary-fixed: light-dark(#94F990, #94F990),
+            primary-fixed-dim: light-dark(#78DC77, #78DC77),
+            on-primary: light-dark(#FFFFFF, #00390A),
+            on-primary-container: light-dark(#003C0B, #003C0B),
+            on-primary-fixed: light-dark(#002204, #002204),
+            on-primary-fixed-variant: light-dark(#005313, #005313),
+            inverse-primary: light-dark(#78DC77, #006E1C),
+
+            secondary: light-dark(#42673F, #A8D1A1),
+            secondary-container: light-dark(#C3EEBB, #2B4F2A),
+            secondary-fixed: light-dark(#C3EEBB, #C3EEBB),
+            secondary-fixed-dim: light-dark(#A8D1A1, #A8D1A1),
+            on-secondary: light-dark(#FFFFFF, #143815),
+            on-secondary-container: light-dark(#486D45, #97C091),
+            on-secondary-fixed: light-dark(#002204, #002204),
+            on-secondary-fixed-variant: light-dark(#2B4F2A, #2B4F2A),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#006E1C, #78DC77),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F5FBEF, #0F150E),
+            on-background: light-dark(#171D16, #DEE4D9),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/natural.scss b/src/styles/natural.scss
new file mode 100644
index 00000000..1e9869ee
--- /dev/null
+++ b/src/styles/natural.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #2A7AE2
+ *   Core Colors:
+ *     Primary: #2A7AE2
+ *     Tertiary: #B72AE2
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=2A7AE2&tertiary=B72AE2&neutral=FFFFFF&neutralVariant=FFFFFF
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+:root, :host,
+[data-theme="natural"] {
+    @include mat.theme-overrides((
+        primary: #005AB5,
+        primary-container: #1E73DB,
+        primary-fixed: #D6E3FF,
+        primary-fixed-dim: #AAC7FF,
+        on-primary: #FFFFFF,
+        on-primary-container: #FEFCFF,
+        on-primary-fixed: #001B3E,
+        on-primary-fixed-variant: #00458E,
+        inverse-primary: #AAC7FF,
+
+        secondary: #485F87,
+        secondary-container: #B8CFFE,
+        secondary-fixed: #D6E3FF,
+        secondary-fixed-dim: #B0C7F5,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #415880,
+        on-secondary-fixed: #001B3E,
+        on-secondary-fixed-variant: #30476E,
+
+        tertiary: #9700C0,
+        tertiary-container: #B72AE2,
+        tertiary-fixed: #FBD7FF,
+        tertiary-fixed-dim: #F1AFFF,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #FFF9FA,
+        on-tertiary-fixed: #330043,
+        on-tertiary-fixed-variant: #780098,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #005DB9,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #F9F9FF,
+        on-background: #191C22,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+    :root, :host,
+    [data-theme="natural"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#005AB5, #AAC7FF),
+            primary-container: light-dark(#1E73DB, #4890F9),
+            primary-fixed: light-dark(#D6E3FF, #D6E3FF),
+            primary-fixed-dim: light-dark(#AAC7FF, #AAC7FF),
+            on-primary: light-dark(#FFFFFF, #002F64),
+            on-primary-container: light-dark(#FEFCFF, #000F28),
+            on-primary-fixed: light-dark(#001B3E, #001B3E),
+            on-primary-fixed-variant: light-dark(#00458E, #00458E),
+            inverse-primary: light-dark(#AAC7FF, #005DB9),
+
+            secondary: light-dark(#485F87, #B0C7F5),
+            secondary-container: light-dark(#B8CFFE, #30476E),
+            secondary-fixed: light-dark(#D6E3FF, #D6E3FF),
+            secondary-fixed-dim: light-dark(#B0C7F5, #B0C7F5),
+            on-secondary: light-dark(#FFFFFF, #173056),
+            on-secondary-container: light-dark(#415880, #9FB6E3),
+            on-secondary-fixed: light-dark(#001B3E, #001B3E),
+            on-secondary-fixed-variant: light-dark(#30476E, #30476E),
+
+            tertiary: light-dark(#9700C0, #F1AFFF),
+            tertiary-container: light-dark(#B72AE2, #B72AE2),
+            tertiary-fixed: light-dark(#FBD7FF, #FBD7FF),
+            tertiary-fixed-dim: light-dark(#F1AFFF, #F1AFFF),
+            on-tertiary: light-dark(#FFFFFF, #54006C),
+            on-tertiary-container: light-dark(#FFF9FA, #FFF9FA),
+            on-tertiary-fixed: light-dark(#330043, #330043),
+            on-tertiary-fixed-variant: light-dark(#780098, #780098),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#005DB9, #AAC7FF),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#F9F9FF, #10131A),
+            on-background: light-dark(#191C22, #E1E2EB),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/src/styles/rucher.scss b/src/styles/rucher.scss
new file mode 100644
index 00000000..089771d0
--- /dev/null
+++ b/src/styles/rucher.scss
@@ -0,0 +1,142 @@
+/*
+ * Theme 1 (light + dark):
+ *   Seed: #CA2D6A
+ *   Core Colors:
+ *     Primary: #CA2D6A
+ *     Tertiary: #FF960B
+ *     Neutral: #FFFFFF
+ *     Neutral Variant: #FFFFFF
+ *
+ * Theme 1 Builder Link:
+ *   http://material-foundation.github.io/material-theme-builder/?primary=CA2D6A&tertiary=FF960B&neutral=FFFFFF&neutralVariant=FFFFFF&colorMatch=true
+ */
+
+@use '@angular/material' as mat;
+
+// Only light color for old browsers that don't support light-dark()
+/* prettier-ignore */
+
+[data-theme="rucher"] {
+    @include mat.theme-overrides((
+        primary: #A80952,
+        primary-container: #CA2D6A,
+        primary-fixed: #FFD9E0,
+        primary-fixed-dim: #FFB1C4,
+        on-primary: #FFFFFF,
+        on-primary-container: #FFEDEF,
+        on-primary-fixed: #3F001A,
+        on-primary-fixed-variant: #8F0044,
+        inverse-primary: #FFB1C4,
+
+        secondary: #97425C,
+        secondary-container: #FF97B3,
+        secondary-fixed: #FFD9E0,
+        secondary-fixed-dim: #FFB1C4,
+        on-secondary: #FFFFFF,
+        on-secondary-container: #7A2B45,
+        on-secondary-fixed: #3F001A,
+        on-secondary-fixed-variant: #792B45,
+
+        tertiary: #8C5000,
+        tertiary-container: #FF960B,
+        tertiary-fixed: #FFDCBF,
+        tertiary-fixed-dim: #FFB874,
+        on-tertiary: #FFFFFF,
+        on-tertiary-container: #653800,
+        on-tertiary-fixed: #2D1600,
+        on-tertiary-fixed-variant: #6A3B00,
+
+        error: #BC0100,
+        error-container: #EB0000,
+        on-error: #FFFFFF,
+        on-error-container: #FFFBFF,
+
+        surface: #FCF8F8,
+        surface-variant: #E0E3E3,
+        on-surface: #1C1B1B,
+        on-surface-variant: #444748,
+        surface-dim: #DDD9D9,
+        surface-bright: #FCF8F8,
+        surface-container-lowest: #FFFFFF,
+        surface-container-low: #F6F3F2,
+        surface-container: #F1EDEC,
+        surface-container-high: #EBE7E7,
+        surface-container-highest: #E5E2E1,
+        surface-tint: #B5195B,
+        inverse-surface: #313030,
+        inverse-on-surface: #F4F0EF,
+
+        background: #FFF8F8,
+        on-background: #25181B,
+
+        outline: #747878,
+        outline-variant: #C4C7C8,
+        shadow: #000000,
+        scrim: #000000
+    ));
+}
+
+// Both colors for new browsers that support light-dark()
+@supports (color: light-dark(white, black)) {
+    /* prettier-ignore */
+
+    [data-theme="rucher"] {
+        @include mat.theme-overrides((
+            primary: light-dark(#A80952, #FFB1C4),
+            primary-container: light-dark(#CA2D6A, #CA2D6A),
+            primary-fixed: light-dark(#FFD9E0, #FFD9E0),
+            primary-fixed-dim: light-dark(#FFB1C4, #FFB1C4),
+            on-primary: light-dark(#FFFFFF, #65002E),
+            on-primary-container: light-dark(#FFEDEF, #FFEDEF),
+            on-primary-fixed: light-dark(#3F001A, #3F001A),
+            on-primary-fixed-variant: light-dark(#8F0044, #8F0044),
+            inverse-primary: light-dark(#FFB1C4, #B5195B),
+
+            secondary: light-dark(#97425C, #FFB1C4),
+            secondary-container: light-dark(#FF97B3, #7C2D47),
+            secondary-fixed: light-dark(#FFD9E0, #FFD9E0),
+            secondary-fixed-dim: light-dark(#FFB1C4, #FFB1C4),
+            on-secondary: light-dark(#FFFFFF, #5D142F),
+            on-secondary-container: light-dark(#7A2B45, #FF9BB6),
+            on-secondary-fixed: light-dark(#3F001A, #3F001A),
+            on-secondary-fixed-variant: light-dark(#792B45, #792B45),
+
+            tertiary: light-dark(#8C5000, #FFBE81),
+            tertiary-container: light-dark(#FF960B, #FF960B),
+            tertiary-fixed: light-dark(#FFDCBF, #FFDCBF),
+            tertiary-fixed-dim: light-dark(#FFB874, #FFB874),
+            on-tertiary: light-dark(#FFFFFF, #4B2800),
+            on-tertiary-container: light-dark(#653800, #653800),
+            on-tertiary-fixed: light-dark(#2D1600, #2D1600),
+            on-tertiary-fixed-variant: light-dark(#6A3B00, #6A3B00),
+
+            error: light-dark(#BC0100, #FFB4A8),
+            error-container: light-dark(#EB0000, #FF5540),
+            on-error: light-dark(#FFFFFF, #690100),
+            on-error-container: light-dark(#FFFBFF, #360000),
+
+            surface: light-dark(#FCF8F8, #141313),
+            surface-variant: light-dark(#E0E3E3, #444748),
+            on-surface: light-dark(#1C1B1B, #E5E2E1),
+            on-surface-variant: light-dark(#444748, #C4C7C8),
+            surface-dim: light-dark(#DDD9D9, #141313),
+            surface-bright: light-dark(#FCF8F8, #3A3939),
+            surface-container-lowest: light-dark(#FFFFFF, #0E0E0E),
+            surface-container-low: light-dark(#F6F3F2, #1C1B1B),
+            surface-container: light-dark(#F1EDEC, #201F1F),
+            surface-container-high: light-dark(#EBE7E7, #2A2A2A),
+            surface-container-highest: light-dark(#E5E2E1, #353434),
+            surface-tint: light-dark(#B5195B, #FFB1C4),
+            inverse-surface: light-dark(#313030, #E5E2E1),
+            inverse-on-surface: light-dark(#F4F0EF, #313030),
+
+            background: light-dark(#FFF8F8, #1D1013),
+            on-background: light-dark(#25181B, #F6DCE1),
+
+            outline: light-dark(#747878, #8E9192),
+            outline-variant: light-dark(#C4C7C8, #444748),
+            shadow: light-dark(#000000, #000000),
+            scrim: light-dark(#000000, #000000)
+        ));
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index b066f1f8..c447823d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5528,6 +5528,11 @@ symbol-observable@^4.0.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
   integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
 
+tagged-tag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tagged-tag/-/tagged-tag-1.0.0.tgz#a0b5917c2864cba54841495abfa3f6b13edcf4d6"
+  integrity sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==
+
 tar@^6.1.11:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
@@ -5623,10 +5628,12 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-type-fest@^4.41.0:
-  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.41.0.tgz#6ae1c8e5731273c2bf1f58ad39cbae2c91a46c58"
-  integrity sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==
+type-fest@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-5.3.1.tgz#251b8d0a813c1dbccf1f9450ba5adcdf7072adc2"
+  integrity sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==
+  dependencies:
+    tagged-tag "^1.0.0"
 
 type-is@^2.0.0, type-is@^2.0.1:
   version "2.0.1"