@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.21

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -1,129 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-$colorStateNone: rgb(143, 143, 143);
-$colorStateOpen: rgb(199, 199, 199);
-
-$colorStateInProgress: rgb(33, 150, 243);
-$colorStateCompleted: rgb(4, 170, 109);
-$colorStateWarn: rgb(255, 145, 0);
-$colorStateError: rgb(255, 0, 0);
-$colorStateOther: rgb(121, 73, 252);
-
-$level-low: rgb(4, 170, 109);
-$level-medium: rgb(33, 150, 243);
-$level-high: rgb(255, 145, 0);
-$level-critical: rgb(255, 0, 0);
-
-@mixin theme($config-or-theme) {
-  .mat-mdc-chip.elder-chip-label {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
-
-    &.color-primary {
-      background-color: var(--md-sys-color-primary-container);
-    }
-
-    &.color-primary {
-      @include _theme_color_chip(
-        var(--md-sys-color-primary-container),
-        var(--md-sys-color-primary),
-        var(--md-sys-color-on-primary)
-      );
-    }
-
-    &.color-accent {
-      @include _theme_color_chip(
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-tertiary),
-        var(--md-sys-color-on-tertiary)
-      );
-    }
-
-    &.color-warn {
-      @include _theme_color_chip(
-        var(--md-sys-color-error-container),
-        var(--md-sys-color-error),
-        var(--md-sys-color-on-error)
-      );
-    }
-
-    &.none {
-      background-color: rgba($colorStateNone, 0.2);
-      border-color: $colorStateNone;
-      background-color: var(--md-sys-color-surface-variant);
-    }
-
-    &.state-open {
-      background-color: rgba($colorStateOpen, 0.2);
-      border-color: var(--md-sys-color-surface-variant);
-      .mat-mdc-chip-avatar {
-        color: var(--md-sys-color-surface-variant);
-      }
-      background-color: var(--md-sys-color-surface-container);
-    }
-
-    &.state-in-progress {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-container);
-    }
-    &.state-completed {
-      --mdc-chip-elevated-container-color: var(--mdc-chip-elevated-selected-container-color);
-      --mdc-chip-label-text-color: var(--mdc-chip-elevated-on-container-color);
-    }
-    &.state-warn {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-tertiary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-tertiary-on-container);
-    }
-    &.state-error {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-error-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-error-on-container);
-    }
-    &.state-other {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-fixed-dim);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-fixed);
-    }
-
-    &.level-low {
-      @include _outlined-label-chip($level-low);
-    }
-    &.level-medium {
-      @include _outlined-label-chip($level-medium);
-    }
-    &.level-high {
-      @include _outlined-label-chip($level-high);
-    }
-    &.level-critical {
-      @include _outlined-label-chip($level-critical);
-    }
-  }
-}
-
-@mixin _theme_color_chip($color1, $color2, $color3) {
-  &.legacy {
-    background-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      color: $color3;
-    }
-  }
-  &.md3 {
-    background-color: $color1;
-    border-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      //color: $color2;
-    }
-  }
-}
-
-@mixin _outlined-label-chip($color1) {
-  background-color: rgba($color1, 0.2);
-  border-color: $color1;
-  .mat-mdc-chip-action-label,
-  .mat-mdc-chip-avatar {
-    color: $color1;
-  }
-}

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -1,66 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include _group-theme($theme);
-  @include _link-theme($theme);
-}
-
-@mixin _group-theme($theme) {
-  .nav-group-button:hover {
-    background-color: var(--md-sys-color-surface-container-high);
-    transition: background-color 0.5s;
-  }
-
-  .nav-group-button:not(.nav-group-button-open) {
-    .mat-icon {
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-
-  .nav-group-button-active {
-    background-color: var(--md-sys-color-primary-fixed);
-  }
-
-  .nav-group-button-open {
-    padding-left: 11px !important; // -5 to counter border-left
-    .mat-icon {
-      color: var(--md-sys-color-primary);
-    }
-  }
-}
-
-@mixin _link-theme($theme) {
-  .nav-link.nav-link-clickable {
-    cursor: pointer;
-    &:hover {
-      background-color: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-      .mat-icon {
-        color: var(--md-sys-color-on-surface);
-      }
-    }
-  }
-
-  .nav-link.nav-link-disabled {
-    cursor: default;
-  }
-
-  .nav-link:hover {
-    background-color: var(--md-sys-color-surface-container-low);
-  }
-
-  .nav-link.nav-link-active {
-    background-color: var(--md-sys-color-surface-container-highest);
-    color: var(--md-sys-color-on-surface-container);
-    .mat-icon {
-      color: var(--md-sys-color-on-teriary);
-    }
-  }
-
-  .nav-link.nav-link-inactive {
-    color: var(--md-sys-color-on-surface);
-    .mat-icon {
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-}

package/src/lib/components/select/_elder-select-base.scss

@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin typography($typography-config) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  $icon-size: 16px;
-  $arrow-icon-size: 24px;
-
-  .elder-input-prefix-icon-container {
-    height: $line-height-em !important;
-    min-width: $line-height-em !important;
-  }
-
-  .elder-select-arrow {
-    width: $arrow-icon-size !important;
-    height: $arrow-icon-size !important;
-    line-height: $arrow-icon-size !important;
-    font-size: $arrow-icon-size !important;
-  }
-
-  .elder-icon-small {
-    width: $icon-size !important;
-    height: $icon-size !important;
-    line-height: $icon-size !important;
-    font-size: $icon-size !important;
-  }
-}

package/theming/style-tweaks/_elder-color-variants.scss

@@ -1,31 +0,0 @@
-@use '@angular/material' as mat;
-
-/**
- * Source: https://material.angular.io/guide/theming#using-component-color-variants
- * 
- * This applies custom color variants for the legacy M2 color system for usage in M3.
- * There are different mixins for many components (not all).
- * You can find the list of the components and there supported color variants here:
- * https://material.angular.io/guide/theming#using-component-color-variants
- */
-
-// Custom Color variants for m3. They can already be provided through
-// "mat.color-variants-backwards-compatibility()"
-// But can be customized in this mixin below:
-
-@mixin elder-color-variants($theme) {
-  // Apply primary color variants for button components
-  mat-chip-option[color='primary'] {
-    @include mat.chips-color($theme, $color-variant: primary);
-  }
-
-  // Apply secondary color variants for button components
-  mat-chip-option[color='danger'] {
-    @include mat.chips-color($theme, $color-variant: error);
-  }
-
-  // Apply tertiary color variants for button components
-  mat-chip-option[color='accent'] {
-    @include mat.chips-color($theme, $color-variant: tertiary);
-  }
-}

package/theming/style-tweaks/_elder-component-themes.scss

@@ -1,22 +0,0 @@
-@use '../../src/lib/components/chips/elder-chip-theme' as elder-chip;
-@use '../../src/lib/components/data-view/table/elder-table/elder-table.component' as elder-table;
-@use '../../src/lib/components/navigation/nav/elder-nav-theme' as elder-nav;
-@use '../../src/lib/components/data-view/grid/elder-grid/elder-grid.component' as elder-grid;
-@use '../../src/lib/components/card-organizer/card-stack/elder-card-stack.component' as
-  elder-card-stack;
-@use '../../src/lib/components/select/single/elder-select/elder-select.component' as elder-select;
-@use '../../src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component'
-  as elder-multi-select-chips;
-@use '../../src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component'
-  as elder-multi-select-chip-options;
-
-@mixin theme($theme) {
-  @include elder-chip.theme($theme);
-  @include elder-nav.theme($theme);
-  @include elder-select.theme($theme);
-  @include elder-multi-select-chips.theme($theme);
-  @include elder-multi-select-chip-options.theme($theme);
-  @include elder-table.theme($theme);
-  @include elder-card-stack.theme($theme);
-  @include elder-grid.theme($theme);
-}

package/theming/style-tweaks/_elder-reset.scss

@@ -1,13 +0,0 @@
-/***************************************************************************
- *                                                                         *
- * CSS reset                                                               *
- *                                                                         *
- **************************************************************************/
-
-@mixin elder-reset() {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}

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

@@ -1,101 +0,0 @@
-@use 'sass:map';
-@use './elder-config' 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 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);
-
-  // 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 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,
-    var(--mat-app-corner-medium)
-  );
-  --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
-
-  // card header
-  --elder-card-header-padding: 15px 15px 5px 15px;
-
-  // cards white 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: var(--md-sys-color-surface-container-lowest);
-  --mat-paginator-container-background-color: var(--mat-table-background-color);
-
-  // 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);
-
-  // light theme overwrites
-  &.elder-light-theme {
-    --md-sys-color-primary: rgb(11, 40, 79);
-    --md-sys-color-tertiary: rgb(182, 159, 106);
-  }
-
-  // dark theme overwrites
-  &.elder-dark-theme {
-    --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
-    --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
-    --md-sys-color-surface-container-highest: #191919;
-    --md-sys-color-surface-container-lowest: #262626;
-    --md-sys-color-error: #FF999F;
-    --elder-dark-gray: var(--md-sys-color-surface-container);
-    --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
-    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
-
-    // dark mode specific colors
-    --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);
-  }
-}
-
-@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-m3-theme.scss

