@elderbyte/ngx-starter 19.1.0-beta.7 → 19.1.0-beta.9

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
-}