@elderbyte/ngx-starter 18.13.0-beta.2 → 18.14.0

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

@@ -4,13 +4,19 @@
 @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.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
+      height: $line-height-em;
     }
 
     .elder-prefix-icon {
@@ -34,16 +40,39 @@
 }
 
 @mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.m2-define-typography-config();
+  }
 
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme);
   }
 
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
+  @if $typography != null {
+    @include typography($typography);
   }
 }
+
+@mixin _chip_color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+}
+
+.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

@@ -4,13 +4,19 @@
 @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.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
+      height: $line-height-em;
     }
 
     .elder-prefix-icon {
@@ -34,28 +40,56 @@
 }
 
 @mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.m2-define-typography-config();
   }
 
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme);
   }
 
-  .cdk-drag-preview {
-    box-shadow: var(--elder-box-shadow-default);
+  @if $typography != null {
+    @include typography($typography);
   }
+}
 
-  .cdk-drag-placeholder {
-    opacity: 0;
-  }
+@mixin _chip_color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+}
 
-  .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
+.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-sizing: border-box;
+  // border-radius: 4px;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.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

@@ -3,13 +3,17 @@
 @use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
-@mixin typography($config-or-theme) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+@mixin typography($typography-config) {
+  $config: $typography-config;
+  // The unit-less line-height from the font config.
+  $line-height: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
-  @include elder-select-base.typography($config-or-theme);
+  @include elder-select-base.typography($typography-config);
 
   .elder-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
+    font-family: mat.m2-font-family($config);
 
     .elder-input-prefix-icon-container {
       padding-right: 3px;
@@ -27,33 +31,45 @@
 }
 
 @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);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
-  @keyframes shrink {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.75);
-    }
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.m2-define-typography-config();
   }
 
-  .loading {
-    animation: shrink 0.3s ease-in-out infinite alternate;
-    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
+  @if $color != null {
+    @include elder-select-base.color($color);
   }
 
-  .clickable-icon {
-    cursor: pointer;
+  @if $typography != null {
+    @include typography($typography);
   }
+}
 
-  .full-width {
-    width: 100%;
+@keyframes shrink {
+  0% {
+    transform: scale(1);
   }
-
-  .elder-select-dropdown-input {
-    cursor: pointer;
+  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;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.elder-select-dropdown-input {
+  cursor: pointer;
+}

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

@@ -1,6 +1,6 @@
 .title-icon {
   font-size: 42px;
-  width: 82px;
-  height: 82px;
+  width: 42px;
+  height: 42px;
   padding: 20px;
 }

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

@@ -18,11 +18,3 @@ mat-sidenav-container {
   height: 100%;
   overflow: hidden;
 }
-
-.elder-toolbar-main-nav-button {
-  &:focus,
-  &:hover,
-  &:active {
-    background-color: rgba(0, 0, 0, 0.07);
-  }
-}

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -3,6 +3,9 @@
 @use '../../../../theming/elder-typography-utils' as elder-typography;
 
 @mixin theme($config-or-theme) {
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: mat.m2-get-typography-config($config-or-theme);
+
   @include _interval-form-field-sizing();
   @include _interval-form-field-color();
 }

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

@@ -1,32 +1,3 @@
-.elder-toast {
-  --mat-snack-bar-button-color: var(--md-sys-color-on-primary-container);
-
-  button {
-    background-color: var(--md-sys-color-primary-container);;
-  }
-
-  .toast-title,
-  .mat-icon {
-    color: var(--md-sys-color-primary-container);
-  }
-
-  &.elder-toast-type-warn {
-    button {
-      background-color: var(--md-sys-color-tertiary-container);
-    }
-    .toast-title,
-    .mat-icon {
-      color: var(--md-sys-color-tertiary-container);
-    }
-  }
-
-  &.elder-toast-type-error {
-    button {
-      background-color: var(--md-sys-color-error-container);
-    }
-    .toast-title,
-    .mat-icon {
-      color: var(--md-sys-color-error-container);
-    }
-  }
+.toast-title {
+  font-size: 16px;
 }