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

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss

@@ -2,15 +2,42 @@
   text-decoration: none;
   padding-left: 16px;
   padding-right: 16px;
-  min-height: 48px;
+  min-height: var(--elder-nav-item-height);
   border-radius: var(--elder-border-radius-sm);
   overflow: hidden;
-  transition: background-color 0.5s;
+  transition: background-color 0.5s, color 0.5s;
+}
+
+.nav-link .mat-icon {
+  height: 32px;
+  width: 32px;
+  font-size: 24px;
+  padding: 4px;
+}
+
+.nav-link.nav-link-clickable {
+  cursor: pointer;
+}
+
+.nav-link.nav-link-clickable:hover {
+  background-color: var(--elder-nav-link-hover-color) !important;
+}
+
+.nav-link.nav-link-disabled {
+  cursor: default;
+}
+
+.nav-link.nav-link-active {
+  background-color: var(--elder-nav-link-active-color);
+  color: var(--md-sys-color-primary);
+  .mat-icon {
+    color: var(--md-sys-color-on-teriary);
+  }
+}
 
+.nav-link.nav-link-inactive {
+  color: var(--md-sys-color-on-surface);
   .mat-icon {
-    height: 32px;
-    width: 32px;
-    font-size: 24px;
-    padding: 4px;
+    color: var(--md-sys-color-on-surface);
   }
 }

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -1,8 +1,8 @@
 .elder-dialog-panel {
-  background-color: var(--md-sys-color-surface-container-lowest);
+  background-color: var(--elder-dialog-panel-bg-color);
   color: var(--md-sys-color-on-surface);
 
   padding: 10px;
-  border-radius: var(--elder-border-radius-sm);
+  border-radius: var(--elder-pane-border-radius);
   box-shadow: var(--elder-box-shadow-default);
 }

package/src/lib/components/panels/toggle-panel/elder-toggle-panel.component.scss

@@ -0,0 +1,3 @@
+:host(.elder-main-nav-panel) {
+    background-color: var(--elder-main-nav-bg) !important; // main nav bg color
+}

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -1,77 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  $config: $typography-config; // TODO $typography-config
-  // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, body-1);
-  $font-size: mat.font-size($config, body-1);
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: mat.font-family($config);
-
-    .elder-select-input {
-      height: $line-height-em;
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
-
-  $typography: mat.define-typography-config();
-
-  @if $color != null {
-    @include elder-select-base.color($color);
-  }
-
-  @if $typography != null {
-    @include typography($typography);
-  }
-}
-
-.elder-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}
-
-.cdk-drag-preview {
-  // border-radius: var(--elder-border-radius-sm);
-  box-shadow: var(--elder-box-shadow-default);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
-
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
-  }
-}

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,60 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
-
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
-  }
-
-  .cdk-drag-preview {
-    box-shadow: var(--elder-box-shadow-default);
-  }
-
-  .cdk-drag-placeholder {
-    opacity: 0;
-  }
-
-  .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
-}

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -1,58 +1,21 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($config-or-theme) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  @include elder-select-base.typography($config-or-theme);
-
-  .elder-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-input-prefix-icon-container {
-      padding-right: 3px;
-    }
+@keyframes shrink {
+  0% {
+    transform: scale(1);
   }
-
-  .elder-select-input {
-    height: $line-height-em;
-    font: inherit;
-  }
-
-  .elder-select-arrow {
-    cursor: pointer;
+  100% {
+    transform: scale(0.75);
   }
 }
 
-@mixin theme($config-or-theme) {
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
-  @include typography($config-or-theme);
-
-  @keyframes shrink {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.75);
-    }
-  }
-
-  .loading {
-    animation: shrink 0.3s ease-in-out infinite alternate;
-    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
-  }
-
-  .clickable-icon {
-    cursor: pointer;
-  }
+.loading {
+  animation: shrink 0.3s ease-in-out infinite alternate;
+  -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
+}
 
