@igo2/sdg-core 1.0.0-next.100

package/src/style/overrides/material/_chip.scss

@@ -0,0 +1,122 @@
+@use '@angular/material' as mat;
+
+$focus-color: var(--sdg-color-blue-light);
+$white: var(--sdg-color-white);
+
+@mixin overrides() {
+  $border-outline-width: 2px;
+
+  .mat-mdc-chip-set {
+    .mdc-evolution-chip {
+      margin: 0;
+      min-height: 40px;
+      max-height: 60px;
+      min-width: 56px;
+
+      &-set__chips {
+        margin: 0;
+        gap: 8px;
+      }
+
+      &__action-primary {
+        padding-left: 4px;
+      }
+
+      &:focus-visible {
+        border: $border-outline-width solid $white;
+        outline: $border-outline-width solid $focus-color;
+      }
+    }
+  }
+
+  .mdc-evolution-chip__action {
+    &--presentational {
+      cursor: pointer;
+    }
+
+    &--primary:hover::before {
+      border-color: $focus-color !important;
+    }
+
+    &--primary:focus::before {
+      border-width: $border-outline-width;
+      outline: $border-outline-width solid $focus-color;
+    }
+  }
+
+  .mat-mdc-standard-chip {
+    &.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action {
+      &--primary {
+        padding-left: 8px;
+      }
+
+      &--trailing {
+        padding-left: 4px;
+        padding-right: 6px;
+      }
+    }
+
+    & .mdc-evolution-chip__action {
+      &--primary {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+
+  .mat-mdc-chip-remove {
+    &::after {
+      left: 2px;
+      right: 4px;
+    }
+
+    .mat-icon {
+      z-index: 1;
+    }
+  }
+
+  .mat-mdc-chip {
+    $background-color: var(--sdg-color-blue-pale);
+    $text-color: var(--sdg-color-blue-piv);
+    $disabled-background-color: var(--sdg-color-grey-pale);
+    $disabled-color: var(--sdg-color-grey-normal);
+
+    @include mat.chips-overrides(
+      (
+        container-shape-radius: 0,
+
+        outline-width: 1px,
+        outline-color: $background-color,
+
+        focus-outline-color: $white,
+        focus-state-layer-color: transparent,
+        focus-state-layer-opacity: 0,
+
+        disabled-outline-color: $disabled-background-color,
+        disabled-label-text-color: $disabled-color,
+        disabled-container-opacity: 1,
+
+        hover-state-layer-opacity: 0,
+        hover-state-layer-color: transparent,
+
+        elevated-container-color: $background-color,
+        elevated-selected-container-color: $background-color,
+        elevated-disabled-container-color: $disabled-background-color,
+
+        with-trailing-icon-disabled-trailing-icon-opacity: 1,
+        with-trailing-icon-disabled-trailing-icon-color: $disabled-color,
+        with-trailing-icon-trailing-icon-color: $text-color,
+
+        label-text-color: $text-color,
+        label-text-weight: 600,
+        label-text-line-height: var(--sdg-line-height-sm),
+        label-text-size: var(--sdg-font-size-sm),
+        trailing-action-focus-state-layer-opacity: 1,
+        trailing-action-hover-state-layer-opacity: 1,
+        trailing-action-state-layer-color: var(--sdg-color-grey-light),
+        trailing-action-focus-opacity: 1,
+        trailing-action-opacity: 1
+      )
+    );
+  }
+}

package/src/style/overrides/material/_dialog.scss

@@ -0,0 +1,37 @@
+@use '../../../style/typography-utils';
+
+@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 typography-utils.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/style/overrides/material/_divider.scss

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

package/src/style/overrides/material/_form-field.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../tokens/sys-colors';
+
+@mixin overrides() {
+  .mat-mdc-text-field-wrapper,
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__trailing {
+    border-radius: 0 !important;
+  }
+
+  @include mat.form-field-overrides(
+    (
+      outlined-outline-color: rgba(
+          map.get(sys-colors.$light-colors, 'black'),
+          0.38
+        )
+    )
+  );
+}

package/src/style/overrides/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/style/overrides/material/_index.scss

@@ -0,0 +1,25 @@
+@use './button';
+@use './checkbox';
+@use './chip';
+@use './dialog';
+@use './divider';
+@use './form-field';
+@use './icon';
+@use './input';
+@use './sidenav';
+@use './radio-button';
+@use './tab';
+
+@mixin overrides() {
+  @include button.overrides();
+  @include checkbox.overrides();
+  @include chip.overrides();
+  @include dialog.overrides();
+  @include divider.overrides();
+  @include form-field.overrides();
+  @include icon.overrides();
+  @include input.overrides();
+  @include sidenav.overrides();
+  @include radio-button.overrides();
+  @include tab.overrides();
+}

package/src/style/overrides/material/_input.scss

@@ -0,0 +1,5 @@
+@mixin overrides() {
+  .mat-mdc-input-element {
+    color: var(--sdg-color-grey-medium) !important;
+  }
+}

package/src/style/overrides/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(--mdc-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(--mdc-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/style/overrides/material/_sidenav.scss

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

package/src/style/overrides/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
+      )
+    );
+  }
+}

package/src/theme/_index.scss

@@ -0,0 +1 @@
+@forward './material' as material-*;

package/src/theme/material/_index.scss

@@ -0,0 +1 @@
+@forward './theme';