@igo2/core 19.0.0-next.29 → 19.0.0-next.30

package/src/theming/themes/_blue-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #1976d2, secondary: #1976d2, tertiary: #1976d2
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001c3a,
+    20: #003c72,
+    25: #00539a,
+    30: #1976d2,
+    35: #1976d2,
+    40: #1976d2,
+    50: #1976d2,
+    60: #4492f0,
+    70: #72adff,
+    80: #4a98d9,
+    90: #72b2eb,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001c3a,
+    20: #003c72,
+    25: #00539a,
+    30: #1976d2,
+    35: #1976d2,
+    40: #1976d2,
+    50: #1976d2,
+    60: #4492f0,
+    70: #72adff,
+    80: #90caf9,
+    90: #bbdefb,
+    95: #ebf1ff,
+    98: #f9f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3037,
+    25: #383b42,
+    30: #44474d,
+    35: #4f5259,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a9abb3,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eff0f9,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+    4: #0b0e14,
+    6: #101319,
+    12: #1c2026,
+    17: #272a30,
+    22: #32353b,
+    24: #363940,
+    87: #d8dae2,
+    92: #e6e8f0,
+    94: #ecedf6,
+    96: #f2f3fc
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c26,
+    20: #2b313b,
+    25: #363c46,
+    30: #414752,
+    35: #4d535e,
+    40: #585f6a,
+    50: #717783,
+    60: #8b919e,
+    70: #a5abb8,
+    80: #c1c6d4,
+    90: #dde2f0,
+    95: #ebf1ff,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_bluedark-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #095797, tertiary: #0d81df
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001f2a,
+    20: #003546,
+    25: #004154,
+    30: #164e62,
+    35: #164e62,
+    40: #164e62,
+    50: #164e62,
+    60: #6697ae,
+    70: #81b2c9,
+    80: #8ba7b1,
+    90: #b9cad0,
+    95: #e0f4ff,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #0b1e25,
+    20: #21333b,
+    25: #2c3e46,
+    30: #384952,
+    35: #43555e,
+    40: #4f616a,
+    50: #687a83,
+    60: #81939d,
+    70: #9baeb8,
+    80: #b6c9d4,
+    90: #d2e5f0,
+    95: #e0f4fe,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1d,
+    20: #2e3132,
+    25: #393c3d,
+    30: #454749,
+    35: #505354,
+    40: #5c5f60,
+    50: #757779,
+    60: #8f9192,
+    70: #aaabad,
+    80: #c5c6c8,
+    90: #e2e2e4,
+    95: #f0f1f2,
+    98: #f9f9fb,
+    99: #fcfcfe,
+    100: #ffffff,
+    4: #0c0f10,
+    6: #111415,
+    12: #1d2021,
+    17: #282a2c,
+    22: #333537,
+    24: #37393b,
+    87: #d9dadc,
+    92: #e7e8ea,
+    94: #edeeef,
+    96: #f3f3f5
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #151d20,
+    20: #2a3135,
+    25: #353c40,
+    30: #41484c,
+    35: #4c5358,
+    40: #585f64,
+    50: #71787c,
+    60: #8a9296,
+    70: #a5acb1,
+    80: #c0c7cc,
+    90: #dce3e8,
+    95: #ebf2f7,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_bluedq-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #095797, tertiary: #0d81df
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001c38,
+    20: #00315b,
+    25: #003d6d,
+    30: #095797,
+    35: #095797,
+    40: #095797,
+    50: #095797,
+    60: #5a93d7,
+    70: #76aef4,
+    80: #a2c9ff,
+    90: #d3e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001c38,
+    20: #00315b,
+    25: #003d6d,
+    30: #095797,
+    35: #095797,
+    40: #095797,
+    50: #095797,
+    60: #5a93d7,
+    70: #76aef4,
+    80: #a2c9ff,
+    90: #d3e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c20,
+    20: #2e3035,
+    25: #393b40,
+    30: #44474c,
+    35: #505257,
+    40: #5c5e63,
+    50: #75777c,
+    60: #8f9196,
+    70: #a9abb1,
+    80: #c5c6cc,
+    90: #e1e2e8,
+    95: #f0f0f6,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+    4: #0c0e12,
+    6: #111418,
+    12: #1d2024,
+    17: #272a2f,
+    22: #323539,
+    24: #37393e,
+    87: #d9dae0,
+    92: #e7e8ee,
+    94: #ededf4,
+    96: #f2f3f9
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c24,
+    20: #2b3139,
+    25: #363c45,
+    30: #414750,
+    35: #4d535c,
+    40: #595f68,
+    50: #727781,
+    60: #8b919b,
+    70: #a6abb6,
+    80: #c1c7d2,
+    90: #dee3ee,
+    95: #ecf1fc,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_index.scss

@@ -0,0 +1,5 @@
+@forward './blue-theme' as blue-*;
+@forward './bluedark-theme' as bluedark-*;
+@forward './bluedq-theme' as bluedq-*;
+@forward './teal-theme' as teal-*;
+@forward './theme';

package/src/theming/themes/_teal-theme.scss

