@igo2/sdg-core 2.0.0-next.1 → 2.0.0-next.3

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

@@ -1,120 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin overrides() {
-  .mat-mdc-checkbox {
-    $disabled-color: var(--sdg-color-grey-light);
-    $unselected-color: var(--sdg-color-blue-dark);
-    $selected-color: var(--sdg-color-blue-normal);
-
-    $base-size: 8px;
-    $checkbox-size: calc($base-size * 3);
-    $size-with-padding: var(--mat-checkbox-state-layer-size);
-
-    @include mat.checkbox-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,
-
-        disabled-label-color: $disabled-color,
-        disabled-unselected-icon-color: $disabled-color,
-        disabled-selected-checkmark-color: var(--sdg-color-grey-pale),
-        disabled-selected-icon-color: $disabled-color,
-
-        unselected-icon-color: $unselected-color,
-        unselected-hover-icon-color: $unselected-color,
-        unselected-focus-icon-color: $selected-color,
-
-        unselected-hover-state-layer-opacity: 0,
-        unselected-focus-state-layer-opacity: 0,
-        unselected-pressed-state-layer-opacity: 0,
-
-        unselected-hover-state-layer-color: transparent,
-        unselected-focus-state-layer-color: transparent,
-        unselected-pressed-state-layer-color: transparent,
-
-        selected-icon-color: $selected-color,
-        selected-hover-icon-color: $selected-color,
-        selected-focus-icon-color: $selected-color,
-        selected-pressed-icon-color: $selected-color,
-
-        selected-hover-state-layer-opacity: 0,
-        selected-focus-state-layer-opacity: 0,
-        selected-pressed-state-layer-opacity: 0,
-
-        selected-hover-state-layer-color: transparent,
-        selected-focus-state-layer-color: transparent,
-        selected-pressed-state-layer-color: transparent
-      )
-    );
-
-    .mdc-checkbox__native-control {
-      top: calc($base-size / 2);
-      left: calc($base-size / 2);
-      right: calc($base-size / 2);
-
-      &:focus:checked ~ .mdc-checkbox__background {
-        border-color: $unselected-color;
-      }
-    }
-
-    .mdc-checkbox {
-      height: $checkbox-size;
-      width: $checkbox-size;
-      flex-basis: $checkbox-size;
-
-      .mdc-checkbox__background {
-        height: $checkbox-size;
-        width: $checkbox-size;
-        border-radius: 0px;
-      }
-    }
-
-    .mat-mdc-checkbox-touch-target {
-      height: $size-with-padding;
-      width: $size-with-padding;
-    }
-
-    .mdc-label {
-      padding-left: 0;
-      transform: translateY(
-        1px
-      ); // visually center the label with the radio button
-    }
-
-    &[compact] {
-      $checkbox-size: calc($base-size * 2);
-      $size-with-padding: calc($checkbox-size + ($base-size * 2));
-
-      @include mat.checkbox-overrides(
-        (
-          state-layer-size: $size-with-padding
-        )
-      );
-
-      .mdc-checkbox__native-control {
-        top: 0;
-        left: 0;
-        right: 0;
-      }
-
-      .mdc-checkbox {
-        height: $checkbox-size;
-        width: $checkbox-size;
-        flex-basis: $checkbox-size;
-
-        .mdc-checkbox__background {
-          height: $checkbox-size;
-          width: $checkbox-size;
-          border-width: 1px;
-        }
-      }
-
-      .mat-mdc-checkbox-touch-target {
-        height: $size-with-padding;
-        width: $size-with-padding;
-      }
-    }
-  }
-}

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

@@ -1,122 +0,0 @@
-@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

@@ -1,37 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-@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/_expansion-panel.scss

@@ -1,62 +0,0 @@
-@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/style/overrides/material/_form-field.scss

@@ -1,140 +0,0 @@
-@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/style/overrides/material/_icon.scss

@@ -1,34 +0,0 @@
-@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

@@ -1,27 +0,0 @@
-@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';
-
-@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/style/overrides/material/_radio-button.scss

@@ -1,124 +0,0 @@
-@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;
-      }
-    }
-  }
-}