@igo2/sdg-theme 2.0.0-next.2

package/src/material/_dialog.scss

@@ -0,0 +1,37 @@
+@use '@igo2/sdg-core' as sdg;
+
+@mixin overrides() {
+  .mdc-dialog {
+    max-width: 600px;
+
+    &__surface {
+      border-radius: 0 !important;
+    }
+
+    &__title {
+      padding-top: 8px !important; // Workaround, this should be 32px but Material apply a default height for the title.
+      padding-bottom: 24px !important;
+
+      @include sdg.title-border;
+    }
+
+    &__tile,
+    &__content,
+    &__actions {
+      padding-left: 32px !important;
+      padding-right: 32px !important;
+    }
+
+    &__actions {
+      padding-top: 24px !important;
+      padding-bottom: 32px !important;
+    }
+
+    .close-button {
+      $iconButtonPadding: 8px;
+      position: absolute;
+      top: 16px - $iconButtonPadding;
+      right: 16px - $iconButtonPadding;
+    }
+  }
+}

package/src/material/_divider.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@igo2/sdg-core' as sdg;
+
+@mixin overrides() {
+  @include mat.divider-overrides(
+    (
+      color: rgba(map.get(sdg.$light-colors, 'black'), 0.12)
+    )
+  );
+}

package/src/material/_expansion-panel.scss

@@ -0,0 +1,62 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mat-expansion-panel {
+    $grey-pale: var(--sdg-color-grey-pale);
+    $grey-hover: var(#e7e7ea);
+
+    $blue-dark: var(--sdg-color-blue-dark);
+
+    @include mat.expansion-overrides(
+      (
+        container-shape: 0,
+        container-elevation-shadow: none,
+        container-text-color: none,
+        container-text-tracking: none,
+
+        header-description-color: var(--sdg-color-grey-medium),
+        header-focus-state-layer-color: $grey-pale,
+        header-hover-state-layer-color: $grey-hover,
+        header-indicator-color: $blue-dark,
+        header-text-color: $blue-dark,
+        header-text-weight: 600,
+        header-text-size: var(--sdg-font-size-md),
+        header-text-line-height: var(--sdg-line-height-md),
+        header-text-font: var(--sdg-font-family-text),
+        header-text-tracking: none,
+        header-collapsed-state-height: 56px,
+        header-expanded-state-height: 56px
+      )
+    );
+
+    &.mat-expanded {
+      outline: 1px solid var(--sdg-color-grey-light);
+    }
+
+    .mat-expansion-panel-header {
+      background-color: $grey-pale;
+      padding: 0 16px;
+
+      &-description {
+        justify-content: flex-end;
+        font-weight: normal;
+      }
+
+      &.cdk-keyboard-focused {
+        border: 2px solid var(--sdg-color-blue-light);
+      }
+
+      &.mat-expanded {
+        background-color: $grey-pale;
+      }
+    }
+
+    .mat-expansion-panel-body {
+      padding: 24px 16px;
+    }
+
+    &:hover {
+      outline: 1px solid var(--sdg-color-grey-light) !important;
+    }
+  }
+}

package/src/material/_form-field.scss

