@testgorilla/tgo-ui 2.6.0 → 2.6.2

package/projects/tgo-canopy-ui/theme/_font.scss

@@ -0,0 +1,95 @@
+@font-face {
+  font-display: swap;
+  font-weight: 900;
+  font-style: normal;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Black.otf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-weight: 900;
+  font-style: italic;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-BlackItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Bold.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-BoldItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Medium.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-MediumItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Regular.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Italic.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Light.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-LightItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-Thin.otf') format('truetype');
+}
+
+@font-face {
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+  font-family: 'ModernGothic';
+  src: url('./fonts/ModernGothic-ThinItalic.otf') format('truetype');
+}

package/projects/tgo-canopy-ui/theme/_input.scss

@@ -0,0 +1,429 @@
+@use "variables.scss" as *;
+
+.active-field {
+  .mdc-notched-outline__leading {
+    border-left-width: 2px;
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__notch {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__trailing {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+    border-right-width: 2px;
+  }
+}
+
+*[theme="classic"] {
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-hint.error,
+    .mat-mdc-form-field-hint.error svg {
+      color: $tgo-error-default;
+    }
+  }
+
+  .mat-mdc-form-field:not(.mat-warn) {
+    &.mat-form-field-appearance-outline {
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+
+        &:hover, &.mdc-text-field--focused {
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+            top: 21px !important;
+          }
+
+          @extend .active-field;
+
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $tgo-petrol-default !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $tgo-petrol-default !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+*[theme="dark"], *[theme="light"], .dark, .light {
+
+  &.phone-number-select {
+    margin-top: 8px;
+    border-radius: 10px!important;
+    box-shadow: $box-shadow-hover-state;
+
+    .country-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .mat-mdc-option {
+      --mat-option-selected-state-layer-color: #{$grayscale-10};
+      --mat-option-selected-state-label-text-color: #{$black};
+
+      .mdc-list-item__primary-text small {
+        font-size: 14px;
+      }
+
+      .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
+        color: $black;
+        width: 12px;
+        height: 5px;
+      }
+      &:hover {
+        background-color: $brand-10;
+      }
+    }
+
+    .mat-divider {
+      display: none;
+    }
+  }
+
+  .mat-mdc-autocomplete-panel, &.mat-mdc-autocomplete-panel {
+    box-shadow: $box-shadow-hover-state;
+    border-radius: 10px;
+    .mat-mdc-option.selected-option,
+    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
+      &:hover {
+        background: var(--ui-autocomplete-option-color) !important;
+      }
+      background: $grayscale-10!important;
+    }
+    .mat-mdc-option:hover:not(.mdc-list-item--disabled)     {
+      background: var(--ui-autocomplete-option-color) !important;
+    }
+
+    .mat-mdc-option:active:not(.mdc-list-item--disabled)     {
+      background: var(--ui-autocomplete-option-color) !important;
+    }
+
+    .mat-mdc-option {
+      .mdc-list-item__primary-text, span {
+        color: $black!important;
+        font-weight: 400;
+      }
+    }
+
+    .mat-mdc-optgroup-label {
+      .mdc-list-item__primary-text {
+        font-size: 14px!important;
+      }
+    }
+
+    .mat-mdc-optgroup {
+      .mdc-list-item__primary-text {
+        color: $black!important;
+        text-transform: lowercase;
+      }
+
+      .mdc-list-item__primary-text:first-letter {
+        text-transform: uppercase!important;
+      }
+    }
+  }
+
+  .ui-dropdown-list, &.ui-dropdown-list {
+    .mat-mdc-option .mat-mdc-focus-indicator {
+      display: none;
+    }
+
+    .mat-mdc-option, .mat-option-section .section-title {
+      color: $black!important;
+    }
+
+    .mat-mdc-option-multiple .mat-pseudo-checkbox {
+      border-radius: 4px;
+      border-width: 1px;
+      border-color: $black;
+    }
+
+    .mat-mdc-option .mat-pseudo-checkbox-minimal {
+      transform: scale(0.9);
+    }
+
+    &.mat-warn mat-option,
+    &.mat-accent mat-option,
+    &.mat-accent .mat-mdc-option-multiple {
+      &:hover {
+        background: $brand-10!important;
+      }
+
+      &:active {
+        background: $brand-20!important;
+      }
+
+      &.mat-mdc-option-active,
+      &.mdc-list-item--selected {
+        background-color: $grayscale-10!important;
+
+        .mdc-list-item__primary-text, .mat-pseudo-checkbox-checked:after {
+          color: $black!important;
+        }
+
+        &:hover:not(.mdc-list-item--disabled),
+        &:focus:not(.mdc-list-item--disabled) {
+          background-color: $grayscale-10;
+        }
+      }
+    }
+
+    .mat-mdc-option-multiple.mdc-list-item--selected .mat-pseudo-checkbox-full {
+      background: $brand-50;
+      border-color: $brand-50;
+      &:after {
+        border-color: $tgo-white;
+      }
+    }
+  }
+
+  .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
+    &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
+
+      .mat-mdc-form-field-hint.error,
+      .mat-mdc-form-field-hint.error svg {
+        color: $error-50;
+        row-gap: 0;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        padding: 4px 0 0 0;
+        min-height: 24px;
+
+        &:after, &:before {
+          display: none;
+        }
+      }
+
+      input, .mat-text-field__input {
+        caret-color: $black !important;
+      }
+
+      &.mat-focused {
+        ui-icon:not(.clear) {
+          svg {
+            color: $black;
+          }
+        }
+      }
+
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+
+        &:hover {
+          ui-icon {
+            svg {
+              color: $black!important;
+            }
+          }
+        }
+
+        ui-icon {
+          svg {
+            color: $grayscale-40!important;
+          }
+        }
+
+        .value-tag {
+          ui-icon {
+            svg {
+              color: $black!important;
+            }
+          }
+
+          &:hover {
+            ui-icon {
+              svg {
+                color: $tgo-white!important;
+              }
+            }
+          }
+        }
+
+        .mdc-notched-outline__notch {
+          label {
+            color: $grayscale-40 !important;
+          }
+        }
+
+        &.mdc-text-field--disabled {
+          * {
+            border-color: $grayscale-30!important;
+            color: $grayscale-30!important;
+            pointer-events: none!important;
+          }
+
+          .mdc-notched-outline__notch {
+            label {
+              color: $grayscale-20 !important;
+            }
+          }
+        }
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+          color: $grayscale-40 !important;
+        }
+
+        .mdc-notched-outline__leading {
+          border-top-left-radius: 10px;
+          border-bottom-left-radius: 10px;
+        }
+
+        .mdc-notched-outline__trailing {
+          border-top-right-radius: 10px;
+          border-bottom-right-radius: 10px;
+        }
+
+        &:hover {
+          .mat-mdc-form-field-icon-prefix svg {
+            color: $black !important;
+          }
+
+          .password .icon-only-wrapper svg {
+            color: $black !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+            top: 21px !important;
+          }
+        }
+
+        &:hover, &.mdc-text-field--focused {
+          .mat-mdc-form-field-icon-prefix svg {
+            color: $black !important;
+          }
+
+          @extend .active-field;
+
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $black !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $black !important;
+          }
+        }
+      }
+
+      &.mat-warn {
+        mat-label {
+          color: $error-50!important;
+        }
+
+        .mat-mdc-form-field-hint.error {
+          color: $error-50 !important;
+
+          a {
+            color: $error-50!important;
+          }
+
+
+          svg {
+            color: $error-50 !important;
+          }
+        }
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+          color: $error-50 !important;
+        }
+
+        .mat-mdc-text-field-wrapper {
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $error-50 !important;
+          }
+
+          &:hover, &.mdc-text-field--focused {
+            .mat-mdc-form-field-icon-prefix svg {
+              color: $error-50 !important;
+            }
+
+            @extend .active-field;
+
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $error-50 !important;
+            }
+
+            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+              color: $error-50 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
+  border-radius: 10px !important;
+  box-shadow: $box-shadow-hover-state;
+
+  &.mat-accent mat-option,
+  &.mat-accent .mat-mdc-option-multiple {
+    &:hover:not(.mdc-list-item--disabled),
+    &:focus:not(.mdc-list-item--disabled) {
+      background-color: $tgo-medium;
+    }
+
+    &.mat-mdc-option-active,
+    &.mdc-list-item--selected {
+      background-color: $tgo-petrol-90w;
+      color: $tgo-black;
+      &:hover:not(.mdc-list-item--disabled),
+      &:focus:not(.mdc-list-item--disabled) {
+        background-color: $tgo-petrol-secondary;
+      }
+    }
+  }
+
+  &.mat-warn mat-option,
+  &.mat-warn .mat-mdc-option-multiple {
+    &:hover:not(.mdc-list-item--disabled),
+    &:focus:not(.mdc-list-item--disabled) {
+      background-color: $tgo-medium;
+    }
+
+    &.mat-mdc-option-active,
+    &.mdc-list-item--selected {
+      background-color: $tgo-error-secondary;
+      color: $tgo-black;
+      &:hover:not(.mdc-list-item--disabled),
+      &:focus:not(.mdc-list-item--disabled) {
+        background-color: $tgo-error-60w;
+      }
+    }
+  }
+}
+
+.mat-mdc-form-field {
+  .mat-mdc-form-field-hint-wrapper {
+    padding: 0;
+  }
+
+  .mat-mdc-form-field-hint:before {
+    height: 2px;
+  }
+
+  .mat-mdc-form-field-hint.error {
+    display: flex;
+    flex-flow: column;
+    row-gap: 4px;
+
+    .errors {
+      ui-icon {
+        margin-right: 4px;
+      }
+
+      align-items: center;
+      display: flex;
+    }
+  }
+}

