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

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);
-  --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
-
-  // 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);
-    --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,11 +0,0 @@
-@mixin elder-common-helpers() {
-    .border-none {
-        border: none;
-    }
-    .display-none {
-        display: none; // unfortunately .hidden is already used
-    }
-    .p-pane {
-        padding: var(--elder-pane-padding);
-    }
-}