@@ -0,0 +1,140 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mat-mdc-form-field {
+    $blue-dark: var(--sdg-color-blue-dark);
+    $grey-medium: var(--sdg-color-grey-medium);
+    $red-normal: var(--sdg-color-red-normal);
+
+    $text-font: var(--sdg-font-family-text);
+    $text-line-height: var(--sdg-line-height-md);
+    $text-size: var(--sdg-font-size-md);
+
+    max-width: 100%;
+
+    @include mat.form-field-density(-4);
+
+    @include mat.form-field-overrides(
+      (
+        outlined-outline-width: 1px,
+        outlined-outline-color: $grey-medium,
+        outlined-disabled-input-text-color: $grey-medium,
+        outlined-disabled-outline-color: $grey-medium,
+        outlined-error-hover-outline-color: $red-normal,
+        outlined-focus-outline-width: 2px,
+        outlined-focus-outline-color: $blue-dark,
+        outlined-hover-outline-color: $grey-medium,
+        outlined-input-text-color: $blue-dark,
+        outlined-input-text-placeholder-color: $grey-medium,
+        outlined-container-shape: 0,
+        //
+        disabled-input-text-placeholder-color: $grey-medium,
+        //
+        error-text-color: $red-normal,
+        //
+        focus-state-layer-opacity: 0,
+        //
+        hover-state-layer-opacity: 0,
+        //
+        state-layer-color: transparent,
+        //
+        container-text-font: $text-font,
+        container-text-line-height: $text-line-height,
+        container-text-size: $text-size
+      )
+    );
+
+    &.mat-form-field-disabled {
+      .mdc-text-field {
+        background-color: var(--sdg-color-grey-pale);
+      }
+
+      mat-hint {
+        color: var(--sdg-color-grey-normal) !important;
+      }
+    }
+
+    .mdc-text-field {
+      background-color: var(--sdg-color-background);
+      padding: 0 8px;
+
+      &--focused {
+        outline: 2px solid var(--sdg-color-blue-light);
+      }
+
+      &--disabled {
+        background-color: var(--sdg-color-grey-pale);
+      }
+    }
+
+    &[xl] {
+      width: 825px;
+    }
+
+    &[lg],
+    &[multi] {
+      width: 528px;
+    }
+
+    &[md] {
+      width: 249px;
+    }
+
+    &[sm] {
+      width: 156px;
+    }
+
+    &[xs] {
+      width: 63px;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+      .mat-mdc-form-field-hint-wrapper {
+        padding: 0;
+
+        mat-hint {
+          padding-top: 4px;
+          font-family: $text-font;
+          font-weight: 400;
+          font-size: var(--sdg-font-size-sm);
+          line-height: var(--sdg-line-height-sm);
+          color: var(--sdg-color-grey-dark);
+        }
+      }
+    }
+
+    .mat-mdc-form-field-error-wrapper {
+      padding: 0;
+
+      mat-error {
+        display: flex;
+        align-items: center;
+        column-gap: 8px;
+        padding-top: 8px;
+        font-family: $text-font;
+        font-weight: 600;
+        font-size: $text-size;
+        line-height: $text-line-height;
+
+        mat-icon {
+          font-size: 24px;
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+
+  .mat-mdc-input-element {
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 8px;
+      height: auto;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--sdg-color-blue-piv);
+      border-radius: 4px;
+    }
+  }
+}

package/src/material/_icon.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  @include color-variants-backwards-compatibility();
+}
+
+// Material custom color variants backwards compatibility
+@mixin color-variants-backwards-compatibility() {
+  .mat-icon {
+    &.mat-accent {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-pink-normal)
+        )
+      );
+    }
+
+    &.mat-primary {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-blue-piv)
+        )
+      );
+    }
+
+    &.mat-warn {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-red-normal)
+        )
+      );
+    }
+  }
+}

package/src/material/_index.scss

@@ -0,0 +1,35 @@
+@use './button';
+@use './checkbox';
+@use './chip';
+@use './dialog';
+@use './divider';
+@use './expansion-panel';
+@use './form-field';
+@use './icon';
+@use './select';
+@use './sidenav';
+@use './radio-button';
+@use './tab';
+@use './theme' as theme-def;
+
+$theme: theme-def.$theme;
+$primary-palette: theme-def.$primary-palette;
+
+@mixin high-contrast-overrides($theme-type) {
+  @include theme-def.high-contrast-overrides($theme-type);
+}
+
+@mixin overrides() {
+  @include button.overrides();
+  @include checkbox.overrides();
+  @include chip.overrides();
+  @include dialog.overrides();
+  @include divider.overrides();
+  @include expansion-panel.overrides();
+  @include select.overrides();
+  @include form-field.overrides();
+  @include icon.overrides();
+  @include sidenav.overrides();
+  @include radio-button.overrides();
+  @include tab.overrides();
+}

