@elderbyte/ngx-starter 19.1.2 → 19.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.2",
+  "version": "19.1.4",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

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

@@ -5,38 +5,12 @@
 @mixin elder-design-tokens() {
   @include elder-badge-sizing();
 
-  @include color-theme-x();
-
-  & {
-    //--md-sys-color-surface-container-highest: hsl(216, 56%, 96%);
-  }
-
+  @include m3-color-tokens();
+  
   &.elder-light-theme,
   &.elder-dark-theme {
-    // --md-sys-color-surface-container-highest: hsl(218, 56%, 95%); // light blue
-    // --md-sys-color-surface-container-highest: hsl(220, 50%, 98%); // gmail bg blue
-    // --md-sys-color-surface-container-highest: hsl(216, 56%, 98%); // google drive bg blue
-    // --md-sys-color-surface-container-highest: hsl(216, 42%, 97%);
-    //--md-sys-color-surface-container-highest: hsl(216, 56%, 96%);
-    //--md-sys-color-surface-container-highest: hsl(216, 99%, 96%); // P favorit
-    //--md-sys-color-surface-container-highest: hsl(216, 49%, 90%);
-    --md-sys-color-surface-container-highest: hsl(41, 39%, 93%);
-    --md-sys-color-surface-container-highest: hsl(0, 0%, 95%); // xy
-    --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container);
-    // --md-sys-color-surface-container-high: hsl(218, 38%, 93%); // xy
-    // --md-sys-color-surface-container: hsl(218, 38%, 91%); // xy
-    // --md-sys-color-surface-container-low: hsl(218, 38%, 8%); // xy
-    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
-    //--md-sys-color-background: var(--md-sys-color-surface-container-low);
+    --md-sys-color-background: var(--md-sys-color-surface-container);
     --mat-app-background-color: var(--md-sys-color-background);
-    // --mat-app-background-color: hsl(218, 0%, 92%);
-
-    //--mat-app-background-color: hsl(218, 21%, 34%);
-    //--mat-app-background-color: var(--md-sys-color-primary);
-
-    // .mat-mdc-tab-header * {
-    //   color: white !important;
-    // }
 
     // mat variables
     --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
@@ -51,6 +25,7 @@
     --mat-sidenav-container-background-color: var(--mat-app-background-color);
     --mdc-dialog-container-color: var(--md-sys-color-surface-container-lowest);
     --mat-tab-header-divider-height: 0; // remove tab header divider
+    --mat-menu-container-color: var(--md-sys-color-surface-container-lowest);
 
     // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
     --mdc-icon-button-state-layer-size: 48px;
@@ -66,9 +41,10 @@
     --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-scrollbar-width-default: 8px;
+    --elder-scrollbar-width-lg: #{map.get(config.$sizes, lg)};
     --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
-    --elder-main-nav-bg: var(--md-sys-color-surface);
+    --elder-main-nav-bg: var(--md-sys-color-surface-container-lowest);
     --elder-nav-item-height: 54px;
     --elder-button-horizontal-padding: 19px;
 
@@ -118,13 +94,6 @@
 
     --elder-blue: var(--md-sys-color-primary);
     --md-sys-color-tertiary: var(--elder-gold);
-    //--md-sys-color-tertiary-container: var(--elder-gold-semi-light);
-    //--elder-gold: var(--md-sys-color-tertiary);
-    // --elder-gold-dark: var(--md-sys-color-tertiary-container);
-    // --elder-gold-semi-dark: var(--md-sys-color-tertiary-fixed-dim);
-    // --elder-gold-semi-light: var(--md-sys-color-tertiary-fixed);
-    // --elder-gold-light: var(--md-sys-color-tertiary-container);
-    --elder-gray-medium: var(--md-sys-color-secondary-container);
 
     --elder-color-highlight-strong: hsl(214, 18%, 85%);
     --elder-color-highlight-strong: var(--elder-gold-light);
@@ -199,16 +168,20 @@
 
   // dark theme overwrites
   &.elder-dark-theme {
+    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
     --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
     --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
     --elder-color-highlight-light: var(--elder-gray-medium);
     --elder-color-highlight-strong: var(--elder-gold-semi-dark);
     --elder-color-highlight-variant: var(--elder-gold-dark);
     --md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
-    --md-sys-color-surface-container-highest: #191919;
-    --md-sys-color-surface-container-lowest: #232324;
+    --md-sys-color-surface-container-highest: #181818;
     --md-sys-color-surface-container: #1e1f20;
     --md-sys-color-surface-container-low: #1b1c1e;
+    --md-sys-color-surface-container-lowest: #232324;
+
+    // --md-sys-color-surface-container: #1e1f20;
+    // --md-sys-color-surface-container-low: #1b1c1e;
     --md-sys-color-error: #ff897d;
     --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
     --md-sys-color-surface-tint: var(--elder-gold-dark);
@@ -253,7 +226,7 @@
   }
 }
 
