@elderbyte/ngx-starter 19.1.1 → 19.1.3

package/lib/common/theme-sizes.d.ts

@@ -1,4 +1,4 @@
 /**
- * Defined in _elder-defaults.scss
+ * Defined in _elder-scss-variables.scss
  */
 export type ElderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

package/package.json

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

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

@@ -1,11 +1,15 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use './elder-scss-variables' as config;
 
 @mixin elder-design-tokens() {
   @include elder-badge-sizing();
 
-  & {
-    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+  @include m3-color-tokens();
+  
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    --md-sys-color-background: var(--md-sys-color-surface-container);
     --mat-app-background-color: var(--md-sys-color-background);
 
     // mat variables
@@ -21,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;
@@ -32,13 +37,13 @@
       --mat-dialog-container-elevation-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.6);
     }
 
-    // elder custom variables
+    //     // 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-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;
 
@@ -51,7 +56,7 @@
     --elder-nav-link-hover-color: var(--elder-backdrop-highlight-color);
     --elder-nav-link-active-color: var(--elder-backdrop-highlight-color);
 
-    // elder pane
+    //     // elder pane
     --elder-pane-padding: #{map.get(config.$sizes, sm)};
     --elder-pane-gap: #{map.get(config.$sizes, sm)};
     --elder-pane-border-radius: var(--mdc-outlined-card-container-shape, 12px);
@@ -86,6 +91,9 @@
     --elder-gold-light: #{map.get(config.$custom-colors, elder-gold-light)};
     --elder-gray-medium: #{map.get(config.$custom-colors, elder-gray-medium)};
 
+    --elder-blue: var(--md-sys-color-primary);
+    --md-sys-color-tertiary: var(--elder-gold);
+
     --elder-color-highlight-strong: hsl(214, 18%, 85%);
     --elder-color-highlight-strong: var(--elder-gold-light);
     --elder-color-highlight-light: #ebebeb;
@@ -113,6 +121,18 @@
     --mat-toolbar-title-text-line-height: 36px;
   }
 
+  // light theme overwrites
+  &.elder-light-theme {
+    //--md-sys-color-primary: var(--elder-blue);
+    --md-sys-color-tertiary: var(--elder-gold);
+    --md-sys-color-tertiary-container: var(--elder-gold-light);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
+    --md-sys-color-secondary-container: hsl(214, 44%, 84%);
+    --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
+    //--md-sys-color-primary-container: #a6c7ed;
+    //--md-sys-color-primary: #0b284f;
+  }
+
   // chip colors light
   &.elder-light-theme {
     --elder-chip-color-state-none: #{map.get(config.$chip-colors, state-none)};
@@ -142,32 +162,25 @@
 
   &.elder-dark-theme {
     // dark theme blue
-    --md-sys-color-primary: hsl(222, 45%, 74%);
-  }
-
-  // light theme overwrites
-  &.elder-light-theme {
-    --md-sys-color-primary: var(--elder-blue);
-    --md-sys-color-tertiary: var(--elder-gold);
-    --md-sys-color-tertiary-container: var(--elder-gold-light);
-    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
-    --md-sys-color-secondary-container: hsl(214, 44%, 84%);
-    --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
-    --md-sys-color-primary-container: #a6c7ed;
+    --md-sys-color-primary: hsl(222, 45%, 74%); // dim primary color
   }
 
   // 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);
@@ -211,3 +224,132 @@
     --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
   }
 }