package/src/material/_radio-button.scss

@@ -0,0 +1,124 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mat-mdc-radio-group {
+    display: flex;
+    flex-flow: column;
+    row-gap: 16px;
+  }
+
+  .mat-mdc-radio-button {
+    $disabled-color: var(--sdg-color-grey-light);
+    $unselected-color: var(--sdg-color-blue-dark);
+    $selected-color: var(--sdg-color-blue-normal);
+
+    $radio-button-size: 24px;
+    $size-with-padding: calc($radio-button-size + 4px);
+
+    @include mat.radio-overrides(
+      (
+        label-text-size: var(--sdg-font-size-md),
+        label-text-line-height: var(--sdg-font-size-md),
+        // same as font size to avoid extra space above and below
+        label-text-color: $unselected-color,
+
+        ripple-color: transparent,
+        checked-ripple-color: transparent,
+
+        disabled-label-color: $disabled-color,
+        disabled-unselected-icon-color: $disabled-color,
+        disabled-unselected-icon-opacity: 1,
+        disabled-selected-icon-color: $disabled-color,
+        disabled-selected-icon-opacity: 1,
+
+        unselected-icon-color: $unselected-color,
+        unselected-hover-icon-color: $unselected-color,
+        unselected-focus-icon-color: $selected-color,
+        unselected-pressed-icon-color: $selected-color,
+
+        selected-icon-color: $selected-color,
+        selected-hover-icon-color: $selected-color,
+        selected-focus-icon-color: $selected-color,
+        selected-pressed-icon-color: $selected-color,
+
+        state-layer-size: $size-with-padding
+      )
+    );
+
+    .mdc-radio {
+      height: $radio-button-size;
+      width: $radio-button-size;
+      padding: calc(
+        (var(--mat-radio-state-layer-size, 40px) - $radio-button-size) / 2
+      );
+
+      .mdc-radio__native-control:checked
+        + .mdc-radio__background
+        > .mdc-radio__inner-circle {
+        transform: scale(0.6);
+      }
+
+      .mdc-radio__background {
+        height: $radio-button-size;
+        width: $radio-button-size;
+
+        .mdc-radio__inner-circle {
+          border-width: calc($radio-button-size / 2);
+        }
+      }
+    }
+
+    .mat-mdc-radio-touch-target {
+      height: $size-with-padding;
+      width: $size-with-padding;
+    }
+
+    .mdc-form-field {
+      column-gap: 8px;
+
+      .mdc-label {
+        padding: 0;
+        transform: translateY(
+          1px
+        ); // visually center the label with the radio button
+      }
+    }
+
+    &[compact] {
+      $radio-button-size: 16px;
+      $size-with-padding: calc($radio-button-size + 4px);
+
+      @include mat.radio-overrides(
+        (
+          state-layer-size: $size-with-padding
+        )
+      );
+
+      .mdc-radio {
+        height: $radio-button-size;
+        width: $radio-button-size;
+        padding: calc(
+          (var(--mat-radio-state-layer-size, 40px) - $radio-button-size) / 2
+        );
+
+        .mdc-radio__background {
+          height: $radio-button-size;
+          width: $radio-button-size;
+
+          .mdc-radio__inner-circle {
+            border-width: calc($radio-button-size / 2);
+          }
+
+          .mdc-radio__outer-circle {
+            border-width: 1px;
+          }
+        }
+      }
+
+      .mat-mdc-radio-touch-target {
+        height: $size-with-padding;
+        width: $size-with-padding;
+      }
+    }
+  }
+}

package/src/material/_select.scss

