@elderbyte/ngx-starter 19.1.1 → 19.1.2

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.2",
   "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,12 +1,42 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use './elder-scss-variables' as config;
 
 @mixin elder-design-tokens() {
   @include elder-badge-sizing();
 
+  @include color-theme-x();
+
   & {
+    //--md-sys-color-surface-container-highest: hsl(216, 56%, 96%);
+  }
+
+  &.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);
     --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)
@@ -32,7 +62,7 @@
       --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);
@@ -51,7 +81,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 +116,16 @@
     --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);
+    //--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);
     --elder-color-highlight-light: #ebebeb;
@@ -113,6 +153,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,18 +194,7 @@
 
   &.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
@@ -211,3 +252,132 @@
     --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
   }
 }
+
+@mixin color-theme-x() {
+  &.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/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;
   }
@@ -168,7 +155,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 +185,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-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
   }