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

package/theming/style-tweaks/_elder-style-fixes.scss

@@ -0,0 +1,377 @@
+@use '@angular/material' as mat;
+@use './elder-style-tweak-mixins' as mixins;
+@use 'sass:map';
+
+@mixin elder-style-fixes($theme) {
+  @include _ng-style-fixes;
+  @include _mat-style-fixes($theme);
+  @include _mat3-fixes($theme);
+
+  // elder custom icons fill color
+  .mat-icon.svg-icon-inherit-color svg * {
+    fill: currentColor !important;
+  }
+}
+
+@mixin _ng-style-fixes {
+  // Trick to ensure flex functionality within router-outlet
+  router-outlet.router-flex + * {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    height: 100%; // Required for Safari
+    width: 100%;
+    min-height: 0; // Fixes scrolling vert
+    min-width: 0; // Fixes scrolling horz
+  }
+}
+
+@mixin _mat-style-fixes($theme) {
+  // Globally disable automatic scrolling of Material Drawer Container
+  .mat-drawer-inner-container {
+    overflow: hidden !important;
+  }
+
+  // Globally disable automatic scrolling of Material Drawer Content
+  .mat-drawer-content {
+    overflow: hidden !important;
+  }
+
+  /******************************
+  Material tab fix
+  *******************************/
+
+  .mat-mdc-tab-body-wrapper {
+    flex: 1 1 100% !important;
+    height: 100% !important;
+  }
+
+  .mat-mdc-tab-body {
+    display: flex !important;
+    flex-direction: column;
+  }
+
+  /******************************
+  Material Chip fix
+  *******************************/
+
+  .mat-mdc-chip {
+    // Fixes default avatar on attribute usage (<mat-chip-avatar> vs matChipAvatar) which is broken in Angular Material 15.0.0
+    mat-chip-avatar {
+      .mat-icon {
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        font-size: 18px;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+        overflow: hidden;
+        border-radius: 9px;
+      }
+    }
+  }
+
+  /******************************
+    Material Badge Index
+    *******************************/
+
+  .mat-badge-content {
+    z-index: 1;
+  }
+
+  /******************************
+  Material chip make regular chips clickable when applying this class
+  *******************************/
+
+  .clickable-chip {
+    .mat-mdc-chip-action {
+      cursor: pointer;
+    }
+  }
+
+  /******************************
+    Styling toast messages
+    *******************************/
+  .elder-primary-text {
+    color: var(--md-sys-color-primary);
+  }
+
+  .elder-accent-text {
+    color: var(--md-sys-color-tertiary);
+  }
+
+  .elder-warn-text {
+    color: var(--md-sys-color-error);
+  }
+}
+
+@mixin _mat3-fixes($theme) {
+  // remove weird box shadow of card in overlay (Problem: Cards shouldn't be in overlay)
+  .mat-mdc-dialog-container .mat-mdc-card {
+    box-shadow: none;
+  }
+  // fix elder badge borders
+  elder-badge {
+    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
+      border: none;
+    }
+  }
+
+  .mat-app-background {
+    display: block;
+  }
+
+  .mat-mdc-tab-group {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  .legacy-layout-card {
+    background-color: var(--mdc-elevated-card-container-color);
+    //border: var(--elder-border-light);
+    border-radius: var(--elder-border-radius-sm);
+    box-shadow: var(--mdc-elevated-card-container-elevation);
+    overflow: hidden; // this might cause issues, but is probably correct..
+  }
+
+  .elder-card-title {
+    padding-bottom: 0 !important;
+    margin-bottom: 6px !important;
+  }
+
+  // remove extra background from drawer
+  .mat-drawer-container {
+    background-color: transparent !important;
+  }
+
+  // app header bg color
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    .mat-toolbar {
+      &.mat-primary {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-primary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-primary);
+        }
+      }
+      &.mat-accent {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-tertiary);
+        }
+      }
+    }
+
+    .mat-toolbar.elder-toolbar-main-nav-button-container {
+      &.mat-primary,
+      &.mat-accent {
+        background-color: var(--elder-toolbar-main-nav-button-container-bg-color);
+
+        .mat-mdc-icon-button {
+          color: var(--elder-toolbar-main-nav-button-color);
+        }
+      }
+    }
+  }
+
+  &.elder-dark-theme {
+    .mat-toolbar.mat-primary,
+    .mat-toolbar.mat-accent {
+      background-color: var(--elder-dark-gray) !important;
+      * {
+        color: var(--md-sys-color-on-surface) !important;
+      }
+      .elder-toolbar-main-nav-button .mat-icon {
+        color: var(--md-sys-color-primary) !important;
+      }
+    }
+
+    elder-app-header .elder-panel {
+      color: var(--md-sys-color-on-surface) !important;
+    }
+  }
+
+  /**************************************************************************
+    * Start cloudfiles import 1
+    *************************************************************************/
+
+  .mat-mdc-tab-group {
+    background-color: transparent !important;
+  }
+
+  elder-data-toolbar {
+    display: block;
+  }
+
+  /**************************************************************************
+    * End cloudfiles import 1
+    *************************************************************************/
+
+  // Button colors
+  .mat-accent.mat-mdc-button-base {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  // slide toggle colors
+  .mat-accent.mat-mdc-slide-toggle {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  // badge positioning
+  .mat-badge-above .mat-badge-content {
+    bottom: 82%;
+  }
+
+  // bring back the badge warn color that was removed in m3
+  .mat-badge-warn {
+    --mat-badge-background-color: var(--md-sys-color-error);
+  }
+
+  & {
+    // fix button paddings to keep spacing
+    --elder-button-horizontal-padding: 19px;
+    --mat-protected-button-horizontal-padding: var(--elder-button-horizontal-padding);
+    --mat-outlined-button-horizontal-padding: var(--elder-button-horizontal-padding);
+    --mat-filled-button-horizontal-padding: var(--elder-button-horizontal-padding);
+
+    // mat toolbar title-text line height
+    --mat-toolbar-title-text-line-height: 36px;
+  }
+
+  // Sekundärfarbe anstatt Tertiärfarbe, da es wenig Sinn macht, auf dieses Element viel Aufmerksamkeit zu lenken
+  .elder-light-theme,
+  .elder-dark-theme {
+    &.mat-accent.mat-icon {
+      --mat-icon-color: var(--md-sys-color-secondary);
+    }
+  }
+
+  .elder-pane-grid {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    padding: var(--elder-pane-padding);
+    gap: var(--elder-pane-gap);
+    height: 100%;
+    align-items: stretch;
+  }
+
+  .elder-pane {
+    border-radius: var(--elder-pane-border-radius, var(--mat-app-corner-medium));
+    overflow: hidden;
+    background-color: var(--elder-pane-bg-color);
+  }
+
+  // scrollbar styling
+  ::-webkit-scrollbar {
+    width: var(--elder-scrollbar-width);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-outline-variant);
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--md-sys-color-outline);
+  }
+
+  // fix
+  .elder-pane .legacy-layout-card {
+    border-radius: 0 !important;
+  }
+
+  .mat-mdc-card,
+  .mat-mdc-card-outlined {
+    // set normal mat-cards back to m2 border-radius
+    border-radius: var(--elder-border-radius-sm);
+  }
+
+  // round input fields
+  &.deactivated {
+    elder-search-box .elder-search-box-field,
+    .mat-toolbar .mat-mdc-form-field {
+      background-color: var(--md-sys-color-surface-container-low);
+      border-radius: 24px !important;
+
+      // remove border from notch piece on input fields
+      .mat-mdc-notch-piece {
+        border-width: 0 !important;
+      }
+    }
+  }
+
+  .mat-toolbar .mat-mdc-form-field {
+    background-color: var(--elder-lightened-transparent-bg);
+    &,
+    *,
+    .mat-icon {
+      color: var(--md-sys-color-inverse-on-surface);
+      --mdc-outlined-text-field-input-text-color: var(--md-sys-color-inverse-on-surface) !important;
+      --mdc-outlined-text-field-caret-color: var(--md-sys-color-inverse-on-surface) !important;
+    }
+    // * {
+    //   color: var(--md-sys-color-inverse-on-surface);
+    //   border-color: var(--md-sys-color-inverse-on-surface);
+    // }
+  }
+
+  .elder-pane {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
+
+  &.elder-dark-theme {
+    // brighter dark mode nav
+    .elder-nav-list-full {
+      background-color: var(--md-sys-color-surface-container-lowest) !important;
+    }
+    .nav-link-active {
+      color: var(--md-sys-color-primary) !important;
+    }
+  }
+
+  /**************************************************************************
+    Elder panel
+  **************************************************************************/
+  .elder-panel {
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    transition: background-color 0.5s;
+
+    &.mat-primary,
+    &.mat-accent,
+    &.mat-warn {
+      background: var(--elder-dark-mode-color-surface, var(--md-sys-color-primary));
+      color: var(--elder-dark-mode-color-on-surface, var(--md-sys-color-on-primary));
+    }
+
+    // form field overrides
+    .mat-form-field-underline,
+    .mat-form-field-ripple,
+    .mat-focused .mat-form-field-ripple {
+      background-color: currentColor;
+    }
+
+    .mat-mdc-form-field-label,
+    .mat-focused .mat-form-field-label,
+    .mat-select-value,
+    .mat-select-arrow,
+    .mat-form-field.mat-focused .mat-select-arrow {
+      color: inherit;
+    }
+
+    .mat-mdc-input-element {
+      caret-color: currentColor;
+    }
+  }
+}

