@elderbyte/ngx-starter 19.1.0-beta.3 → 19.1.0-beta.30

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

@@ -0,0 +1,49 @@
+@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-fixes-base' as elder-fixes;
+@use '../base/elder-common-base' as elder-common;
+@use '../base/elder-form-base' as elder-form;
+@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;
+@use '../components/elder-chip-theme' as elder-chip;
+@use '../components/elder-select-theme' as elder-select;
+@use '../components/elder-toolbar-theme' as elder-toolbar;
+@use '../components/elder-table-theme' as elder-table;
+
+// 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);
+
+  // 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 scope
+  @include elder-chip.theme($theme);
+  @include elder-select.theme($theme);
+  @include elder-toolbar.theme($theme);
+  @include elder-table.theme($theme);
+}

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

@@ -0,0 +1,96 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-starter-theme' as starter-theme;
+@use './elder-scss-variables' as config;
+@use '../base/elder-root-base' as elder-root-base;
+
+@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 elder root styles above theme scope
+  @include elder-root-base.elder-root-base($elder-light-theme);
+
+  // 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,
+  );
+}
+
+@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,23 +1,8 @@
-@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);
-
-  /***************************************************************************
-   *                                                                         *
-   * Common Sizes                                                            *
-   *                                                                         *
-   **************************************************************************/
-
-  $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);
-
+@mixin elder-common-base($theme) {
   /***************************************************************************
    *                                                                         *
    * Angular Material Extensions (Optional)                                  *
@@ -120,6 +105,24 @@
     padding: 0;
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Material CDK Drag                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  .cdk-drag-preview {
+    box-shadow: var(--mat-app-elevation-shadow-level-20) !important;
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
   /***************************************************************************
    *                                                                         *
    * Padding                                                                 *
@@ -148,32 +151,4 @@
   .elder-icon-button-xs {
     @include mixins.matIconButtonSize(20px, 12px);
   }
-
-  .mat-mdc-chip {
-    .mat-mdc-chip-avatar {
-      /**
-       * Maximizes the avatar icon / image size in a chip.
-       */
-      &.chip-avatar-xl {
-        width: 28px;
-        height: 28px;
-        margin-left: -4px;
-        margin-right: -4px;
-
-        img {
-          width: 28px;
-          height: 28px;
-          overflow: hidden;
-          border-radius: 14px;
-        }
-
-        .mat-icon {
-          width: 28px !important;
-          height: 28px !important;
-          line-height: 28px !important;
-          font-size: 28px !important;
-        }
-      }
-    }
-  }
 }

package/theming/base/_elder-fixes-base.scss

@@ -0,0 +1,199 @@
+@use '@angular/material' as mat;
+@use './elder-base-mixins' as mixins;
+@use 'sass:map';
+
+@mixin elder-fixes-base($theme) {// 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);
+  }
+
+  .mat-app-background {
+    display: block;
+  }
+
+  // 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
+  }
+
+  // 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 Badge Index
+    *******************************/
+
+  .mat-badge-content {
+    z-index: 1;
+  }
+  // fix elder badge borders
+  elder-badge {
+    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
+      border: none;
+    }
+  }
+
+  .mat-mdc-tab-group {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  // remove extra background from drawer
+  .mat-drawer-container {
+    background-color: transparent !important;
+  }
+
+  // elder custom icons fill color
+  .mat-icon.svg-icon-inherit-color svg * {
+    fill: currentColor !important;
+  }
+
+  /******************************
+  ETC
+  *******************************/
+
+  .mat-mdc-tab-group {
+    background-color: transparent !important;
+  }
+
+  // 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);
+  }
+
+  /**************************************************************************
+    Card fixes
+  **************************************************************************/
+  .mat-mdc-card,
+  .mat-mdc-card-outlined {
+    // set normal mat-cards back to m2 border-radius
+    border-radius: var(--elder-border-radius-sm);
+  }
+
+  // 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;
+  }
+
+  .elder-card-title {
+    padding-bottom: 0 !important;
+    margin-bottom: 6px !important;
+  }
+
+  /**************************************************************************
+    Elder panel legacy class
+  **************************************************************************/
+  .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;
+    }
+  }
+
+  /**************************************************************************
+    Color overrides
+  **************************************************************************/
+
+  // Prefer secondary color for "accent"
+  .elder-light-theme,
+  .elder-dark-theme {
+    &.mat-accent.mat-icon {
+      --mat-icon-color: var(--md-sys-color-secondary);
+    }
+  }
+
+  &.elder-light-theme .mdc-linear-progress__buffer-bar {
+    --mdc-linear-progress-track-color: #f3f3f3;
+  }
+
+  &.elder-light-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
+    --mdc-linear-progress-track-color: var(--md-sys-color-tertiary-container);
+  }
+  &.elder-dark-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
+    --mdc-linear-progress-track-color: var(--md-sys-color-tertiary-container);
+  }
+
+  /* Fix: Use secondary color on accent buttons and slide toggles.
+  This fix is atm needed since we overwrite tertiary color. Maybe find better solution.. */
+
+  // 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);
+  }
+}

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

@@ -1,8 +1,8 @@
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-form-styles($theme) {
+@mixin elder-form-base($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
   $form-field-density: map.get($theme, elder, density, form-field);
 
@@ -327,18 +327,33 @@
     border-radius: 24px;
     background-color: var(--md-sys-color-surface-container);
     cursor: text;
+    outline: var(--elder-round-form-field-outline);
 
     .mdc-notched-outline .mat-mdc-notch-piece {
       border: none !important;
     }
     &:hover {
-      background-color: var(--md-sys-color-surface-container-low);
+      background-color: var(--md-sys-color-surface-container-high);
     }
     &.mat-focused {
       outline: solid 1px var(--md-sys-color-primary);
       background-color: var(--md-sys-color-surface-container-low);
     }
   }
+
+  /***************************************************************************
+  Form field in toolbar
+  **************************************************************************/
+  .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;
+    }
+  }
 }
 
 @function calc-side-paddings($density) {

package/theming/base/_elder-root-base.scss

@@ -0,0 +1,40 @@
+@mixin elder-root-base($theme) {
+  /***************************************************************************
+   *                                                                         *
+   * CSS reset: box-sizing                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+   *,
+   *::before,
+   *::after {
+     box-sizing: border-box;
+   }
+ 
+   /***************************************************************************
+     *                                                                         *
+     * Common Baseline styling                                                 *
+     *                                                                         *
+     **************************************************************************/
+ 
+   html,
+   body {
+     min-height: 100vh;
+     margin: 0;
+     width: 100%;
+     height: 100%;
+   }
+ 
+   body {
+     font-family: 'Roboto', sans-serif;
+     overflow: hidden;
+     position: fixed;
+   }
+ 
+   // Helps fonts on OSX looks more consistent with other systems
+   // Isn't currently in button styles due to performance concerns
+   * {
+     -webkit-font-smoothing: antialiased;
+     -moz-osx-font-smoothing: grayscale;
+   }
+}