@elderbyte/ngx-starter 19.0.2 → 19.1.0-beta.0

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

@@ -0,0 +1,156 @@
+@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

@@ -0,0 +1,41 @@
+@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-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();
+
+  // component themes rendered in global css
+  @include elder-component-themes.theme(
+    $theme
+  ); // TODO: Move component themes directly into components
+}

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

@@ -0,0 +1,78 @@
+@mixin elder-color-helpers() {
+  $color-variables: (
+    'background': var(--md-sys-color-background),
+    'error': var(--md-sys-color-error),
+    'error-container': var(--md-sys-color-error-container),
+    'inverse-on-surface': var(--md-sys-color-inverse-on-surface),
+    'inverse-primary': var(--md-sys-color-inverse-primary),
+    'inverse-surface': var(--md-sys-color-inverse-surface),
+    'on-background': var(--md-sys-color-on-background),
+    'on-error': var(--md-sys-color-on-error),
+    'on-error-container': var(--md-sys-color-on-error-container),
+    'on-primary': var(--md-sys-color-on-primary),
+    'on-primary-container': var(--md-sys-color-on-primary-container),
+    'on-primary-fixed': var(--md-sys-color-on-primary-fixed),
+    'on-primary-fixed-variant': var(--md-sys-color-on-primary-fixed-variant),
+    'on-secondary': var(--md-sys-color-on-secondary),
+    'on-secondary-container': var(--md-sys-color-on-secondary-container),
+    'on-secondary-fixed': var(--md-sys-color-on-secondary-fixed),
+    'on-secondary-fixed-variant': var(--md-sys-color-on-secondary-fixed-variant),
+    'on-surface': var(--md-sys-color-on-surface),
+    'on-surface-variant': var(--md-sys-color-on-surface-variant),
+    'on-tertiary': var(--md-sys-color-on-tertiary),
+    'on-tertiary-container': var(--md-sys-color-on-tertiary-container),
+    'on-tertiary-fixed': var(--md-sys-color-on-tertiary-fixed),
+    'on-tertiary-fixed-variant': var(--md-sys-color-on-tertiary-fixed-variant),
+    'outline': var(--md-sys-color-outline),
+    'outline-variant': var(--md-sys-color-outline-variant),
+    'primary': var(--md-sys-color-primary),
+    'primary-container': var(--md-sys-color-primary-container),
+    'primary-fixed': var(--md-sys-color-primary-fixed),
+    'primary-fixed-dim': var(--md-sys-color-primary-fixed-dim),
+    'scrim': var(--md-sys-color-scrim),
+    'secondary': var(--md-sys-color-secondary),
+    'secondary-container': var(--md-sys-color-secondary-container),
+    'secondary-fixed': var(--md-sys-color-secondary-fixed),
+    'secondary-fixed-dim': var(--md-sys-color-secondary-fixed-dim),
+    'shadow': var(--md-sys-color-shadow),
+    'surface': var(--md-sys-color-surface),
+    'surface-bright': var(--md-sys-color-surface-bright),
+    'surface-container': var(--md-sys-color-surface-container),
+    'surface-container-high': var(--md-sys-color-surface-container-high),
+    'surface-container-highest': var(--md-sys-color-surface-container-highest),
+    'surface-container-low': var(--md-sys-color-surface-container-low),
+    'surface-container-lowest': var(--md-sys-color-surface-container-lowest),
+    'surface-dim': var(--md-sys-color-surface-dim),
+    'surface-tint': var(--md-sys-color-surface-tint),
+    'surface-variant': var(--md-sys-color-surface-variant),
+    'tertiary': var(--md-sys-color-tertiary),
+    'tertiary-container': var(--md-sys-color-tertiary-container),
+    'tertiary-fixed': var(--md-sys-color-tertiary-fixed),
+    'tertiary-fixed-dim': var(--md-sys-color-tertiary-fixed-dim),
+  );
+
+  // background colors
+  @each $name, $value in $color-variables {
+    .elder-bg-#{$name} {
+      background-color: #{$value};
+    }
+  }
+
+  // text colors
+  @each $name, $value in $color-variables {
+    .elder-text-#{$name} {
+      color: #{$value};
+    }
+  }
+
+  // border colors
+  @each $name, $value in $color-variables {
+    .elder-border-#{$name} {
+      border-color: #{$value};
+    }
+  }
+
+  .elder-pane-bg-color {
+    background-color: var(--elder-pane-bg-color);
+  }
+}

package/theming/{_elder-flex-layout.scss → utility-classes/_elder-flex-layout.scss}

@@ -1,3 +1,6 @@
+@use '../system/elder-config' as settings;
+@use 'sass:map';
+
 /***************************************************************************
  *                                                                         *
  * Breakpoint Definitions                                                  *
@@ -5,13 +8,11 @@
  **************************************************************************/
 
 $media: (
-  xs: 0px,
-  sm: 600px,
-  md: 960px,
-  lg: 1024px,
-  xl: 1280px,
-  2 xl: 1536px,
-  3 xl: 1920px,
+  xs: map.get(settings.$media, xs),
+  sm: map.get(settings.$media, sm),
+  md: map.get(settings.$media, md),
+  lg: map.get(settings.$media, lg),
+  xl: map.get(settings.$media, xl),
 );
 
 @mixin breakpoint($breakpoint) {
@@ -25,17 +26,15 @@ $media: (
 }
 
 @mixin flex-layout {
-  box-sizing: border-box;
   display: flex !important;
 }
 
 @mixin flex-initial-100 {
   flex: 1 1 100%;
-  box-sizing: border-box;
 }
 
 @mixin elder-flex-layout($theme) {
-  $common-sizes: map-get($theme, elder, common-sizes);
+  $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************
    *                                                                         *
@@ -43,12 +42,12 @@ $media: (
    *                                                                         *
    **************************************************************************/
 
-  $xs: map-get($common-sizes, xs);
-  $sm: map-get($common-sizes, sm);
-  $md: map-get($common-sizes, md);
-  $lg: map-get($common-sizes, lg);
-  $xl: map-get($common-sizes, xl);
-  $xxl: map-get($common-sizes, xxl);
+  $xs: map.get($common-sizes, xs);
+  $sm: map.get($common-sizes, sm);
+  $md: map.get($common-sizes, md);
+  $lg: map.get($common-sizes, lg);
+  $xl: map.get($common-sizes, xl);
+  $xxl: map.get($common-sizes, xxl);
 
   /***************************************************************************
    *                                                                         *
@@ -61,7 +60,10 @@ $media: (
     min-height: 100%;
     min-width: 100%;
     width: 100%;
-    box-sizing: border-box;
+  }
+
+  .min-h-full {
+    min-height: 100%;
   }
 
   /***************************************************************************
@@ -195,24 +197,20 @@ $media: (
 
   .flex {
     flex: 1 1 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
     min-width: 0;
     min-height: 0;
   }
 
   .flex-auto {
     flex: 1 1 auto; // grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-initial {
     flex: 0 1 auto; // No grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-none {
     flex: none;
-    box-sizing: border-box;
   }
 
   .layout-row {
@@ -325,22 +323,18 @@ $media: (
 
   .flex-grow {
     flex-grow: 1;
-    box-sizing: border-box;
   }
 
   .flex-nogrow {
     flex-grow: 0;
-    box-sizing: border-box;
   }
 
   .flex-shrink {
     flex-shrink: 1;
-    box-sizing: border-box;
   }
 
   .flex-noshrink {
     flex: 1 0 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
   }
 
   /***************************************************************************