package/projects/tgo-canopy-ui/theme/_lib-styles.scss

@@ -0,0 +1,35 @@
+@use "variables.scss" as *;
+@use "tooltip.scss" as *;
+@use "mat-paginator.scss" as *;
+@use "core.scss" as *;
+
+*[theme="dark"], *[theme="light"] {
+  * {
+    font-family: "ModernGothic", sans-serif !important;
+    font-weight: 400;
+  };
+}
+
+//custom scss for the angular material components
+.mat-mdc-card {
+  border-radius: 8px !important;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1) !important;
+  padding: 32px 32px 16px 32px !important;
+  border-width: 0 !important;
+}
+
+/** Mat password strength */
+mat-password-strength-info {
+  .mat-mdc-card {
+    box-shadow: none !important;
+    place-content: stretch start !important;
+    padding: 15px 0 !important;
+
+    .mat-icon {
+      font-size: 20px;
+      position: relative;
+      top: 3px;
+      margin: 0px !important;
+    }
+  }
+}

package/projects/tgo-canopy-ui/theme/_mat-paginator.scss

@@ -0,0 +1,59 @@
+@use "./variables" as *;
+
+.mat-mdc-paginator {
+
+  .mdc-text-field--focused {
+    .mdc-notched-outline__leading, .mdc-notched-outline__trailing, .mdc-notched-outline__notch {
+      border-color: $tgo-petrol-default !important;
+    }
+  }
+
+  .mat-mdc-select {
+    &[aria-expanded="false"] {
+      .mat-mdc-select-arrow {
+        @extend .select-arrow;
+        background-image: url('/icons/Arrow_down.svg');
+      }
+
+      &[aria-disabled="true"] {
+        .mat-mdc-select-arrow {
+          opacity: 0.2 !important;
+        }
+      }
+    }
+
+    &[aria-expanded="true"] {
+      .mat-mdc-select-arrow {
+        @extend .select-arrow;
+        background-image: url('/icons/Arrow_up.svg');
+      }
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}
+
+.mdc-menu-surface {
+  &[aria-labelledby*="mat-paginator"] {
+    mat-option {
+      &[aria-selected="true"] {
+        background: $tgo-petrol-90w!important;
+
+        .mdc-list-item__primary-text {
+          color: black!important;
+        }
+      }
+    }
+  }
+}
+
+.select-arrow {
+  left: -4px;
+  top: 0;
+  width: 22px;
+  height: 23px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

package/projects/tgo-canopy-ui/theme/_palette.scss

@@ -0,0 +1,108 @@
+@use "@angular/material" as mat;
+@include mat.core();
+//teal
+$tgo-teal-palette: (
+  50: #ECF6F5,
+  //secondary teal
+  100: #CBD6CB,
+  200: #B5DDD5,
+  300: #7EC3B6,
+  400: #55B9A6,
+  500: #46A997,
+  600: #347E70,
+  700: #31766A,
+  800: #2B685D,
+  900: #1C443C,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+  ),
+);
+
+//petrol
+$tgo-petrol-palette: (
+  50: #E9F0F1,
+  //secondary petrol
+  100: #C8D7DE,
+  200: #A9C2C9,
+  300: #6894A0,
+  400: #368DA6,
+  500: #276678,
+  600: #1F5261,
+  700: #1B4754,
+  800: #183F4A,
+  900: #102930,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+  ),
+);
+
+$tgo-error-palette: (
+  50: #ffffff,
+  //secondary error
+  100: #F0DAD9,
+  200: #E3C3C6,
+  300: #DCA7A6,
+  400: #D49190,
+  500: #cb7b7a,
+  600: #C26564,
+  700: #BA4F4E,
+  800: #8E5655,
+  900: #513131,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+  ),
+);
+
+//teal
+$tgo-teal: mat.define-palette($tgo-teal-palette, 500);
+$tgo-light-palette: mat.define-palette($tgo-teal-palette, 50);
+//petrol
+$tgo-petrol: mat.define-palette($tgo-petrol-palette, 500);
+//error
+$tgo-error: mat.define-palette($tgo-error-palette, 500);
+//typography
+$tgo-typography: mat.define-typography-config(
+  $font-family: "'Open Sans', sans-serif",
+  $body-1: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
+  $body-2: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
+  $button: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
+);
+
+$my-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $tgo-teal,
+      accent: $tgo-petrol,
+      light: $tgo-light-palette,
+      warn: $tgo-error,
+    ),
+    typography: $tgo-typography,
+  )
+);
+@include mat.typography-hierarchy($tgo-typography);
+@include mat.all-component-themes($my-theme);