@@ -0,0 +1,157 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #1976d2, secondary: #1976d2, tertiary: #1976d2
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #00201c,
+    20: #003731,
+    25: #00443c,
+    30: #00897b,
+    35: #00897b,
+    40: #00897b,
+    50: #00897b,
+    60: #32a192,
+    70: #52bcac,
+    80: #26a69a,
+    90: #b2dfdb,
+    95: #b4fff1,
+    98: #e5fff8,
+    99: #f2fffb,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #00201c,
+    20: #103631,
+    25: #1d413c,
+    30: #00897b,
+    35: #00897b,
+    40: #00897b,
+    50: #00897b,
+    60: #739891,
+    70: #8db3ab,
+    80: #26a69a,
+    90: #b2dfdb,
+    95: #d1f9f0,
+    98: #e5fff8,
+    99: #f2fffb,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #00201c,
+    20: #003731,
+    25: #00443c,
+    30: #005048,
+    35: #005d53,
+    40: #006b5f,
+    50: #008678,
+    60: #32a192,
+    70: #52bcac,
+    80: #70d8c8,
+    90: #8df5e4,
+    95: #b4fff1,
+    98: #e5fff8,
+    99: #f2fffb,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #171d1b,
+    20: #2c3130,
+    25: #373c3b,
+    30: #424846,
+    35: #4e5452,
+    40: #5a5f5e,
+    50: #737876,
+    60: #8d9290,
+    70: #a7acaa,
+    80: #c3c8c5,
+    90: #dfe4e1,
+    95: #edf2ef,
+    98: #f6faf8,
+    99: #f9fdfb,
+    100: #ffffff,
+    4: #0a0f0e,
+    6: #0f1413,
+    12: #1b211f,
+    17: #262b2a,
+    22: #313634,
+    24: #353a39,
+    87: #d6dbd9,
+    92: #e4e9e7,
+    94: #eaefec,
+    96: #f0f5f2
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #121e1c,
+    20: #273330,
+    25: #323e3b,
+    30: #3d4946,
+    35: #495552,
+    40: #55615e,
+    50: #6d7a77,
+    60: #879390,
+    70: #a1aeaa,
+    80: #bcc9c5,
+    90: #d8e5e1,
+    95: #e7f4f0,
+    98: #effcf8,
+    99: #f2fffb,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_theme.scss

@@ -0,0 +1,49 @@
+@use '@angular/material' as mat;
+@use '@igo2/sdg-core' as sdg;
+@use '../all-theme';
+@use './overrides';
+
+@mixin theme($theme, $definedTheme, $name) {
+  --sdg-font-size-root-percent: 87.5%;
+  --igo-font-family-text: var(--sdg-font-family-text, ('Roboto', sans-serif));
+
+  @include sdg.system-tokens();
+
+  @include customCss();
+  @include mat.theme($theme);
+
+  @include mat.color-variants-backwards-compatibility($definedTheme);
+
+  @include overrides.overrides();
+
+  @include all-theme.all-component-themes($theme);
+
+  @include sdg.typo-set-base-styles();
+}
+
+@mixin customCss() {
+  .igo-collapsed {
+    display: none !important;
+  }
+
+  mat-icon[igocollapse] {
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.igo-chevron {
+      width: auto !important;
+      transform: rotateZ(0deg);
+      transition: 300ms ease-in-out;
+
+      &.collapsed {
+        transform: rotateZ(180deg);
+        transition: 300ms ease-in-out;
+      }
+    }
+  }
+
+  .toastr-message-title {
+    font-size: var(--sdg-font-size-h5);
+  }
+}

package/src/theming/themes/overrides/_button.scss

@@ -0,0 +1,79 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mdc-fab {
+    $background: var(--mat-sys-on-primary);
+    $foreground: var(--mat-sys-primary);
+
+    @include mat.fab-overrides(
+      (
+        container-color: $background,
+        foreground-color: $foreground,
+        small-container-color: $background,
+        small-foreground-color: $foreground
+      )
+    );
+  }
+
+  @include color-variants-backwards-compatibility();
+}
+
+// Material custom color variants backwards compatibility
+@mixin color-variants-backwards-compatibility() {
+  .mdc-button {
+    &.mat-warn {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--mat-sys-error)
+        )
+      );
+    }
+    &.mat-primary {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--mat-sys-primary)
+        )
+      );
+    }
+  }
+
+  .mdc-fab {
+    &.mat-warn {
+      @include mat.fab-overrides(
+        (
+          container-color: var(--mat-sys-error),
+          foreground-color: var(--mat-sys-on-primary),
+          small-container-color: var(--mat-sys-error),
+          small-foreground-color: var(--mat-sys-on-primary)
+        )
+      );
+    }
+    &.mat-primary {
+      @include mat.fab-overrides(
+        (
+          container-color: var(--mat-sys-primary),
+          foreground-color: var(--mat-sys-on-primary),
+          small-container-color: var(--mat-sys-primary),
+          small-foreground-color: var(--mat-sys-on-primary)
+        )
+      );
+    }
+  }
+
+  .mdc-icon-button {
+    &.mat-warn {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--mat-sys-error)
+        )
+      );
+    }
+    &.mat-primary {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--mat-sys-primary)
+        )
+      );
+    }
+  }
+}

package/src/theming/themes/overrides/_index.scss

@@ -0,0 +1,7 @@
+@use './button';
+@use './sidenav';
+
+@mixin overrides() {
+  @include button.overrides();
+  @include sidenav.overrides();
+}

package/src/theming/themes/overrides/_sidenav.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 0
+    )
+  );
+}