@@ -0,0 +1,74 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  $blue-dark: var(--sdg-color-blue-dark);
+  $blue-piv: var(--sdg-color-blue-piv);
+  $grey-medium: var(--sdg-color-grey-medium);
+
+  $text-font: var(--sdg-font-family-text);
+  $text-line-height: var(--sdg-line-height-md);
+  $text-size: var(--sdg-font-size-md);
+
+  .mat-mdc-form-field {
+    @include mat.select-overrides(
+      (
+        enabled-trigger-text-color: $blue-dark,
+        enabled-arrow-color: $blue-piv,
+        //
+        disabled-trigger-text-color: $grey-medium,
+        disabled-arrow-color: var(--sdg-color-grey-normal),
+        //
+        placeholder-text-color: $grey-medium,
+        //
+        trigger-text-font: $text-font,
+        trigger-text-line-height: $text-line-height,
+        trigger-text-size: $text-size
+      )
+    );
+  }
+
+  .mat-mdc-select-panel {
+    @include mat.select-overrides(
+      (
+        container-elevation-shadow: none,
+        //
+        panel-background-color: var(--sdg-color-background)
+      )
+    );
+
+    padding: 0 !important;
+    border: 1px solid $grey-medium;
+    border-radius: 0 !important;
+
+    .mat-mdc-option {
+      min-height: 0;
+      padding: 8px;
+
+      .mdc-list-item__primary-text {
+        color: $blue-dark;
+        font-family: $text-font;
+        font-size: $text-size;
+        line-height: $text-line-height;
+      }
+
+      &:hover {
+        background-color: var(--sdg-color-grey-pale);
+      }
+
+      &-active {
+        background-color: var(--sdg-color-blue-pale) !important;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 8px;
+      height: auto;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $blue-piv;
+      border-radius: 4px;
+    }
+  }
+}

package/src/material/_sidenav.scss

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

package/src/material/_tab.scss

@@ -0,0 +1,95 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mat-mdc-tab-group {
+    $blue-piv: var(--sdg-color-blue-piv);
+    $blue-dark: var(--sdg-color-blue-dark);
+    $grey-pale: var(--sdg-color-grey-pale);
+
+    .mat-mdc-tab-labels {
+      column-gap: 24px;
+    }
+
+    .mdc-tab {
+      padding: 0 8px;
+      min-width: unset;
+
+      &--active {
+        font-weight: bold;
+      }
+
+      &:hover:not(&--active) {
+        .mdc-tab-indicator {
+          border-bottom: 4px solid $grey-pale;
+        }
+      }
+
+      &:focus {
+        .mdc-tab-indicator {
+          border: 2px solid var(--sdg-color-blue-light);
+        }
+      }
+    }
+
+    .mat-mdc-tab-header-pagination {
+      min-width: 40px;
+
+      &-after,
+      &-before {
+        padding: 0;
+      }
+
+      &-after {
+        .mat-mdc-tab-header-pagination-chevron {
+          transform: rotate(45deg) translateX(-2px);
+          height: 10px;
+          width: 10px;
+        }
+      }
+
+      &-before {
+        .mat-mdc-tab-header-pagination-chevron {
+          transform: rotate(225deg) translate(-2px, 2px);
+          height: 10px;
+          width: 10px;
+        }
+      }
+
+      &:hover {
+        background-color: $grey-pale;
+      }
+
+      &:active {
+        background-color: var(--sdg-color-blue-pale);
+      }
+    }
+
+    @include mat.tabs-overrides(
+      (
+        active-indicator-color: $blue-piv,
+        active-indicator-height: 4px,
+        active-hover-indicator-color: $blue-piv,
+        active-hover-label-text-color: $blue-dark,
+        active-focus-indicator-color: $blue-piv,
+        active-focus-label-text-color: $blue-dark,
+        active-ripple-color: transparent,
+        active-label-text-color: $blue-dark,
+        //
+        inactive-ripple-color: transparent,
+        inactive-label-text-color: $blue-piv,
+        inactive-focus-label-text-color: $blue-piv,
+        inactive-hover-label-text-color: $blue-piv,
+        //
+        divider-color: var(--sdg-color-grey-light),
+        divider-height: 1px,
+        //
+        label-text-size: var(--sdg-font-size-md),
+        label-text-line-height: var(--sdg-line-height-md),
+        //
+        pagination-icon-color: $blue-dark,
+        //
+        container-height: 40px
+      )
+    );
+  }
+}