-  .full-width {
-    width: 100%;
-  }
+.clickable-icon {
+  cursor: pointer;
+}
 
-  .elder-select-dropdown-input {
-    cursor: pointer;
-  }
+.elder-select-dropdown-input {
+  cursor: pointer;
 }

package/src/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.scss

@@ -1,15 +1,5 @@
 @use '@angular/material' as mat;
 
-@mixin elder-select-list-theme($theme) {
-  .select-item-active {
-    background-color: var(--md-sys-color-primary-container);
-    border-left: 5px solid var(--md-sys-color-primary) !important;
-  }
-}
-
-.select-item-inactive {
-}
-
 .select-item {
   padding-left: 16px;
   padding-right: 16px;
@@ -17,7 +7,6 @@
   border-radius: 0;
   font-size: 16px;
   font-weight: 400;
-  // border-left: 5px solid transparent;
 }
 
 elder-select-list-item a.select-item-inactive mat-icon {

package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.scss

@@ -11,5 +11,5 @@
 }
 
 .elder-app-header-panel {
-  background-color: #0b284f; // TODO: replace in m3
+  background-color: var(--md-sys-color-primary);
 }

package/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -4,7 +4,7 @@
 
   &.elder-toast-type-warn {
     --elder-toast-message-color-title: var(--elder-toast-message-color-title-warn);
-    --mdc-filled-button-container-color: var(--md-sys-color-tertiary-container);
+    --mdc-filled-button-container-color: var(--md-sys-color-tertiary);
   }
 
   &.elder-toast-type-error {

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

@@ -0,0 +1,225 @@
+@use 'sass:map';
+@use './elder-scss-variables' as config;
+
+@mixin elder-design-tokens() {
+  @include elder-badge-sizing();
+
+  & {
+    // bg color
+    --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+    --mat-app-background-color: var(--md-sys-color-background);
+    //--mat-app-background-color: hsl(255, 26%, 95%);
+
+    // mat variables
+    --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
+    --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
+    --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
+    --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
+    --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
+    --mat-toolbar-title-text-weight: 500; // mat toolbar typography
+    --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(--mat-app-background-color);
+    //--mdc-dialog-container-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-tab-header-inactive-label-text-color: var(
+    //   --md-sys-color-outline
+    // ); // make inactive tab text color lighter
+
+    // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
+    --mdc-icon-button-state-layer-size: 48px;
+
+    // add shadow to dialog to improve dark mode
+    --mat-dialog-container-elevation-shadow: var(--mat-app-elevation-shadow-level-12);
+
+    // 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-nav-item-height: 54px;
+    --elder-button-horizontal-padding: 19px;
+
+    // backdrop highlight color
+    --elder-backdrop-highlight-color: rgba(0, 0, 0, 0.1);
+    &.elder-dark-theme {
+      --elder-backdrop-highlight-color: rgba(255, 255, 255, 0.1);
+    }
+
+    --elder-nav-link-hover-color: var(--elder-backdrop-highlight-color);
+    --elder-nav-link-active-color: var(--elder-backdrop-highlight-color);
+
+    // 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);
+    --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;
+
+    // cards, table etc bg
+    --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
+    --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
+    // --mat-table-background-color: transparent;
+    --mat-table-background-color: var(--md-sys-color-surface-container-lowest);
+    --mat-paginator-container-background-color: var(--mat-table-background-color);
+    --elder-grid-background-color: var(--mat-table-background-color);
+    //--mat-table-header-container-height: 56px; // 56px is default
+
+    // elder toast messages
+    --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-warn: var(--md-sys-color-inverse-on-surface);
+    --elder-toast-message-color-title-error: var(--md-sys-color-inverse-on-surface);
+
+    // main nav top left button color
+    --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
+    --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
+
+    // custom colors
+    --elder-blue: #{map.get(config.$custom-colors, elder-blue)};
+    --elder-gold: #{map.get(config.$custom-colors, elder-gold)};
+    --elder-gold-dark: #{map.get(config.$custom-colors, elder-gold-dark)};
+    --elder-gold-semi-dark: #{map.get(config.$custom-colors, elder-gold-semi-dark)};
+    --elder-gold-light: #{map.get(config.$custom-colors, elder-gold-light)};
+    --elder-gray-medium: #{map.get(config.$custom-colors, elder-gray-medium)};
+
+    --elder-color-highlight-strong: hsl(214, 18%, 85%);
+    --elder-color-highlight-strong: var(--elder-gold-light);
+    --elder-color-highlight-light: #ebebeb;
+    --elder-color-highlight-variant: var(--md-sys-color-secondary-fixed);
+
+    // missing md3 color
+    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    --md-sys-color-on-tertiary-fixed-dim: var(--md-sys-color-on-surface);
+
+    // dialog
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container-lowest);
+
+    // data footer
+    --elder-data-element-footer-height: 48px;
+
+    // xy
+    --elder-round-form-field-outline: none;
+
+    // fix button width / padding to not break existing layouts
+    --mat-protected-button-horizontal-padding: var(--elder-button-horizontal-padding);
+    --mat-outlined-button-horizontal-padding: var(--elder-button-horizontal-padding);
+    --mat-filled-button-horizontal-padding: var(--elder-button-horizontal-padding);
+
+    // mat toolbar title-text line height
+    --mat-toolbar-title-text-line-height: 36px;
+  }
+
+  // chip colors light
+  &.elder-light-theme {
+    --elder-chip-color-state-none: #{map.get(config.$chip-colors, state-none)};
+    --elder-chip-color-state-open: #{map.get(config.$chip-colors, state-open)};
+    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors, state-in-progress)};
+    --elder-chip-color-state-completed: #{map.get(config.$chip-colors, state-completed)};
+    --elder-chip-color-state-warn: #{map.get(config.$chip-colors, state-warn)};
+    --elder-chip-color-state-error: #{map.get(config.$chip-colors, state-error)};
+    --elder-chip-color-state-other: #{map.get(config.$chip-colors, state-other)};
+  }
+
+  // chip colors dark
+  &.elder-dark-theme {
+    --elder-chip-color-state-none: #{map.get(config.$chip-colors-dark, state-none)};
+    --elder-chip-color-state-open: #{map.get(config.$chip-colors-dark, state-open)};
+    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors-dark, state-in-progress)};
+    --elder-chip-color-state-completed: #{map.get(config.$chip-colors-dark, state-completed)};
+    --elder-chip-color-state-warn: #{map.get(config.$chip-colors-dark, state-warn)};
+    --elder-chip-color-state-error: #{map.get(config.$chip-colors-dark, state-error)};
+    --elder-chip-color-state-other: #{map.get(config.$chip-colors-dark, state-other)};
+  }
+
+  &.elder-dark-theme {
+    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container);
+    --elder-main-nav-bg: var(--md-sys-color-surface-container-high);
+  }
+
+  &.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: #d8e3fa; // hsl(221, 77%, 91%)
+    --md-sys-color-secondary-container: hsl(214, 44%, 84%);
+    --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
+    // --md-sys-color-primary-container: hsl(214, 64%, 84%);
+    --md-sys-color-primary-container: #a6c7ed;
+    --md-sys-color-primary-fixed-dim: #95a6c7;
+  }
+
+  // dark theme overwrites
+  &.elder-dark-theme {
+    --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
+    --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
+    //--md-sys-color-primary-container: var(--elder-gold-semi-dark);
+    //--md-sys-color-primary-fixed-dim: var(--elder-gold-dark);
+    --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-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+    //--md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
+    //--md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
+    --md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
+    //--md-sys-color-primary-fixed-dim: var(--elder-gold-dark);
+    --md-sys-color-surface-container-highest: #191919;
+    --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);
+    --elder-dark-gray: var(--md-sys-color-surface-container);
+    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
+    --elder-dark-mode-color-primary: var(--md-sys-color-primary);
+    --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
+    --elder-dark-mode-color-surface: var(--md-sys-color-surface);
+    --elder-dark-mode-color-on-surface: var(--md-sys-color-on-surface);
+    
+    // missing md3 color dark fix
+    --md-sys-color-on-tertiary-fixed-dim: var(--md-sys-color-on-tertiary);
+  }
+
+  @media (max-width: 1024px) {
+    // enter mobile toolbar height sooner
+    --mat-toolbar-standard-height: var(--mat-toolbar-mobile-height);
+  }
+}
+
+@mixin elder-badge-sizing() {
+  & {
+    // Use legacy MAT 2 badge sizing
+    --mat-badge-container-size: unset;
+    --mat-badge-small-size-container-size: unset;
+    --mat-badge-large-size-container-size: unset;
+    --mat-badge-legacy-container-size: 22px;
+    --mat-badge-legacy-small-size-container-size: 16px;
+    --mat-badge-legacy-large-size-container-size: 28px;
+    --mat-badge-container-offset: -11px 0;
+    --mat-badge-small-size-container-offset: -8px 0;
+    --mat-badge-large-size-container-offset: -14px 0;
+    --mat-badge-container-overlap-offset: -11px;
+    --mat-badge-small-size-container-overlap-offset: -8px;
+    --mat-badge-large-size-container-overlap-offset: -14px;
+    --mat-badge-container-padding: 0;
+    --mat-badge-small-size-container-padding: 0;
+    --mat-badge-large-size-container-padding: 0;
+    --mat-badge-line-height: var(--mat-badge-legacy-container-size);
+    --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
+    --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
+  }
+}