package/theming/{_mixins.scss → style-tweaks/_elder-style-tweak-mixins.scss}

@@ -17,7 +17,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
   }
 
   .mat-mdc-form-field-icon-prefix > .mat-mdc-icon-button,
@@ -50,3 +49,38 @@
     @return 40px;
   }
 }
+
+/**
+ * Based on https://github.com/btxtiger/mat-icon-button-sizes
+ * The default factor between button and icon size is *= 0.6
+ */
+@mixin matIconButtonSize($buttonSize, $iconSize) {
+  width: $buttonSize !important;
+  height: $buttonSize !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+
+  .mat-icon,
+  img {
+    width: $iconSize;
+    height: $iconSize;
+    font-size: $iconSize;
+
+    svg {
+      width: $iconSize;
+      height: $iconSize;
+    }
+  }
+
+  svg {
+    width: $iconSize;
+    height: $iconSize;
+  }
+
+  .mat-mdc-button-touch-target {
+    width: $buttonSize !important;
+    height: $buttonSize !important;
+  }
+}

package/theming/system/_elder-config.scss

@@ -0,0 +1,141 @@
+$sizes: (
+  xs: 4px,
+  sm: 8px,
+  md: 12px,
+  lg: 16px,
+  xl: 24px,
+  xxl: 32px,
+);
+
+$extra: (
+  form-field-density: -4,
+);
+
+$media: (
+  xs: 0px,
+  sm: 600px,
+  md: 960px,
+  lg: 1024px,
+  xl: 1280px,
+);
+
+$palettes: (
+  primary: (
+    0: #000000,
+    10: #001b3c,
+    20: #0d315b,
+    25: #1b3c67,
+    30: #284773,
+    35: #35537f,
+    40: #425f8c,
+    50: #5b78a6,
+    60: #7592c2,
+    70: #8facde,
+    80: #aac8fb,
+    90: #d5e3ff,
+    95: #ebf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #111c2c,
+    20: #263142,
+    25: #313c4e,
+    30: #3d4759,
+    35: #485366,
+    40: #545f72,
+    50: #6d778c,
+    60: #8691a6,
+    70: #a1acc1,
+    80: #bcc7dd,
+    90: #d8e3fa,
+    95: #ebf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #251a00,
+    20: #3f2e00,
+    25: #4c3903,
+    30: #58440e,
+    35: #654f19,
+    40: #725b24,
+    50: #8d743a,
+    60: #a88d51,
+    70: #c4a869,
+    80: #e1c381,
+    90: #ffdf9b,
+    95: #ffefd3,
+    98: #fff8f2,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1a1c1f,
+    20: #2f3034,
+    25: #3a3b3f,
+    30: #46474a,
+    35: #515256,
+    40: #5d5e62,
+    50: #76777b,
+    60: #909094,
+    70: #ababaf,
+    80: #c6c6ca,
+    90: #e3e2e6,
+    95: #f1f0f4,
+    98: #faf9fd,
+    99: #fdfbff,
+    100: #ffffff,
+    4: #0d0e11,
+    6: #121316,
+    12: #1e2023,
+    17: #292a2d,
+    22: #343538,
+    24: #38393c,
+    87: #dad9de,
+    92: #e8e7ec,
+    94: #eeedf1,
+    96: #f4f3f7,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181c23,
+    20: #2d3038,
+    25: #383b43,
+    30: #43474f,
+    35: #4f525a,
+    40: #5b5e67,
+    50: #747780,
+    60: #8d9199,
+    70: #a8abb4,
+    80: #c4c6d0,
+    90: #e0e2ec,
+    95: #eef0fa,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);

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

@@ -1,18 +1,18 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-config' as settings;
 
 /******************************
 Default values
 *******************************/
-$commonSizesXs: 4px;
-$commonSizesSm: 8px;
-$commonSizesMd: 12px;
-$commonSizesLg: 16px;
-$commonSizesXl: 24px;
-$commonSizesXxl: 32px;
+$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);
 
-$densityFormField: 0;
-
-$scrollbarStyling: false;
+$densityFormField: map.get(settings.$extra, form-field-density);
 
 /******************************
 Validates $theme and sets default value if null
@@ -30,7 +30,6 @@ Validates $theme and sets default value if null
     density: (
       form-field: get-or-default($theme, $densityFormField, density, form-field),
     ),
-    scrollbar-styling: get-or-default($theme, $scrollbarStyling, scrollbar-styling),
   );
 
   @return map.set($theme, elder, $elderMap);
@@ -43,7 +42,3 @@ Validates $theme and sets default value if null
     @return $defaultValue;
   }
 }
-
-@function get-default-input() {
-  @return ();
-}

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

@@ -0,0 +1,90 @@
+@mixin elder-design-tokens() {
+  @include elder-badge-sizing();
+
+  // bg color
+  --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+
+  // 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);
+
+  // 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: 8px;
+  --elder-pane-gap: calc(var(--elder-pane-padding) * 2);
+  --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 white 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-paginator-container-background-color: var(--mat-table-background-color);
+
+  // 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);
+
+  // dark theme overwrites
+  &.elder-dark-theme {
+    --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
+    --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;
+    --elder-dark-gray: var(--md-sys-color-surface-container);
+    --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
+    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
+
+    // dark mode specific colors
+    --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);
+}