@elderbyte/ngx-starter 19.1.0-beta.0 → 19.1.0-beta.10

package/lib/common/utils/public_api.d.ts

@@ -11,3 +11,4 @@ export * from './query-list-binding';
 export * from './parse-util';
 export * from './focus-util';
 export * from './batcher';
+export * from './signal-input';

package/lib/components/data-view/base/elder-data-view-base.d.ts

@@ -37,10 +37,12 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      */
     private _dense;
     /**
+     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
      * The appearance of the surrounding card container.
      */
     private _appearance;
     /**
+     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
      * If true, this table is in embedded mode.
      * No borders / floating visible so that the table can be embedded into another container
      */
@@ -101,9 +103,21 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      * @deprecated Switch to appearance="raised"
      */
     set float(value: BooleanInput);
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     set appearance(value: MatCardAppearance);
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     get appearance(): MatCardAppearance;
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     set embedded(value: boolean | '');
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     get embedded(): boolean | '';
     /***************************************************************************
      *                                                                         *

package/lib/components/layout/basic-pane-layout/basic-pane-layout.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ElderBasicPaneLayoutComponent {
+    class: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBasicPaneLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBasicPaneLayoutComponent, "elder-basic-pane-layout", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/layout/pane-header/pane-header.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ElderPaneHeaderComponent {
+    class: string;
+    title: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneHeaderComponent, "elder-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/layout/public_api.d.ts

@@ -1,2 +1,3 @@
 export * from './pane/pane.component';
-export * from './pane-container/pane-container.component';
+export * from './pane-header/pane-header.component';
+export * from './basic-pane-layout/basic-pane-layout.component';

package/lib/components/public_api.d.ts

@@ -40,5 +40,4 @@ export * from './auditing/elder-audit.module';
 export * from './tabs/elder-tab.module';
 export * from './badge/elder-badge.module';
 export * from './page/public_api';
-export { ElderStyleDebuggerComponent } from './style-debugger/style-debugger.component';
 export * from './layout/public_api';

package/lib/components/select/single/elder-select/elder-select.component.d.ts

@@ -144,6 +144,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      */
     protected writeToControl(value: TValue): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": { "alias": "nullDisplay"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "entity": { "alias": "entity"; "required": false; }; "entityId": { "alias": "entityId"; "required": false; }; }, { "entityIdChange": "entityIdChange"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": { "alias": "nullDisplay"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "entity": { "alias": "entity"; "required": false; }; "entityId": { "alias": "entityId"; "required": false; }; }, { "entityIdChange": "entityIdChange"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; "entity$": "entity"; }, never, never, true, never>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.0-beta.0",