+
+@mixin m3-color-tokens() {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    @include mat.theme-overrides(
+      (
+        primary: #475f89,
+        on-primary: #ffffff,
+        primary-container: #d7e3ff,
+        on-primary-container: #001b3e,
+        inverse-primary: #afc7f7,
+        primary-fixed: #d7e3ff,
+        primary-fixed-dim: #afc7f7,
+        on-primary-fixed: #001b3e,
+        on-primary-fixed-variant: #2f476f,
+        secondary: #565e71,
+        on-secondary: #ffffff,
+        secondary-container: #dae2f9,
+        on-secondary-container: #131b2c,
+        secondary-fixed: #dae2f9,
+        secondary-fixed-dim: #bec6dc,
+        on-secondary-fixed: #131b2c,
+        on-secondary-fixed-variant: #3f4759,
+        tertiary: #6f5c2e,
+        on-tertiary: #ffffff,
+        tertiary-container: #fae0a5,
+        on-tertiary-container: #251a00,
+        tertiary-fixed: #fae0a5,
+        tertiary-fixed-dim: #ddc48c,
+        on-tertiary-fixed: #251a00,
+        on-tertiary-fixed-variant: #564518,
+        background: #fcf8f8,
+        on-background: #1c1b1c,
+        surface: #fcf8f8,
+        surface-dim: #ddd9d9,
+        surface-bright: #fcf8f8,
+        surface-container-lowest: #ffffff,
+        surface-container-low: #f7f3f2,
+        surface-container: #f1eded,
+        surface-container-high: #ebe7e7,
+        surface-container-highest: #e5e2e1,
+        on-surface: #1c1b1c,
+        shadow: #000000,
+        scrim: #000000,
+        surface-tint: #5e5e62,
+        inverse-surface: #313030,
+        inverse-on-surface: #f4f0f0,
+        outline: #76777b,
+        outline-variant: #c6c6cb,
+        neutral: #787676,
+        neutral10: #1c1b1c,
+        error: #ba1a1a,
+        error-container: #ffdad6,
+        on-error: #ffffff,
+        on-error-container: #410002,
+        surface-variant: #e2e2e7,
+        on-surface-variant: #45474b,
+        neutral-variant: #76777c,
+        neutral-variant20: #2f3034,
+        inverse-secondary: #bec6dc,
+        inverse-tertiary: #ddc48c,
+      ),
+      'md-sys-color'
+    );
+  }
+
+  &.elder-dark-theme {
+    @include mat.theme-overrides(
+      (
+        primary: #afc7f7,
+        on-primary: #163057,
+        primary-container: #2f476f,
+        on-primary-container: #d7e3ff,
+        inverse-primary: #475f89,
+        primary-fixed: #d7e3ff,
+        primary-fixed-dim: #afc7f7,
+        on-primary-fixed: #001b3e,
+        on-primary-fixed-variant: #2f476f,
+        secondary: #bec6dc,
+        on-secondary: #283042,
+        secondary-container: #3f4759,
+        on-secondary-container: #dae2f9,
+        secondary-fixed: #dae2f9,
+        secondary-fixed-dim: #bec6dc,
+        on-secondary-fixed: #131b2c,
+        on-secondary-fixed-variant: #3f4759,
+        tertiary: #ddc48c,
+        on-tertiary: #3d2e04,
+        tertiary-container: #564518,
+        on-tertiary-container: #fae0a5,
+        tertiary-fixed: #fae0a5,
+        tertiary-fixed-dim: #ddc48c,
+        on-tertiary-fixed: #251a00,
+        on-tertiary-fixed-variant: #564518,
+        background: #141313,
+        on-background: #e5e2e1,
+        surface: #141313,
+        surface-dim: #141313,
+        surface-bright: #3a3939,
+        surface-container-lowest: #0e0e0e,
+        surface-container-low: #1c1b1c,
+        surface-container: #201f20,
+        surface-container-high: #2a2a2a,
+        surface-container-highest: #353435,
+        on-surface: #e5e2e1,
+        shadow: #000000,
+        scrim: #000000,
+        surface-tint: #c7c6ca,
+        inverse-surface: #e5e2e1,
+        inverse-on-surface: #313030,
+        outline: #909095,
+        outline-variant: #45474b,
+        neutral: #787676,
+        neutral10: #1c1b1c,
+        error: #ffb4ab,
+        error-container: #93000a,
+        on-error: #690005,
+        on-error-container: #ffdad6,
+        surface-variant: #45474b,
+        on-surface-variant: #c6c6cb,
+        neutral-variant: #76777c,
+        neutral-variant20: #2f3034,
+        inverse-secondary: #565e71,
+        inverse-tertiary: #6f5c2e,
+      ),
+      'md-sys-color'
+    );
+  }
+}

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

@@ -16,6 +16,8 @@
 @use '../components/elder-select-theme' as elder-select;
 @use '../components/elder-toolbar-theme' as elder-toolbar;
 @use '../components/elder-table-theme' as elder-table;
+@use '../components/elder-scrollbar-theme' as elder-scrollbar;
+
 
 // Create a theme.
 @mixin starter-theme($theme) {
@@ -46,4 +48,5 @@
   @include elder-select.theme($theme);
   @include elder-toolbar.theme($theme);
   @include elder-table.theme($theme);
+  @include elder-scrollbar.theme();
 }

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-fixes-base.scss

@@ -2,20 +2,7 @@
 @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);
-  }
-
+@mixin elder-fixes-base($theme) {
   .mat-app-background {
     display: block;
   }
@@ -118,6 +105,7 @@
   .elder-card-title {
     padding-bottom: 0 !important;
     margin-bottom: 6px !important;
+    //font-weight: 500;
   }
 
   /**************************************************************************
@@ -168,7 +156,8 @@
   }
 
   &.elder-light-theme .mdc-linear-progress__buffer-bar {
-    --mdc-linear-progress-track-color: #f3f3f3;
+    --mdc-linear-progress-track-color: #f8f8f8;
+    --mdc-linear-progress-track-color: var(--md-sys-color-secondary-fixed-dim);
   }
 
   &.elder-light-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
@@ -197,4 +186,8 @@
       // --mdc-switch-selected-hover-handle-color: color-mix(in hsl, var(--md-sys-color-tertiary), black 16%);
     }
   }
+
+  &.elder-light-theme .main-nav-logo{
+    filter: brightness(1.09) saturate(1.07);
+  }
 }

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+@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));
+  }
+  .scrollbar-sm {
+    @include scrollbar-width(map.get(config.$sizes, sm));
+  }
+  .scrollbar-md {
+    @include scrollbar-width(map.get(config.$sizes, md));
+  }
+  .scrollbar-lg {
+    @include scrollbar-width(map.get(config.$sizes, lg));
+  }
+  .scrollbar-xl {
+    @include scrollbar-width(map.get(config.$sizes, xl));
+  }
+  .scrollbar-xxl {
+    @include scrollbar-width(map.get(config.$sizes, xxl));
+  }
+}
+
+@mixin scrollbar-width($width) {
+  &::-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

@@ -2,21 +2,31 @@
   .border-none {
     border: none;
   }
+
+  .bold {
+    font-weight: bold;
+  }
+
   .border-radius-0 {
     border-radius: 0;
   }
+
   .display-none {
     display: none;
   }
+
   .text-center {
     text-align: center;
   }
+
   .overflow-hidden {
     overflow: hidden;
   }
+
   .overflow-auto {
     overflow: auto;
   }
+
   .full-width {
     width: 100%; // legacy, keep for now
   }