@elderbyte/ngx-starter 18.13.0-beta.2 → 18.14.0

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

@@ -3,16 +3,22 @@
 $elder-tile-padding: 8px;
 
 @mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .elder-grid-container {
-    border-radius: var(--elder-border-radius-sm);
+    border-radius: 4px;
+    background-color: mat.m2-get-color-from-palette($background, card);
   }
 
-  mat-card:has(> .elder-grid-container) {
-    background-color: var(--md-sys-color-surface-container-lowest);
+  .elder-grid-browser {
   }
 
   .elder-grid-flat {
-    border: var(--elder-border-light);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
   .elder-grid-toolbar {
@@ -31,11 +37,10 @@ $elder-tile-padding: 8px;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    // background-color: rgba(
-    //   mat.get-theme-color($theme, neutral, 80),
-    //   0.34
-    // ); // default background
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: rgba(
+      mat.m2-get-color-from-palette($background, unselected-chip),
+      0.34
+    ); // default background
     text-align: left;
     transition:
       box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
@@ -43,8 +48,7 @@ $elder-tile-padding: 8px;
   }
 
   .elder-grid-tile:hover {
-    //border-color: rgba(var(--md-sys-color-primary), 0.75);
-    border-color: var(--md-sys-color-primary);
+    border-color: rgba(mat.m2-get-color-from-palette($primary), 0.75);
   }
 
   .elder-grid-tile-content:hover .elder-grid-tile-overlay {
@@ -54,25 +58,28 @@ $elder-tile-padding: 8px;
 
   .elder-grid-tile:active {
     z-index: 100;
-    box-shadow: var(--elder-box-shadow-default);
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 
   .elder-grid-tile-check {
     pointer-events: auto;
     mat-icon {
-      color: var(--md-sys-color-outline-variant);
-      background-color: var(--md-sys-color-surface);
+      color: mat.m2-get-color-from-palette($foreground, divider);
+      background-color: mat.m2-get-color-from-palette($background, card);
       border-radius: 12px;
     }
 
     mat-icon.elder-selected {
-      color: var(--md-sys-color-tertiary);
+      color: mat.m2-get-color-from-palette($accent);
     }
   }
 
   .elder-grid-tile-check:hover {
     mat-icon {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 }
@@ -111,6 +118,9 @@ $elder-tile-padding: 8px;
   top: 0;
   right: 0;
   bottom: 0;
+  -webkit-transition:
+    background-color 0.1s ease-in,
+    opacity 0.1s ease-in;
   transition:
     background-color 0.1s ease-in,
     opacity 0.1s ease-in;

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

@@ -4,11 +4,11 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-  $background: map-get($theme, background-color);
+  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
   .elder-table-row:hover {
-    background-color: var(--md-sys-color-surface-container);
+    background-color: mat.m2-get-color-from-palette($background, hover);
     cursor: pointer;
   }
 
@@ -17,26 +17,27 @@
     box-shadow: none;
     outline-style: none;
     td {
-      background-color: var(--md-sys-color-primary-container); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
-      border-bottom: var(
-        --md-sys-color-tertiary-fixed
-      ); // OLD: border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
+      // border-top: 1px solid mat.get-color-from-palette($accent, default);
+      background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
+      border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
     }
   }
-  .elder-table-row.elder-table-row-activated {
-    //background-color: var(--md-sys-color-surface-dim);
-    background-color: var(--md-sys-color-primary-container);
+
+  .elder-table-row-activated {
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.2);
   }
 
-  .elder-table-row.elder-table-row-selected {
-    background-color: var(--md-sys-color-primary-container);
+  .elder-table-row-selected {
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
   }
 
   .elder-mat-table-flat {
-    border: var(--elder-border-light);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
   .elder-table {
+    // background-color: mat.get-color-from-palette($background, card);
+
     // Fix line height of paginator section
     .mat-mdc-paginator {
       .mat-mdc-form-field,
@@ -132,6 +133,14 @@
   }
 }
 
+.elder-table-scroll {
+  /*
+  scroll-snap-type: y mandatory;
+  scroll-padding-top: 56px;
+ */
+  //height: 100%;
+}
+
 .elder-mat-inner-table {
   width: 100%;
 }
@@ -141,7 +150,7 @@
 }
 
 .elder-mat-table-container {
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: 4px;
   overflow: hidden;
 }
 

package/src/lib/components/errors/exception-detail/elder-exception-detail.component.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@import '../../../../../theming/elder-palettes';
 
 @mixin theme($theme) {
   .mat-mdc-form-field.mat-form-field-appearance-outline {
@@ -10,8 +11,14 @@
         white-space: pre;
         overflow-wrap: normal;
         overflow-x: scroll;
-        background-color: var(--md-sys-color-inverse-surface);
-        color: var(--md-sys-color-inverse-on-surface);
+
+        @if (map-get($theme, is-dark)) {
+          background-color: mat.m2-get-color-from-palette($elder-gold, 700);
+          color: $dark-primary-text;
+        } @else {
+          background-color: #575757;
+          color: #d0b795;
+        }
       }
     }
   }

package/src/lib/components/expand-toggle-button/elder-expand-toggle-button.component.scss

@@ -1,8 +1,14 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .toggle-button:hover {
-    background-color: var(--md-sys-color-ternary-fixed);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.1);
     cursor: pointer;
   }
 }
@@ -12,7 +18,7 @@
   padding-left: 16px;
   padding-right: 16px;
   min-height: 48px;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: 4px;
   overflow: hidden;
-  transition: background-color 0.5s;
+  transition: background 0.5s;
 }

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

@@ -3,8 +3,8 @@
 }
 
 .document-viewer {
-  background-color: var(--md-sys-color-surface-dim);
-  color: var(--md-sys-color-on-surface);
+  background-color: #dedede;
+  color: #1f1e1e;
 }
 
 .video {
@@ -32,13 +32,19 @@
 .document-content {
   font-family: Courier, monospace;
   font-size: 14px;
-  background-color: var(--md-sys-color-inverse-surface);
-  color: var(--md-sys-color-inverse-on-surface);
+  background-color: #575757;
+  color: #cccccc;
   outline: none;
   resize: none;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  -webkit-border-radius: 12px;
   border-radius: 0px;
+  -webkit-box-shadow: 0px 2px 14px #000;
   box-shadow: 0px 2px 14px #000;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;

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

@@ -4,6 +4,10 @@
 $colorStateNone: rgb(0, 0, 0);
 
 @mixin theme($config-or-theme) {
+  $primary: map-get($config-or-theme, primary);
+  $accent: map-get($config-or-theme, accent);
+  $warn: map-get($config-or-theme, warn);
+
   .elder-drop-zone {
     border: 4px dashed rgba($colorStateNone, 0.4);
     -webkit-border-radius: 8px;
@@ -12,28 +16,27 @@ $colorStateNone: rgb(0, 0, 0);
     cursor: pointer;
 
     .elder-drop-zone-icon {
-      color: var(--md-sys-color-primary);
-      //color: mat.m2-get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
       font-size: 28px;
       width: 28px;
       height: 28px;
     }
 
     .elder-drop-zone-prompt {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
     }
   }
 
   .elder-drop-zone.is-dragover {
-    border: 4px solid var(--md-sys-color-tertiary-fixed);
-    background-color: var(--md-sys-color-tertiary);
+    border: 4px solid mat.m2-get-color-from-palette($accent, default, 0.4);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.25);
 
     .elder-drop-zone-icon {
-      color: var(--md-sys-color-tertiary-fixed);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
     .elder-drop-zone-prompt {
-      color: var(--md-sys-color-tertiary-fixed);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
   }
 }

package/src/lib/components/graph/elder-progress-bar/elder-progress-bar.component.scss

@@ -1,3 +1,4 @@
 .elder-progress-content {
   flex: 1 1 100%;
+  box-sizing: border-box;
 }

package/src/lib/components/iframes/iframe-host/iframe-host.component.scss

@@ -1,5 +1,9 @@
 @use '@angular/material' as mat;
 
+@mixin theme($theme) {
+  $primary: map-get($theme, primary);
+}
+
 .iframe {
   margin: 0;
   border: 0;

package/src/lib/components/navigation/bread-crumbs/bread-crumbs/elder-bread-crumbs.component.scss

@@ -1,6 +1,4 @@
 .breadcrumb-bar {
-  padding-top: 4px;
-  padding-bottom: 4px;
 }
 
 .breadcrumb-path {

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -6,38 +6,46 @@
 }
 
 @mixin _group-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .nav-group-button:hover {
-    background-color: var(--md-sys-color-surface-container-high);
-    transition: background-color 0.5s;
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
+    transition: background 0.5s;
   }
 
   .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: var(--md-sys-color-on-surface);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 
   .nav-group-button-active {
-    background-color: var(--md-sys-color-primary-fixed);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
   }
 
   .nav-group-button-open {
     padding-left: 11px !important; // -5 to counter border-left
     .mat-icon {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 }
 
 @mixin _link-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .nav-link.nav-link-clickable {
     cursor: pointer;
     &:hover {
-      background-color: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-      .mat-icon {
-        color: var(--md-sys-color-on-surface);
-      }
+      background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
     }
   }
 
@@ -46,21 +54,21 @@
   }
 
   .nav-link:hover {
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
   }
 
   .nav-link.nav-link-active {
-    background-color: var(--md-sys-color-surface-container-highest);
-    color: var(--md-sys-color-on-surface-container);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    color: mat.m2-get-color-from-palette($primary);
     .mat-icon {
-      color: var(--md-sys-color-on-teriary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: var(--md-sys-color-on-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
     .mat-icon {
-      color: var(--md-sys-color-on-surface);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 }

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss

@@ -13,7 +13,7 @@
   min-height: 48px;
   font-size: 16px;
   font-weight: 400;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: 4px;
   cursor: pointer;
 }
 

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss

@@ -5,13 +5,13 @@
   padding-left: 16px;
   padding-right: 16px;
   min-height: 48px;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: 4px;
   overflow: hidden;
-  transition: background-color 0.5s;
+  transition: background 0.5s;
 
   .mat-icon {
-    height: 32px;
-    width: 32px;
+    height: 24px;
+    width: 24px;
     font-size: 24px;
     padding: 4px;
   }

package/src/lib/components/page/exit-guard/page-exit-lock-indicator/page-exit-lock-indicator.component.scss

@@ -1,7 +1,10 @@
 .panel {
   width: 250px;
   height: 250px;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: 4px;
   overflow: hidden;
-  box-shadow: var(--elder-box-shadow-default);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }

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

@@ -1,12 +1,21 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .elder-card-panel {
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, 'card');
 
     padding: 10px;
-    border-radius: var(--elder-border-radius-sm);
-    box-shadow: var(--elder-box-shadow-default);
+    border-radius: 4px;
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }

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

@@ -1,13 +1,21 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .elder-dialog-panel {
-    // Use CSS variables for Material 3
-    background-color: var(--md-sys-color-surface-container-lowest);
-    color: var(--md-sys-color-on-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, dialog);
 
     padding: 10px;
-    border-radius: var(--elder-border-radius-sm);
-    box-shadow: var(--elder-box-shadow-default);
+    border-radius: 4px;
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }

package/src/lib/components/panels/flat/_elder-panel-theme.scss

@@ -1,6 +1,12 @@
 @use '@angular/material' as mat;
 
+@mixin _elder-panel-color($palette) {
+  background: mat.m2-get-color-from-palette($palette);
+  color: mat.m2-get-color-from-palette($palette, default-contrast);
+}
+
 @mixin _elder-panel-form-field-overrides {
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-underline,
   .mat-form-field-ripple,
   .mat-focused .mat-form-field-ripple {
@@ -21,20 +27,30 @@
 }
 
 @mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .mat-panel {
-    background: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-    transition: background-color 0.5s;
+    background: mat.m2-get-color-from-palette($background, app-bar);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    transition: background 0.5s;
+
+    &.mat-primary {
+      @include _elder-panel-color($primary);
+    }
+
+    &.mat-accent {
+      @include _elder-panel-color($accent);
+    }
 
-    &.mat-primary,
-    &.mat-accent,
     &.mat-warn {
-      background: var(--md-sys-color-primary);
-      color: var(--md-sys-color-on-primary);
+      @include _elder-panel-color($warn);
     }
 
     @include _elder-panel-form-field-overrides;
-    @include elder-panel-typography($theme);
   }
 }
 
@@ -46,7 +62,7 @@
   .mat-panel h4,
   .mat-panel h5,
   .mat-panel h6 {
-    font-family: var(--mdc-typography-font-family);
+    @include mat.m2-typography-level($config, title);
     margin: 0;
   }
 }

package/src/lib/components/select/_elder-select-base.scss

@@ -1,9 +1,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../../../theming/mat-icon-button-size' as icon-button-size;
 
 @mixin typography($typography-config) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+  $config: $typography-config; // TODO $typography-config
+  // The unit-less line-height from the font config.
+  $line-height: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   $icon-size: 16px;
   $arrow-icon-size: 24px;
@@ -27,3 +32,6 @@
     font-size: $icon-size !important;
   }
 }
+
+@mixin color($color-config) {
+}

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -78,8 +78,12 @@
 }
 
 .cdk-drag-preview {
-  // border-radius: var(--elder-border-radius-sm);
-  box-shadow: var(--elder-box-shadow-default);
+  box-sizing: border-box;
+  // border-radius: 4px;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {