@elderbyte/ngx-starter 19.4.1 → 19.5.0

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

@@ -1,11 +1,12 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use './elder-scss-variables' as config;
+@use './elder-m3-color-tokens' as elder-m3-color-tokens;
 
 @mixin elder-design-tokens() {
   @include elder-badge-sizing();
 
-  @include m3-color-tokens();
+  @include elder-m3-color-tokens.m3-color-tokens();
 
   &.elder-light-theme,
   &.elder-dark-theme {
@@ -37,9 +38,6 @@
     --mat-tree-container-background-color: transparent;
 
     // typography overwrites
-    // --md-sys-typescale-title-large-line-height: 1.75rem;
-    // --md-sys-typescale-title-large-size: 1.375rem;
-    // --md-sys-typescale-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
     --md-sys-typescale-title-large-line-height: 1.625rem;
     --md-sys-typescale-title-large-size: 1.3125rem;
     --md-sys-typescale-title-large: 400 1.3125rem / 1.625rem Roboto, sans-serif;
@@ -142,7 +140,7 @@
     // data footer
     --elder-data-element-footer-height: 48px;
 
-    // xy
+    // round form field
     --elder-round-form-field-outline: none;
 
     // fix button width / padding to not break existing layouts
@@ -156,14 +154,11 @@
 
   // light theme overwrites
   &.elder-light-theme {
-    //--md-sys-color-primary: var(--elder-blue);
     --md-sys-color-tertiary: var(--elder-gold);
     --md-sys-color-tertiary-container: var(--elder-gold-light);
     --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
     --md-sys-color-secondary-container: hsl(214, 44%, 84%);
     --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
-    //--md-sys-color-primary-container: #a6c7ed;
-    //--md-sys-color-primary: #0b284f;
 
     .mat-toolbar.mat-primary {
       --mat-icon-button-hover-state-layer-opacity: 0.24;
@@ -225,8 +220,6 @@
     --md-sys-color-surface-container-low: #1b1c1e;
     --md-sys-color-surface-container-lowest: #232324;
 
-    // --md-sys-color-surface-container: #1e1f20;
-    // --md-sys-color-surface-container-low: #1b1c1e;
     --md-sys-color-error: #ff897d;
     --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
     --md-sys-color-surface-tint: var(--elder-gold-dark);
@@ -270,132 +263,3 @@
     --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
   }
 }
-
-@mixin m3-color-tokens() {
-  &.elder-light-theme,
-  &.elder-dark-theme {
-    @include mat.theme-overrides(
-      (
-        primary: #475f89,
-        on-primary: #ffffff,
-        primary-container: #d7e3ff,
-        on-primary-container: #001b3e,
-        inverse-primary: #afc7f7,
-        primary-fixed: #d7e3ff,
-        primary-fixed-dim: #afc7f7,
-        on-primary-fixed: #001b3e,
-        on-primary-fixed-variant: #2f476f,
-        secondary: #565e71,
-        on-secondary: #ffffff,
-        secondary-container: #dae2f9,
-        on-secondary-container: #131b2c,
-        secondary-fixed: #dae2f9,
-        secondary-fixed-dim: #bec6dc,
-        on-secondary-fixed: #131b2c,
-        on-secondary-fixed-variant: #3f4759,
-        tertiary: #6f5c2e,
-        on-tertiary: #ffffff,
-        tertiary-container: #fae0a5,
-        on-tertiary-container: #251a00,
-        tertiary-fixed: #fae0a5,
-        tertiary-fixed-dim: #ddc48c,
-        on-tertiary-fixed: #251a00,
-        on-tertiary-fixed-variant: #564518,
-        background: #fcf8f8,
-        on-background: #1c1b1c,
-        surface: #fcf8f8,
-        surface-dim: #ddd9d9,
-        surface-bright: #fcf8f8,
-        surface-container-lowest: #ffffff,
-        surface-container-low: #f7f3f2,
-        surface-container: #f1eded,
-        surface-container-high: #ebe7e7,
-        surface-container-highest: #e5e2e1,
-        on-surface: #1c1b1c,
-        shadow: #000000,
-        scrim: #000000,
-        surface-tint: #5e5e62,
-        inverse-surface: #313030,
-        inverse-on-surface: #f4f0f0,
-        outline: #76777b,
-        outline-variant: #c6c6cb,
-        neutral: #787676,
-        neutral10: #1c1b1c,
-        error: #ba1a1a,
-        error-container: #ffdad6,
-        on-error: #ffffff,
-        on-error-container: #410002,
-        surface-variant: #e2e2e7,
-        on-surface-variant: #45474b,
-        neutral-variant: #76777c,
-        neutral-variant20: #2f3034,
-        inverse-secondary: #bec6dc,
-        inverse-tertiary: #ddc48c,
-      ),
-      'md-sys-color'
-    );
-  }
-
-  &.elder-dark-theme {
-    @include mat.theme-overrides(
-      (
-        primary: #afc7f7,
-        on-primary: #163057,
-        primary-container: #2f476f,
-        on-primary-container: #d7e3ff,
-        inverse-primary: #475f89,
-        primary-fixed: #d7e3ff,
-        primary-fixed-dim: #afc7f7,
-        on-primary-fixed: #001b3e,
-        on-primary-fixed-variant: #2f476f,
-        secondary: #bec6dc,
-        on-secondary: #283042,
-        secondary-container: #3f4759,
-        on-secondary-container: #dae2f9,
-        secondary-fixed: #dae2f9,
-        secondary-fixed-dim: #bec6dc,
-        on-secondary-fixed: #131b2c,
-        on-secondary-fixed-variant: #3f4759,
-        tertiary: #ddc48c,
-        on-tertiary: #3d2e04,
-        tertiary-container: #564518,
-        on-tertiary-container: #fae0a5,
-        tertiary-fixed: #fae0a5,
-        tertiary-fixed-dim: #ddc48c,
-        on-tertiary-fixed: #251a00,
-        on-tertiary-fixed-variant: #564518,
-        background: #141313,
-        on-background: #e5e2e1,
-        surface: #141313,
-        surface-dim: #141313,
-        surface-bright: #3a3939,
-        surface-container-lowest: #0e0e0e,
-        surface-container-low: #1c1b1c,
-        surface-container: #201f20,
-        surface-container-high: #2a2a2a,
-        surface-container-highest: #353435,
-        on-surface: #e5e2e1,
-        shadow: #000000,
-        scrim: #000000,
-        surface-tint: #c7c6ca,
-        inverse-surface: #e5e2e1,
-        inverse-on-surface: #313030,
-        outline: #909095,
-        outline-variant: #45474b,
-        neutral: #787676,
-        neutral10: #1c1b1c,
-        error: #ffb4ab,
-        error-container: #93000a,
-        on-error: #690005,
-        on-error-container: #ffdad6,
-        surface-variant: #45474b,
-        on-surface-variant: #c6c6cb,
-        neutral-variant: #76777c,
-        neutral-variant20: #2f3034,
-        inverse-secondary: #565e71,
-        inverse-tertiary: #6f5c2e,
-      ),
-      'md-sys-color'
-    );
-  }
-}

package/theming/abstracts/_elder-m3-color-tokens.scss

@@ -0,0 +1,130 @@
+@use '@angular/material' as mat;
+
+@mixin m3-color-tokens() {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    @include mat.theme-overrides(
+      (
+        primary: #475f89,
+        on-primary: #ffffff,
+        primary-container: #d7e3ff,
+        on-primary-container: #001b3e,
+        inverse-primary: #afc7f7,
+        primary-fixed: #d7e3ff,
+        primary-fixed-dim: #afc7f7,
+        on-primary-fixed: #001b3e,
+        on-primary-fixed-variant: #2f476f,
+        secondary: #565e71,
+        on-secondary: #ffffff,
+        secondary-container: #dae2f9,
+        on-secondary-container: #131b2c,
+        secondary-fixed: #dae2f9,
+        secondary-fixed-dim: #bec6dc,
+        on-secondary-fixed: #131b2c,
+        on-secondary-fixed-variant: #3f4759,
+        tertiary: #6f5c2e,
+        on-tertiary: #ffffff,
+        tertiary-container: #fae0a5,
+        on-tertiary-container: #251a00,
+        tertiary-fixed: #fae0a5,
+        tertiary-fixed-dim: #ddc48c,
+        on-tertiary-fixed: #251a00,
+        on-tertiary-fixed-variant: #564518,
+        background: #fcf8f8,
+        on-background: #1c1b1c,
+        surface: #fcf8f8,
+        surface-dim: #ddd9d9,
+        surface-bright: #fcf8f8,
+        surface-container-lowest: #ffffff,
+        surface-container-low: #f7f3f2,
+        surface-container: #f1eded,
+        surface-container-high: #ebe7e7,
+        surface-container-highest: #e5e2e1,
+        on-surface: #1c1b1c,
+        shadow: #000000,
+        scrim: #000000,
+        surface-tint: #5e5e62,
+        inverse-surface: #313030,
+        inverse-on-surface: #f4f0f0,
+        outline: #76777b,
+        outline-variant: #c6c6cb,
+        neutral: #787676,
+        neutral10: #1c1b1c,
+        error: #ba1a1a,
+        error-container: #ffdad6,
+        on-error: #ffffff,
+        on-error-container: #410002,
+        surface-variant: #e2e2e7,
+        on-surface-variant: #45474b,
+        neutral-variant: #76777c,
+        neutral-variant20: #2f3034,
+        inverse-secondary: #bec6dc,
+        inverse-tertiary: #ddc48c,
+      ),
+      'md-sys-color'
+    );
+  }
+
+  &.elder-dark-theme {
+    @include mat.theme-overrides(
+      (
+        primary: #afc7f7,
+        on-primary: #163057,
+        primary-container: #2f476f,
+        on-primary-container: #d7e3ff,
+        inverse-primary: #475f89,
+        primary-fixed: #d7e3ff,
+        primary-fixed-dim: #afc7f7,
+        on-primary-fixed: #001b3e,
+        on-primary-fixed-variant: #2f476f,
+        secondary: #bec6dc,
+        on-secondary: #283042,
+        secondary-container: #3f4759,
+        on-secondary-container: #dae2f9,
+        secondary-fixed: #dae2f9,
+        secondary-fixed-dim: #bec6dc,
+        on-secondary-fixed: #131b2c,
+        on-secondary-fixed-variant: #3f4759,
+        tertiary: #ddc48c,
+        on-tertiary: #3d2e04,
+        tertiary-container: #564518,
+        on-tertiary-container: #fae0a5,
+        tertiary-fixed: #fae0a5,
+        tertiary-fixed-dim: #ddc48c,
+        on-tertiary-fixed: #251a00,
+        on-tertiary-fixed-variant: #564518,
+        background: #141313,
+        on-background: #e5e2e1,
+        surface: #141313,
+        surface-dim: #141313,
+        surface-bright: #3a3939,
+        surface-container-lowest: #0e0e0e,
+        surface-container-low: #1c1b1c,
+        surface-container: #201f20,
+        surface-container-high: #2a2a2a,
+        surface-container-highest: #353435,
+        on-surface: #e5e2e1,
+        shadow: #000000,
+        scrim: #000000,
+        surface-tint: #c7c6ca,
+        inverse-surface: #e5e2e1,
+        inverse-on-surface: #313030,
+        outline: #909095,
+        outline-variant: #45474b,
+        neutral: #787676,
+        neutral10: #1c1b1c,
+        error: #ffb4ab,
+        error-container: #93000a,
+        on-error: #690005,
+        on-error-container: #ffdad6,
+        surface-variant: #45474b,
+        on-surface-variant: #c6c6cb,
+        neutral-variant: #76777c,
+        neutral-variant20: #2f3034,
+        inverse-secondary: #565e71,
+        inverse-tertiary: #6f5c2e,
+      ),
+      'md-sys-color'
+    );
+  }
+}

package/theming/components/_elder-toolbar-theme.scss

@@ -76,4 +76,25 @@
       }
     }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    --mat-text-button-state-layer-color: var(--md-sys-color-on-surface);
+    .mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
+      --mat-filled-button-state-layer-color: var(--md-sys-color-primary);
+      --mdc-filled-button-label-text-color: var(--md-sys-color-primary);
+      --mdc-filled-button-container-color: var(--md-sys-color-on-primary);
+    }
+  }
+
+  &.elder-dark-theme {
+    .mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
+      --mdc-filled-button-container-color: var(--md-sys-color-primary);
+      --mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);
+      --mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);
+      .mdc-button__label {
+        color: var(--md-sys-color-on-primary) !important;
+      }
+    }
+  }
 }