@@ -1,156 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use 'elder-design-tokens' as elder-design-tokens;
-@use './elder-starter-theme' as starter-theme;
-@use './elder-config' as settings;
-
-@function create-default-elder-themes() {
-  @return create-themes(settings.$palettes);
-}
-
-@function create-themes($palettesArg) {
-  $_palettes: $palettesArg;
-
-  $_rest: (
-    secondary: map.get($_palettes, secondary),
-    neutral: map.get($_palettes, neutral),
-    neutral-variant: map.get($_palettes, neutral-variant),
-    error: map.get($_palettes, error),
-  );
-  $_primary: map.merge(map.get($_palettes, primary), $_rest);
-  $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
-  $_primary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
-  $_tertiary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
-
-  $density: 0; // important ot start with 0, since we are (miss-)using the tighter -4 density settings only for forms later on
-
-  $light-theme: mat.define-theme(
-    (
-      color: (
-        theme-type: light,
-        primary: $_primary,
-        tertiary: $_tertiary,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $dark-theme: mat.define-theme(
-    (
-      color: (
-        theme-type: dark,
-        primary: $_primary,
-        tertiary: $_tertiary,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $light-theme-reverse: mat.define-theme(
-    (
-      color: (
-        theme-type: light,
-        primary: $_primary-reverse,
-        tertiary: $_tertiary-reverse,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $dark-theme-reverse: mat.define-theme(
-    (
-      color: (
-        theme-type: dark,
-        primary: $_primary-reverse,
-        tertiary: $_tertiary-reverse,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  @return (
-    light: $light-theme,
-    dark: $dark-theme-reverse,
-    light-reverse: $light-theme-reverse,
-    dark-reverse: $dark-theme-reverse
-  );
-}
-
-@mixin render-default-elder-theme($themes: 'default', $options: ()) {
-  @if $themes == 'default' {
-    $themes: create-default-elder-themes();
-  }
-
-  // map options
-  $use-typography-hierarchy: not map.has-key($options, 'no-typography-hierarchy');
-
-  // create theme
-  //$themes: create-default-elder-themes();
-  $elder-light-theme-m3: map.get($themes, light);
-  $elder-dark-theme-m3: map.get($themes, dark-reverse);
-
-  // render theme
-  @include mat.all-component-typographies();
-  @include mat.elevation-classes();
-  @include mat.app-background();
-
-  @if $use-typography-hierarchy {
-    @include mat.typography-hierarchy($elder-light-theme-m3, $back-compat: true);
-  }
-
-  .elder-light-theme,
-  .elder-dark-theme {
-    @include mat.all-component-themes($elder-light-theme-m3);
-    @include mat.system-level-colors($elder-light-theme-m3);
-    @include mat.system-level-typography($elder-light-theme-m3);
-    @include mat.color-variants-backwards-compatibility($elder-light-theme-m3);
-    @include starter-theme.starter-theme($elder-light-theme-m3);
-  }
-
-  .elder-dark-theme {
-    @include mat.all-component-colors($elder-dark-theme-m3);
-    @include mat.system-level-colors($elder-dark-theme-m3);
-    @include mat.color-variants-backwards-compatibility($elder-dark-theme-m3);
-  }
-
-  .elder-light-theme,
-  .elder-dark-theme {
-    @include elder-design-tokens.elder-design-tokens();
-  }
-
-  .elder-light-theme {
-    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
-  }
-}

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

@@ -1,45 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-@forward '../system/elder-defaults';
-@use '../system/elder-defaults' as elder-defaults;
-@use '../style-tweaks/elder-color-variants' as elder-color-variants;
-@use '../style-tweaks/elder-style-fixes' as elder-fixes;
-@use '../style-tweaks/elder-common' as elder-common;
-@use '../style-tweaks/elder-form' as elder-form;
-@use '../style-tweaks/elder-reset' as elder-reset;
-@use '../style-tweaks/elder-component-themes' as elder-component-themes;
-@use '../utility-classes/elder-flex-layout' as elder-flex-layout;
-@use '../utility-classes/elder-color-helpers' as elder-color-helpers;
-@use '../utility-classes/elder-typography-helpers' as elder-typography-helpers;
-@use '../utility-classes/elder-common-helpers' as elder-common-helpers;
-@use '../utility-classes/elder-layout-system' as elder-layout-system;
-
-// Create a theme.
-@mixin starter-theme($theme) {
-  $theme: elder-defaults.validate-and-set-defaults($theme);
-
-  // ATM we need to render this here, because first need to set defaults for form-field density
-  @include mat.form-field-density(
-    map.get($theme, elder, density, form-field)
-  ); // TODO: improve density setup
-
-  // style tweaks
-  @include elder-reset.elder-reset();
-  @include elder-fixes.elder-style-fixes($theme);
-  @include elder-common.elder-common-styles($theme);
-  @include elder-form.elder-form-styles($theme);
-  @include elder-color-variants.elder-color-variants($theme);
-
-  // utility classes
-  @include elder-flex-layout.elder-flex-layout($theme);
-  @include elder-layout-system.elder-layout-system($theme);
-  @include elder-color-helpers.elder-color-helpers();
-  @include elder-typography-helpers.elder-typography-helpers();
-  @include elder-common-helpers.elder-common-helpers();
-
-  // component themes rendered in global css
-  @include elder-component-themes.theme(
-    $theme
-  ); // TODO: Move component themes directly into components
-}

package/theming/utility-classes/_elder-common-helpers.scss

@@ -1,8 +0,0 @@
-@mixin elder-common-helpers() {
-    .border-none {
-        border: none;
-    }
-    .display-none {
-        display: none; // unfortunately .hidden is already used
-    }
-}