-@mixin color-theme-x() {
+@mixin m3-color-tokens() {
   &.elder-light-theme,
   &.elder-dark-theme {
     @include mat.theme-overrides(

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

@@ -33,14 +33,14 @@
   .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-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.system-level-colors($elder-dark-theme);
     @include mat.color-variants-backwards-compatibility($elder-dark-theme);
   }
 

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

@@ -3,6 +3,25 @@
 @use 'sass:map';
 
 @mixin elder-common-base($theme) {
+  /***************************************************************************
+  *                                                                         *
+  * Scrollbar styling (webkit)                                              *
+  *                                                                         *
+  **************************************************************************/
+
+  ::-webkit-scrollbar {
+    width: var(--elder-scrollbar-width-default);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-outline-variant);
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--md-sys-color-outline);
+  }
+
   /***************************************************************************
    *                                                                         *
    * Angular Material Extensions (Optional)                                  *

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

@@ -88,6 +88,12 @@
     --mat-badge-background-color: var(--md-sys-color-error);
   }
 
+  // disable button color grayed out
+  .mat-mdc-icon-button[disabled],
+  .mat-mdc-icon-button.mat-mdc-button-disabled {
+    opacity: 0.5;
+  };
+
   /**************************************************************************
     Card fixes
   **************************************************************************/
@@ -105,6 +111,7 @@
   .elder-card-title {
     padding-bottom: 0 !important;
     margin-bottom: 6px !important;
+    //font-weight: 500;
   }
 
   /**************************************************************************

package/theming/components/_elder-scrollbar-theme.scss

@@ -5,19 +5,6 @@
 
 @mixin 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);
-  }
-
   .scrollbar-xs {
     @include scrollbar-width(map.get(config.$sizes, xs));
   }
@@ -39,7 +26,7 @@
 }
 
 @mixin scrollbar-width($width) {
-  &::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: $width;
   }
 }

package/theming/utilities/_elder-color-utils.scss

@@ -74,6 +74,19 @@
     background-color: var(--elder-pane-bg-color);
   }
 
+  .bg-highlight-light {
+    background-color: var(--elder-color-highlight-light);
+  }
+
+  .bg-highlight-strong {
+    background-color: var(--elder-color-highlight-strong);
+  }
+
+  .bg-highlight-variant {
+    background-color: var(--elder-color-highlight-variant);
+  }
+
+
   // text colors
   @each $name, $value in $color-variables {
     .elder-text-#{$name} {

package/theming/utilities/_elder-common-utils.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../abstracts/elder-scss-variables' as config;
+
 @mixin elder-common-utils() {
   .border-none {
     border: none;
@@ -62,4 +65,11 @@
   .outlined {
     border: 1px solid var(--md-sys-color-outline-variant);
   }
+
+  // large scrollbar fix for webkit browsers
+  .scrollbar-lg {
+    ::-webkit-scrollbar {
+      width: var(--elder-scrollbar-width-lg) !important;
+    }
+  }
 }