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

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

@@ -1,14 +1,89 @@
 @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);
+}
+
+@mixin theme($theme) {
+  & {
+    --mat-paginator-container-background-color: var(--md-sys-color-surface-container-low);
+  }
+
+  .elder-mat-inner-table {
+    width: 100%;
+  }
+
+  .elder-table-row.dense {
+    height: 42px !important;
+  }
+
+  .elder-mat-table-container {
+    border-radius: var(--elder-border-radius-sm);
+    overflow: hidden;
+  }
+
+  /**
+ * Style for the select column
+ */
+  .mat-column-select {
+    overflow: initial;
+    min-width: 72px;
+    max-width: 5%;
+    width: 72px;
+  }
+
+  .elder-row-removing {
+    text-decoration: line-through;
+  }
+
+  .elder-row-hidden {
+    display: none;
+  }
+
+  /******************************
+  Clickable row
+  *******************************/
+
+  .elder-table-row {
+    cursor: pointer;
+  }
+
+  /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
+  // firefox-scroll-fix
+  :host {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .elder-table-hint {
+    color: gray;
+  }
+
+  .elder-table-footer {
+    height: 44px;
+  }
+
+  .elder-table-checkbox {
+    opacity: 0.25;
+
+    -webkit-transition: opacity 0.5s ease-in-out;
+    -moz-transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .elder-table-row:hover .elder-table-checkbox {
+    opacity: 0.9;
+  }
+
+  .elder-table-checkbox-visible {
+    opacity: 1;
+  }
+
+  .elder-table-inner {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
 
   .elder-table-row:hover {
-    background-color: mat.m2-get-color-from-palette($background, hover);
+    background-color: var(--md-sys-color-surface-container);
     cursor: pointer;
   }
 
@@ -17,26 +92,29 @@
     box-shadow: none;
     outline-style: none;
     td {
-      // 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);
+      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);
     }
   }
-
-  .elder-table-row-activated {
-    background-color: mat.m2-get-color-from-palette($accent, default, 0.2);
+  .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-selected {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
+  .elder-table-row.elder-table-row-selected {
+    background-color: var(--md-sys-color-primary-container);
   }
 
   .elder-mat-table-flat {
-    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+    border: var(--elder-border-light);
   }
 
   .elder-table {
-    // background-color: mat.get-color-from-palette($background, card);
+    background-color: var(--mat-table-background-color);
 
     // Fix line height of paginator section
     .mat-mdc-paginator {
@@ -131,82 +209,12 @@
       }
     }
   }
-}
-
-.elder-table-scroll {
-  /*
-  scroll-snap-type: y mandatory;
-  scroll-padding-top: 56px;
- */
-  //height: 100%;
-}
-
-.elder-mat-inner-table {
-  width: 100%;
-}
-
-.elder-table-row.dense {
-  height: 42px !important;
-}
-
-.elder-mat-table-container {
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-/**
- * Style for the select column
- */
-.mat-column-select {
-  overflow: initial;
-  min-width: 72px;
-  max-width: 5%;
-  width: 72px;
-}
-
-.elder-row-removing {
-  text-decoration: line-through;
-}
 
-.elder-row-hidden {
-  display: none;
-}
-
-/******************************
-Clickable row
-*******************************/
-
-.elder-table-row {
-  cursor: pointer;
-}
-
-/** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
-// firefox-scroll-fix
-:host {
-  min-width: 0;
-  min-height: 0;
-}
-
-.elder-table-hint {
-  color: gray;
-}
-
-.elder-table-footer {
-  height: 44px;
-}
-
-.elder-table-checkbox {
-  opacity: 0.25;
-
-  -webkit-transition: opacity 0.5s ease-in-out;
-  -moz-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.elder-table-row:hover .elder-table-checkbox {
-  opacity: 0.9;
-}
+  .mat-mdc-row {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
 
-.elder-table-checkbox-visible {
-  opacity: 1;
+  .mat-mdc-header-row {
+    background: var(--md-sys-color-surface-container-lowest) !important;
+  }
 }

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

@@ -1,24 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .mat-mdc-form-field.mat-form-field-appearance-outline {
-    .mat-mdc-form-field-textarea-control {
-      &.stacktrace {
-        font-size: 11px;
-        font-family: monospace;
-        line-height: normal;
-        white-space: pre;
-        overflow-wrap: normal;
-        overflow-x: scroll;
-
-        @if (map-get($theme, is-dark)) {
-          background-color: #948156;
-          color: rgba(black, 0.87);
-        } @else {
-          background-color: #575757;
-          color: #d0b795;
-        }
-      }
-    }
-  }
-}

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

@@ -1,24 +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: mat.m2-get-color-from-palette($accent, default, 0.1);
-    cursor: pointer;
-  }
-}
-
 .toggle-button {
   text-decoration: none;
   padding-left: 16px;
   padding-right: 16px;
   min-height: 48px;
-  border-radius: 4px;
+  border-radius: var(--elder-border-radius-sm);
   overflow: hidden;
-  transition: background 0.5s;
+  transition: background-color 0.5s;
+}
+
+.toggle-button:hover {
+  background-color: var(--md-sys-color-ternary-fixed);
+  cursor: pointer;
 }

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

@@ -3,8 +3,8 @@
 }
 
 .document-viewer {
-  background-color: #dedede;
-  color: #1f1e1e;
+  background-color: var(--md-sys-color-surface-dim);
+  color: var(--md-sys-color-on-surface);
 }
 
 .video {
@@ -32,19 +32,13 @@
 .document-content {
   font-family: Courier, monospace;
   font-size: 14px;
-  background-color: #575757;
-  color: #cccccc;
+  background-color: var(--md-sys-color-surface-container);
+  color: var(--md-sys-color-on-surface);
   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

@@ -1,42 +1,31 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-$colorStateNone: rgb(0, 0, 0);
+.elder-drop-zone {
+  border: 4px dashed rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
 
-@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-icon {
+  color: var(--md-sys-color-primary);
+  font-size: 28px;
+  width: 28px;
+  height: 28px;
+}
 
-  .elder-drop-zone {
-    border: 4px dashed rgba($colorStateNone, 0.4);
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background-color: rgba($colorStateNone, 0.25);
-    cursor: pointer;
+.elder-drop-zone-prompt {
+  color: var(--md-sys-color-primary);
+}
 
-    .elder-drop-zone-icon {
-      color: mat.m2-get-color-from-palette($primary, default, 0.75);
-      font-size: 28px;
-      width: 28px;
-      height: 28px;
-    }
+.elder-drop-zone.is-dragover {
+  border: 4px solid var(--md-sys-color-tertiary-fixed);
+  background-color: var(--md-sys-color-tertiary);
 
-    .elder-drop-zone-prompt {
-      color: mat.m2-get-color-from-palette($primary, default, 0.75);
-    }
+  .elder-drop-zone-icon {
+    color: var(--md-sys-color-tertiary-fixed);
   }
 
-  .elder-drop-zone.is-dragover {
-    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: mat.m2-get-color-from-palette($accent, default, 0.75);
-    }
-
-    .elder-drop-zone-prompt {
-      color: mat.m2-get-color-from-palette($accent, default, 0.75);
-    }
+  .elder-drop-zone-prompt {
+    color: var(--md-sys-color-tertiary-fixed);
   }
 }

package/src/lib/components/forms/search/search-box/elder-search-box.component.scss

@@ -1,8 +1,3 @@
-.elder-search-box-field {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
 .elder-search-panel-container {
   min-width: 250px;
 }

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

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

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

@@ -1,9 +1,3 @@
-@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,4 +1,6 @@
 .breadcrumb-bar {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
 .breadcrumb-path {

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

@@ -6,46 +6,38 @@
 }
 
 @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: mat.m2-get-color-from-palette($primary, default, 0.1);
-    transition: background 0.5s;
+    background-color: var(--md-sys-color-surface-container-high);
+    transition: background-color 0.5s;
   }
 
   .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: mat.m2-get-color-from-palette($foreground, secondary-text);
+      color: var(--md-sys-color-on-surface);
     }
   }
 
   .nav-group-button-active {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    background-color: var(--md-sys-color-primary-fixed);
   }
 
   .nav-group-button-open {
     padding-left: 11px !important; // -5 to counter border-left
     .mat-icon {
-      color: mat.m2-get-color-from-palette($primary);
+      color: var(--md-sys-color-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: mat.m2-get-color-from-palette($primary, default, 0.1);
+      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);
+      }
     }
   }
 
@@ -54,21 +46,21 @@
   }
 
   .nav-link:hover {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
+    background-color: var(--md-sys-color-surface-container-low);
   }
 
   .nav-link.nav-link-active {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
-    color: mat.m2-get-color-from-palette($primary);
+    background-color: var(--md-sys-color-surface-container-highest);
+    color: var(--md-sys-color-on-surface-container);
     .mat-icon {
-      color: mat.m2-get-color-from-palette($primary);
+      color: var(--md-sys-color-on-teriary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: mat.m2-get-color-from-palette($foreground, text);
+    color: var(--md-sys-color-on-surface);
     .mat-icon {
-      color: mat.m2-get-color-from-palette($foreground, secondary-text);
+      color: var(--md-sys-color-on-surface);
     }
   }
 }

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: 4px;
+  border-radius: var(--elder-border-radius-sm);
   cursor: pointer;
 }
 

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

@@ -1,17 +1,15 @@
-@use '@angular/material' as mat;
-
 .nav-link {
   text-decoration: none;
   padding-left: 16px;
   padding-right: 16px;
   min-height: 48px;
-  border-radius: 4px;
+  border-radius: var(--elder-border-radius-sm);
   overflow: hidden;
-  transition: background 0.5s;
+  transition: background-color 0.5s;
 
   .mat-icon {
-    height: 24px;
-    width: 24px;
+    height: 32px;
+    width: 32px;
     font-size: 24px;
     padding: 4px;
   }

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

@@ -1,10 +1,7 @@
 .panel {
   width: 250px;
   height: 250px;
-  border-radius: 4px;
+  border-radius: var(--elder-border-radius-sm);
   overflow: hidden;
-  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);
+  box-shadow: var(--elder-box-shadow-default);
 }

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

@@ -1,21 +1,8 @@
-@use '@angular/material' as mat;
+.elder-card-panel {
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface);
 
-@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: mat.m2-get-color-from-palette($foreground, text);
-    background-color: mat.m2-get-color-from-palette($background, 'card');
-
-    padding: 10px;
-    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);
-  }
+  padding: 10px;
+  border-radius: var(--elder-border-radius-sm);
+  box-shadow: var(--elder-box-shadow-default);
 }

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

@@ -1,21 +1,8 @@
-@use '@angular/material' as mat;
+.elder-dialog-panel {
+  background-color: var(--md-sys-color-surface-container-lowest);
+  color: var(--md-sys-color-on-surface);
 
-@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 {
-    color: mat.m2-get-color-from-palette($foreground, text);
-    background-color: mat.m2-get-color-from-palette($background, dialog);
-
-    padding: 10px;
-    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);
-  }
+  padding: 10px;
+  border-radius: var(--elder-border-radius-sm);
+  box-shadow: var(--elder-box-shadow-default);
 }

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

@@ -1,14 +1,8 @@
 @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) {
-  $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);
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
 
   $icon-size: 16px;
   $arrow-icon-size: 24px;
@@ -32,6 +26,3 @@
     font-size: $icon-size !important;
   }
 }
-
-@mixin color($color-config) {
-}