+  "version": "19.1.0-beta.10",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -5,6 +5,7 @@ $elder-tile-padding: 8px;
 @mixin theme($theme) {
   .elder-grid-container {
     border-radius: var(--elder-border-radius-sm);
+    background-color: var(--elder-grid-background-color);
   }
 
   mat-card:has(> .elder-grid-container) {
@@ -20,7 +21,7 @@ $elder-tile-padding: 8px;
   }
 
   .elder-grid-footer {
-    min-height: 44px;
+    min-height: var(--elder-data-element-footer-height);
   }
 
   .elder-grid-tile {

package/src/lib/components/data-view/table/elder-table/elder-table.component.scss

@@ -59,7 +59,7 @@
   }
 
   .elder-table-footer {
-    height: 44px;
+    height: var(--elder-data-element-footer-height);
   }
 
   .elder-table-checkbox {
@@ -83,7 +83,7 @@
   }
 
   .elder-table-row:hover {
-    background-color: var(--md-sys-color-surface-container);
+    background-color: var(--elder-color-highlight-variant);
     cursor: pointer;
   }
 
@@ -93,7 +93,7 @@
     outline-style: none;
     td {
       background-color: var(
-        --md-sys-color-primary-container
+        --elder-color-highlight-strong
       ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
       border-bottom: var(
         --md-sys-color-tertiary-fixed
@@ -102,11 +102,11 @@
   }
   .elder-table-row.elder-table-row-activated {
     //background-color: var(--md-sys-color-surface-dim);
-    background-color: var(--md-sys-color-primary-container);
+    background-color: var(--elder-color-highlight-strong);
   }
 
   .elder-table-row.elder-table-row-selected {
-    background-color: var(--md-sys-color-primary-container);
+    background-color: var(--elder-color-highlight-strong);
   }
 
   .elder-mat-table-flat {
@@ -148,7 +148,7 @@
         }
 
         &:last-of-type {
-          padding-right: $pad;
+          padding-right: $pad; // TODO: This can lead to overflows in some cases, is there a better solution?
 
           &[mat-sort-header]:not([arrowposition='before']) {
             padding-right: $pad;

package/src/lib/components/files/blob-viewer/elder-blob-viewer.component.scss

@@ -40,6 +40,6 @@
   height: 100%;
   border-radius: 0px;
   box-shadow: 0px 2px 14px #000;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
+  border: none;
+  padding: 8px;
 }

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -18,14 +18,14 @@
 }
 
 .elder-drop-zone.is-dragover {
-  border: 4px solid var(--md-sys-color-tertiary-fixed);
-  background-color: var(--md-sys-color-tertiary);
+  border: 4px solid var(--md-sys-color-tertiary);
+  background-color: var(--md-sys-color-tertiary-container);
 
   .elder-drop-zone-icon {
-    color: var(--md-sys-color-tertiary-fixed);
+    color: var(--md-sys-color-tertiary);
   }
 
   .elder-drop-zone-prompt {
-    color: var(--md-sys-color-tertiary-fixed);
+    color: var(--md-sys-color-tertiary);
   }
 }

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -1,5 +1,5 @@
 .elder-dialog-panel {
-  background-color: var(--md-sys-color-surface-container-lowest);
+  background-color: var(--elder-dialog-panel-bg-color);
   color: var(--md-sys-color-on-surface);
 
   padding: 10px;

package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.scss

@@ -11,5 +11,5 @@
 }
 
 .elder-app-header-panel {
-  background-color: #0b284f; // TODO: replace in m3
+  background-color: var(--md-sys-color-primary);
 }

package/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -4,7 +4,7 @@
 
   &.elder-toast-type-warn {
     --elder-toast-message-color-title: var(--elder-toast-message-color-title-warn);
-    --mdc-filled-button-container-color: var(--md-sys-color-tertiary-container);
+    --mdc-filled-button-container-color: var(--md-sys-color-tertiary);
   }
 
   &.elder-toast-type-error {

package/theming/abstracts/_elder-design-tokens.scss

@@ -0,0 +1,175 @@
+@use 'sass:map';
+@use './elder-scss-variables' as config;
+
+@mixin elder-design-tokens() {
+  @include elder-badge-sizing();
+
+  & {
+    // bg color
+    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+    --mat-app-background-color: var(--md-sys-color-background);
+
+    // mat variables
+    --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
+    --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
+    --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
+    --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
+    --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
+    --mat-toolbar-title-text-weight: 500; // mat toolbar typography
+    --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant);
+    --mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
+    --mat-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
+    --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
+
+    // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
+    --mdc-icon-button-state-layer-size: 48px;
+
+    // elder custom variables
+    --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
+    --elder-border-light: 1px solid var(--md-sys-color-outline-variant);
+    --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
+    --elder-scrollbar-width: 8px;
+    --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
+
+    // elder pane
+    --elder-pane-padding: #{map.get(config.$sizes, sm)};
+    --elder-pane-gap: #{map.get(config.$sizes, sm)};
+    --elder-pane-border-radius: var(
+      --mdc-outlined-card-container-shape,
+      var(--mat-app-corner-medium)
+    );
+    --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
+
+    // card header
+    --elder-card-header-padding: 15px 15px 5px 15px;
+
+    // cards, table etc bg
+    --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
+    --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
+    //--mat-table-background-color: var(--md-sys-color-surface-container-lowest);
+    --mat-table-background-color: transparent;
+    --mat-paginator-container-background-color: var(--mat-table-background-color);
+    --elder-grid-background-color: var(--mat-table-background-color);
+    //--mat-table-header-container-height: 56px; // 56px is default
+
+    // elder toast messages
+    --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-warn: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-error: var(--md-sys-color-inverse-on-surface);
+
+    // main nav top left button color
+    --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
+    --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
+
+    // custom colors
+    --elder-blue: #{map.get(config.$custom-colors, elder-blue)};
+    --elder-gold: #{map.get(config.$custom-colors, elder-gold)};
+    --elder-gold-dark: #{map.get(config.$custom-colors, elder-gold-dark)};
+    --elder-gold-semi-dark: #{map.get(config.$custom-colors, elder-gold-semi-dark)};
+    --elder-gold-light: #{map.get(config.$custom-colors, elder-gold-light)};
+
+    --elder-color-highlight-strong: hsl(214, 18%, 85%);
+    --elder-color-highlight-variant: hsl(214, 18%, 95%); // dim version lighter in light moode
+    --elder-color-highlight-strong: var(--elder-gold-light);
+    --elder-color-highlight-variant: #EBEBEB;
+
+    // chip colors
+    --elder-chip-color-state-none: #{map.get(config.$chip-colors, state-none)};
+    --elder-chip-color-state-open: #{map.get(config.$chip-colors, state-open)};
+    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors, state-in-progress)};
+    --elder-chip-color-state-completed: #{map.get(config.$chip-colors, state-completed)};
+    --elder-chip-color-state-warn: #{map.get(config.$chip-colors, state-warn)};
+    --elder-chip-color-state-error: #{map.get(config.$chip-colors, state-error)};
+    --elder-chip-color-state-other: #{map.get(config.$chip-colors, state-other)};
+
+    // chip colors dark
+    &.elder-dark-theme {
+      --elder-chip-color-state-none: #{map.get(config.$chip-colors-dark, state-none)};
+      --elder-chip-color-state-open: #{map.get(config.$chip-colors-dark, state-open)};
+      --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors-dark, state-in-progress)};
+      --elder-chip-color-state-completed: #{map.get(config.$chip-colors-dark, state-completed)};
+      --elder-chip-color-state-warn: #{map.get(config.$chip-colors-dark, state-warn)};
+      --elder-chip-color-state-error: #{map.get(config.$chip-colors-dark, state-error)};
+      --elder-chip-color-state-other: #{map.get(config.$chip-colors-dark, state-other)};
+    }
+
+    // missing md3 color
+    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    --md-sys-color-on-tertiary-fixed-dim: var(--md-sys-color-on-primary-fixed-dim);
+
+    // dialog
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container-lowest);
+
+    // data footer
+    --elder-data-element-footer-height: 48px;
+
+    // xy
+    --elder-round-form-field-outline: none;
+  }
+
+  &.elder-dark-theme {
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container);
+  }
+
+  // light theme overwrites
+  &.elder-light-theme {
+    --md-sys-color-primary: var(--elder-blue);
+    --md-sys-color-tertiary: var(--elder-gold);
+    --md-sys-color-tertiary-container: var(--elder-gold-light);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
+    --md-sys-color-secondary-container: #d8e3fa; // hsl(221, 77%, 91%)
+    --md-sys-color-secondary-container: hsl(214, 44%, 84%);
+    --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
+    // --md-sys-color-primary-container: hsl(214, 64%, 84%);
+    --md-sys-color-primary-container: #A6C7ED;
+    --md-sys-color-primary-fixed-dim: #95A6C7;
+  }
+
+  // dark theme overwrites
+  &.elder-dark-theme {
+    --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
+    --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
+    --md-sys-color-primary-container: var(--elder-gold-semi-dark);
+    --md-sys-color-primary-fixed-dim: var(--elder-gold-dark);
+    --elder-color-highlight-variant: var(--elder-gold-dark);
+    --elder-color-highlight-strong: var(--elder-gold-semi-dark);
+    --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
+    --md-sys-color-surface-container-highest: #191919;
+    --md-sys-color-surface-container-lowest: #262626;
+    --md-sys-color-error: #ff999f;
+    --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
+    --md-sys-color-surface-tint: var(--elder-gold-dark);
+    --elder-dark-gray: var(--md-sys-color-surface-container);
+    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
+    --elder-dark-mode-color-primary: var(--md-sys-color-primary);
+    --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
+    --elder-dark-mode-color-surface: var(--md-sys-color-surface);
+    --elder-dark-mode-color-on-surface: var(--md-sys-color-on-surface);
+  }
+}
+
+@mixin elder-badge-sizing() {
+  & {
+    // Use legacy MAT 2 badge sizing
+    --mat-badge-container-size: unset;
+    --mat-badge-small-size-container-size: unset;
+    --mat-badge-large-size-container-size: unset;
+    --mat-badge-legacy-container-size: 22px;
+    --mat-badge-legacy-small-size-container-size: 16px;
+    --mat-badge-legacy-large-size-container-size: 28px;
+    --mat-badge-container-offset: -11px 0;
+    --mat-badge-small-size-container-offset: -8px 0;
+    --mat-badge-large-size-container-offset: -14px 0;
+    --mat-badge-container-overlap-offset: -11px;
+    --mat-badge-small-size-container-overlap-offset: -8px;
+    --mat-badge-large-size-container-overlap-offset: -14px;
+    --mat-badge-container-padding: 0;
+    --mat-badge-small-size-container-padding: 0;
+    --mat-badge-large-size-container-padding: 0;
+    --mat-badge-line-height: var(--mat-badge-legacy-container-size);
+    --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
+    --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
+  }
+}

package/theming/{system/_elder-config.scss → abstracts/_elder-scss-variables.scss}

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $sizes: (
   xs: 4px,
   sm: 8px,
@@ -19,6 +21,44 @@ $media: (
   xl: 1280px,
 );
 
+$custom-colors: (
+  elder-blue: #0b284f,
+  elder-gold: #b69f6a,
+  elder-gold-dark: #423d32,
+  elder-gold-semi-dark: #7f7054,
+  elder-gold-light: #f0e9d8,
+);
+
+$chip-colors: (
+  state-none: #cecfcf,
+  state-open: #e0e1e1,
+  state-in-progress: #bdd5e7,
+  state-completed: #b1ddce,
+  state-warn: #f4dab8,
+  state-error: #e6b6b6,
+  state-other: #cdc7e5,
+);
+
+// $chip-colors: (
+//   state-none: lighten(map.get($chip-colors, state-none), 2%),
+//   state-open: lighten(map.get($chip-colors, state-open), 2%),
+//   state-in-progress: lighten(map.get($chip-colors, state-in-progress), 2%),
+//   state-completed: lighten(map.get($chip-colors, state-completed), 2%),
+//   state-warn: lighten(map.get($chip-colors, state-warn), 2%),
+//   state-error: lighten(map.get($chip-colors, state-error), 2%),
+//   state-other: lighten(map.get($chip-colors, state-other), 2%),
+// );
+
+$chip-colors-dark: (
+  state-none: darken(map.get($chip-colors, state-none), 65%),
+  state-open: darken(map.get($chip-colors, state-open), 45%),
+  state-in-progress: darken(map.get($chip-colors, state-in-progress), 45%),
+  state-completed: darken(map.get($chip-colors, state-completed), 45%),
+  state-warn: darken(map.get($chip-colors, state-warn), 45%),
+  state-error: darken(map.get($chip-colors, state-error), 45%),
+  state-other: darken(map.get($chip-colors, state-other), 45%),
+);
+
 $palettes: (
   primary: (
     0: #000000,

package/theming/{system/_elder-defaults.scss → abstracts/_elder-set-defaults-fn.scss}

@@ -1,18 +1,18 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use './elder-config' as settings;
+@use './elder-scss-variables' as config;
 
 /******************************
 Default values
 *******************************/
-$commonSizesXs: map.get(settings.$sizes, xs);
-$commonSizesSm: map.get(settings.$sizes, sm);
-$commonSizesMd: map.get(settings.$sizes, md);
-$commonSizesLg: map.get(settings.$sizes, lg);
-$commonSizesXl: map.get(settings.$sizes, xl);
-$commonSizesXxl: map.get(settings.$sizes, xxl);
+$commonSizesXs: map.get(config.$sizes, xs);
+$commonSizesSm: map.get(config.$sizes, sm);
+$commonSizesMd: map.get(config.$sizes, md);
+$commonSizesLg: map.get(config.$sizes, lg);
+$commonSizesXl: map.get(config.$sizes, xl);
+$commonSizesXxl: map.get(config.$sizes, xxl);
 
-$densityFormField: map.get(settings.$extra, form-field-density);
+$densityFormField: map.get(config.$extra, form-field-density);
 
 /******************************
 Validates $theme and sets default value if null

package/theming/abstracts/_elder-starter-theme.scss

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@forward '../abstracts/elder-set-defaults-fn';
+@use 'elder-design-tokens' as elder-design-tokens;
+@use '../abstracts/elder-set-defaults-fn' as elder-set-defaults-fn;
+@use '../base/elder-m2-legacy-base' as elder-m2-legacy-base;
+@use '../base/elder-fixes-base' as elder-fixes;
+@use '../base/elder-common-base' as elder-common;
+@use '../base/elder-form-base' as elder-form;
+@use '../base/elder-component-themes' as elder-component-themes;
+@use '../utilities/elder-flex-layout-utils' as elder-flex-layout-utils;
+@use '../utilities/elder-color-utils' as elder-color-utils;
+@use '../utilities/elder-typography-utils' as elder-typography-utils;
+@use '../utilities/elder-common-utils' as elder-common-utils;
+@use '../utilities/elder-layout-utils' as elder-layout-utils;
+
+// Create a theme.
+@mixin starter-theme($theme) {
+  $theme: elder-set-defaults-fn.validate-and-set-defaults($theme);
+
+  // ATM we need to render this here, because first need to set defaults for form-field density
+  @include mat.form-field-density(
+    map.get($theme, elder, density, form-field)
+  ); // TODO: improve density setup
+
+  // design tokens
+  @include elder-design-tokens.elder-design-tokens();
+
+  // base styles
+  @include elder-fixes.elder-fixes-base($theme);
+  @include elder-common.elder-common-base($theme);
+  @include elder-form.elder-form-base($theme);
+  @include elder-m2-legacy-base.elder-m2-legacy-base($theme);
+
+  // utilitiy styles
+  @include elder-flex-layout-utils.elder-flex-layout-utils($theme);
+  @include elder-layout-utils.elder-layout-utils($theme);
+  @include elder-color-utils.elder-color-utils();
+  @include elder-typography-utils.elder-typography-utils();
+  @include elder-common-utils.elder-common-utils();
+
+  // component themes rendered in global css
+  @include elder-component-themes.theme(
+    $theme
+  ); // TODO: Move component themes directly into components
+}

package/theming/abstracts/_elder-theme-main.scss

@@ -0,0 +1,92 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-starter-theme' as starter-theme;
+@use './elder-scss-variables' as config;
+
+@mixin render-default-elder-theme($themes: 'default', $options: ()) {
+  @if $themes == 'default' {
+    $themes: create-themes(config.$palettes); // typically this will be used
+  } @else {
+    $themes: $themes;
+  }
+
+  // map options
+  $use-typography-hierarchy: not map.has-key($options, 'no-typography-hierarchy');
+
+  // create theme
+  $elder-light-theme: map.get($themes, light);
+  $elder-dark-theme: map.get($themes, dark);
+
+  // render theme
+  @include mat.all-component-typographies();
+  @include mat.elevation-classes();
+  @include mat.app-background();
+
+  @if $use-typography-hierarchy {
+    @include mat.typography-hierarchy($elder-light-theme, $back-compat: true);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include mat.all-component-themes($elder-light-theme);
+    @include mat.system-level-colors($elder-light-theme);
+    @include mat.system-level-typography($elder-light-theme);
+    @include mat.color-variants-backwards-compatibility($elder-light-theme);
+  }
+
+  .elder-dark-theme {
+    @include mat.all-component-colors($elder-dark-theme);
+    @include mat.system-level-colors($elder-dark-theme);
+    @include mat.color-variants-backwards-compatibility($elder-dark-theme);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include starter-theme.starter-theme($elder-light-theme);
+  }
+}
+
+@function create-themes($palettesArg) {
+  $_palettes: $palettesArg;
+
+  $_rest: (
+    secondary: map.get($_palettes, secondary),
+    neutral: map.get($_palettes, neutral),
+    neutral-variant: map.get($_palettes, neutral-variant),
+    error: map.get($_palettes, error),
+  );
+  $_primary: map.merge(map.get($_palettes, primary), $_rest);
+  $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+  $density: 0; // ATM important ot start with 0, since we are (miss-)using the tighter -4 density settings only for forms
+
+  $light-theme: _elder-define-theme(light, $_primary, $_tertiary, $density);
+  $dark-theme: _elder-define-theme(dark, $_primary, $_tertiary, $density);
+  $dark-theme-mono: _elder-define-theme(dark, $_tertiary, $_tertiary, $density);
+
+  @return (
+    light: $light-theme,
+    dark: $dark-theme-mono,
+  );
+}
+
+@function _elder-define-theme($theme-type, $primary, $tertiary, $density: 0) {
+  @return mat.define-theme(
+    (
+      color: (
+        theme-type: $theme-type,
+        primary: $primary,
+        tertiary: $tertiary,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+}

package/theming/{style-tweaks/_elder-common.scss → base/_elder-common-base.scss}

@@ -1,22 +1,19 @@
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-common-styles($theme) {
-  $common-sizes: map.get($theme, elder, common-sizes);
-
+@mixin elder-common-base($theme) {
   /***************************************************************************
    *                                                                         *
-   * Common Sizes                                                            *
+   * CSS reset: box-sizing                                                   *
    *                                                                         *
    **************************************************************************/
 
-  $xs: map.get($common-sizes, xs);
-  $sm: map.get($common-sizes, sm);
-  $md: map.get($common-sizes, md);
-  $lg: map.get($common-sizes, lg);
-  $xl: map.get($common-sizes, xl);
-  $xxl: map.get($common-sizes, xxl);
+   *,
+   *::before,
+   *::after {
+     box-sizing: border-box;
+   }
 
   /***************************************************************************
    *                                                                         *

package/theming/{style-tweaks → base}/_elder-component-themes.scss

@@ -1,4 +1,4 @@
-@use '../../src/lib/components/chips/elder-chip-theme' as elder-chip;
+@use '../components/elder-chip-theme' as elder-chip;
 @use '../../src/lib/components/data-view/table/elder-table/elder-table.component' as elder-table;
 @use '../../src/lib/components/navigation/nav/elder-nav-theme' as elder-nav;
 @use '../../src/lib/components/data-view/grid/elder-grid/elder-grid.component' as elder-grid;