@igo2/core 19.0.0-next.8 → 19.0.0

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
+    )
+  );
+}

package/style/all-style.css

@@ -793,4 +793,8 @@ button.mat-mdc-icon-button.mat-mdc-button-base[disabled=true] {
 
 .ol-overviewmap .ol-overviewmap-box:hover {
   cursor: move;
+}
+
+.ol-overviewmap .ol-viewport:hover {
+  cursor: pointer;
 }