package/theming/{system/_elder-config.scss → abstracts/_elder-scss-variables.scss}

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:color';
+
 $sizes: (
   xs: 4px,
   sm: 8px,
@@ -19,6 +22,37 @@ $media: (
   xl: 1280px,
 );
 
+$custom-colors: (
+  elder-blue: #0b284f,
+  elder-gold: #b69f6a,
+  //elder-gold-dark: #423d32,
+  elder-gold-dark: #433d33,
+  elder-gold-semi-dark: #7f7054,
+  elder-gray-medium: #373737,
+  //elder-gold-semi-dark: #7E7154,
+  elder-gold-light: #f0e9d8,
+);
+
+$chip-colors: (
+  state-none: #e1e1e1,
+  state-open: #bedbe4,
+  state-in-progress: #bdd5e7,
+  state-completed: #b1ddce,
+  state-warn: #f4dab8,
+  state-error: #e6b6b6,
+  state-other: #cdc7e5,
+);
+
+$chip-colors-dark: (
+  state-none: color.adjust(map.get($chip-colors, state-none), $lightness: -45%),
+  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: (
   primary: (
     0: #000000,

package/theming/{system/_elder-defaults.scss → abstracts/_elder-set-defaults-fn.scss}

@@ -1,18 +1,18 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use './elder-config' as settings;
+@use './elder-scss-variables' as config;
 
 /******************************
 Default values
 *******************************/
-$commonSizesXs: map.get(settings.$sizes, xs);
-$commonSizesSm: map.get(settings.$sizes, sm);
-$commonSizesMd: map.get(settings.$sizes, md);
-$commonSizesLg: map.get(settings.$sizes, lg);
-$commonSizesXl: map.get(settings.$sizes, xl);
-$commonSizesXxl: map.get(settings.$sizes, xxl);
+$commonSizesXs: map.get(config.$sizes, xs);
+$commonSizesSm: map.get(config.$sizes, sm);
+$commonSizesMd: map.get(config.$sizes, md);
+$commonSizesLg: map.get(config.$sizes, lg);
+$commonSizesXl: map.get(config.$sizes, xl);
+$commonSizesXxl: map.get(config.$sizes, xxl);
 
-$densityFormField: map.get(settings.$extra, form-field-density);
+$densityFormField: map.get(config.$extra, form-field-density);
 
 /******************************
 Validates $theme and sets default value if null