@elderbyte/ngx-starter 19.1.0-beta.13 → 19.1.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.0-beta.13",
+  "version": "19.1.0-beta.15",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -75,10 +75,7 @@ $elder-tile-padding: 8px;
   width: 100%;
   height: 100%;
   cursor: pointer;
-  // background-color: rgba(
-  //   mat.get-theme-color($theme, neutral, 80),
-  //   0.34
-  // ); // default background
+  border-radius: var(--elder-pane-border-radius);
   background-color: var(--md-sys-color-surface-container-low);
   text-align: left;
   transition:

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

@@ -19,7 +19,9 @@
     --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);
-    --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
+    --mat-sidenav-container-background-color: var(--mat-app-background-color);
+    --mdc-dialog-container-color: var(--mat-app-background-color);
+
 
     // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
     --mdc-icon-button-state-layer-size: 48px;
@@ -36,9 +38,10 @@
     --elder-pane-gap: #{map.get(config.$sizes, sm)};
     --elder-pane-border-radius: var(
       --mdc-outlined-card-container-shape,
-      var(--mat-app-corner-medium)
+      12px
     );
     --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
+    --elder-round-corner-side-padding: 10px;
 
     // card header
     --elder-card-header-padding: 15px 15px 5px 15px;

package/theming/abstracts/_elder-scss-variables.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 
 $sizes: (
   xs: 4px,
@@ -42,24 +43,14 @@ $chip-colors: (
   state-other: #cdc7e5,
 );
 
-// $chip-colors: (
-//   state-none: lighten(map.get($chip-colors, state-none), 2%),
-//   state-open: lighten(map.get($chip-colors, state-open), 2%),
-//   state-in-progress: lighten(map.get($chip-colors, state-in-progress), 2%),
-//   state-completed: lighten(map.get($chip-colors, state-completed), 2%),
-//   state-warn: lighten(map.get($chip-colors, state-warn), 2%),
-//   state-error: lighten(map.get($chip-colors, state-error), 2%),
-//   state-other: lighten(map.get($chip-colors, state-other), 2%),
-// );
-
 $chip-colors-dark: (
-  state-none: darken(map.get($chip-colors, state-none), 65%),
-  state-open: darken(map.get($chip-colors, state-open), 45%),
-  state-in-progress: darken(map.get($chip-colors, state-in-progress), 45%),
-  state-completed: darken(map.get($chip-colors, state-completed), 45%),
-  state-warn: darken(map.get($chip-colors, state-warn), 45%),
-  state-error: darken(map.get($chip-colors, state-error), 45%),
-  state-other: darken(map.get($chip-colors, state-other), 45%),
+  state-none: color.adjust(map.get($chip-colors, state-none), $lightness: -65%),
+  state-open: color.adjust(map.get($chip-colors, state-open), $lightness: -45%),
+  state-in-progress: color.adjust(map.get($chip-colors, state-in-progress), $lightness: -45%),
+  state-completed: color.adjust(map.get($chip-colors, state-completed), $lightness: -45%),
+  state-warn: color.adjust(map.get($chip-colors, state-warn), $lightness: -45%),
+  state-error: color.adjust(map.get($chip-colors, state-error), $lightness: -45%),
+  state-other: color.adjust(map.get($chip-colors, state-other), $lightness: -45%),
 );
 
 $palettes: (

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

@@ -2,8 +2,8 @@
 @use '@angular/material' as mat;
 @use '../abstracts/elder-scss-variables' as config;
 
-$colorStateNone: var(--elder-chip-color-state-none);
-$colorStateOpen: var(--elder-chip-color-state-open);
+$colorStateNone: var(--md-sys-color-surface-variant);
+$colorStateOpen: var(--md-sys-color-surface-variant);
 
 $colorStateInProgress: var(--elder-chip-color-state-in-progress);
 $colorStateCompleted: var(--elder-chip-color-state-completed);
@@ -18,8 +18,8 @@ $level-critical: $colorStateError;
 
 @mixin theme($config-or-theme) {
   .mat-mdc-chip.mat-mdc-chip {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
+    --mdc-chip-elevated-container-color: $colorStateNone;
+    background-color: $colorStateNone;
 
     &.elder-chip-color-primary,
     &.color-primary {