@testgorilla/tgo-ui 2.6.0 → 2.6.2

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

@@ -0,0 +1,149 @@
+@use "./variables" as *;
+
+@mixin rebranded-tooltip {
+  background-color: $black;
+  border: 1px solid $tgo-white;
+  border-radius: 4px;
+  --mdc-plain-tooltip-container-color: none;
+  color: $tgo-white;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-white !important;
+}
+
+@mixin rebranded-tooltip-right {
+  margin-left: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    left: -8px;
+    top: calc(50% - 7px);
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(-135deg);
+    transition: all 1s;
+  }
+}
+
+@mixin rebranded-tooltip-left {
+  margin-right: 5px;
+    &:after {
+      content: "";
+      position: absolute;
+      right: -8px;
+      top: calc(50% - 7px);
+      height: 15px;
+      width: 15px;
+      border-top: 1px solid $tgo-white;
+      border-right: 1px solid $tgo-white;
+      background: $black;
+      z-index: 10;
+      border-top-right-radius: 4px;
+      transform: rotate(45deg);
+    }
+}
+
+@mixin rebranded-tooltip-below {
+  margin-top: 5px;
+    &:after {
+      content: "";
+      position: absolute;
+      right: calc(50% - 7px);
+      top: -8px;
+      height: 15px;
+      width: 15px;
+      border-top: 1px solid $tgo-white;
+      border-right: 1px solid $tgo-white;
+      background: $black;
+      z-index: 10;
+      border-top-right-radius: 4px;
+      transform: rotate(-45deg);
+    }
+}
+
+@mixin rebranded-tooltip-above {
+  margin-bottom: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    right: calc(50% - 7px);
+    bottom: -8px;
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(135deg);
+  }
+
+}
+
+.mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-weight: 600;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}
+
+body {
+  &[theme="dark"], &[theme="light"] {
+    .mat-mdc-tooltip {
+      @include rebranded-tooltip()
+    }
+    .mat-mdc-tooltip-panel-right .mdc-tooltip--shown {
+      @include rebranded-tooltip-right()
+    }
+    .mat-mdc-tooltip-panel-left .mdc-tooltip--shown {
+      @include rebranded-tooltip-left()
+    }
+
+    .mat-mdc-tooltip-panel-below .mdc-tooltip--shown {
+      @include rebranded-tooltip-below()
+    }
+
+    .mat-mdc-tooltip-panel-above .mdc-tooltip--shown {
+      @include rebranded-tooltip-above()
+    }
+  }
+}
+
+.mat-mdc-tooltip {
+  &.light, &.dark {
+    @include rebranded-tooltip()
+  }
+}
+
+.mat-mdc-tooltip-panel-right .mdc-tooltip--shown {
+  &.light, &.dark {
+    @include rebranded-tooltip-right()
+  }
+}
+
+
+.mat-mdc-tooltip-panel-left .mdc-tooltip--shown {
+  &.light, &.dark {
+    @include rebranded-tooltip-left()
+  }
+}
+
+.mat-mdc-tooltip-panel-below .mdc-tooltip--shown {
+  &.light, &.dark {
+    @include rebranded-tooltip-below()
+  }
+}
+
+.mat-mdc-tooltip-panel-above .mdc-tooltip--shown {
+  &.light, &.dark {
+    @include rebranded-tooltip-above()
+  }
+}

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

@@ -0,0 +1,261 @@
+@use "./variables" as *;
+
+// Headings
+h1,
+h2,
+h3,
+.h1,
+.h2,
+.h3 {
+  font-weight: 400;
+  margin: 0;
+}
+
+h4,
+h5,
+h6,
+.h4,
+.h5,
+.h6 {
+  font-weight: 700;
+  margin: 0;
+}
+
+h1,
+.h1 {
+  font-size: 40px;
+  line-height: 60px;
+  font-weight: 700;
+}
+
+h2,
+.h2 {
+  font-size: 24px;
+  line-height: 36px;
+
+  &.bold {
+    font-weight: 700;
+  }
+}
+
+h3,
+.h3 {
+  font-size: 20px;
+  line-height: 28px;
+
+  &.bold {
+    font-weight: 700;
+  }
+}
+
+h4,
+.h4 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+h5,
+.h5 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h6,
+.h6 {
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+
+body {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+strong, b {
+  font-weight: 700;
+}
+
+.featured {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+p,
+.featured,
+.caption {
+  .semibold {
+    font-weight: 600;
+    color: #46A997;
+  }
+}
+
+small {
+  font-size: 8px;
+  line-height: 12px;
+}
+
+caption,
+.caption {
+  font-size: 12px;
+  line-height: 16px;
+  display: inline-block;
+}
+
+@mixin font-style($type) {
+  @if ($type == 'body-large') {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 22px;
+  } @else if ($type == 'body-large-bold') {
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+  } @else if ($type == 'body-large-regular') {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  } @else if ($type == 'body-small-bold') {
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 16px;
+  } @else if ($type == 'body-large-regular') {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+  } @else if ($type == 'hyperlink-large') {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  } @else if ($type == 'hyperlink') {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+  } @else if ($type == 'hyperlink-small') {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+  } @else if ($type == 'button-label') {
+    font-weight: 500;
+    font-size: 14px;
+    font-feature-settings: "capb";
+  } @else if ($type == 'label') {
+    font-weight: 400;
+    font-size: 14px;
+    font-feature-settings: "capb";
+  } @else if ($type == 'large-hover-state') {
+    font-weight: bold;
+    text-decoration: underline;
+    font-size: 16px;
+    line-height: 24px;
+  } @else if ($type == 'hover-state') {
+    font-weight: bold;
+    text-decoration: underline;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+
+*[theme="dark"], *[theme="light"] {
+  h1,
+  .h1 {
+    color: $black;
+    font-size: 32px;
+    line-height: 48px;
+    font-weight: 400;
+
+    &.black {
+      font-family: "ModernGothic", sans-serif!important;
+      font-weight: 900;
+    }
+  }
+
+  h2,
+  .h2 {
+    color: $black;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 900;
+    font-family: "ModernGothic", sans-serif!important;
+  }
+
+  h3,
+  .h3 {
+    font-size: 20px;
+    line-height: 26px;
+    font-weight: 400;
+    color: $black;
+
+    &.bold {
+      font-family: "ModernGothic", sans-serif!important;
+      font-weight: 700;
+    }
+  }
+
+  h4,
+  .h4 {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+    color: $black;
+    font-family: "ModernGothic", sans-serif!important;
+  }
+
+  h5,
+  .h5 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 700;
+    color: $black;
+    font-family: "ModernGothic", sans-serif!important;
+  }
+
+  .body-large {
+    @include font-style('body-large');
+  }
+
+  .body-large-bold {
+    @include font-style('body-large-bold');
+  }
+
+  .body-large-regular {
+    @include font-style('body-large-regular');
+  }
+
+  .body-small-bold {
+    @include font-style('body-small-bold');
+  }
+
+  .body-small-regular {
+    @include font-style('body-small-regular');
+  }
+
+  .hyperlink-large {
+    @include font-style('hyperlink-large');
+  }
+
+  .hyperlink {
+    @include font-style('hyperlink');
+  }
+
+  .hyperlink-small {
+    @include font-style('hyperlink-small');
+  }
+
+  .button-label {
+    @include font-style('button-label');
+  }
+
+  .label {
+    @include font-style('label');
+  }
+
+  .large-hover-state {
+    @include font-style('large-hover-state');
+  }
+
+  .hover-state {
+    @include font-style('hover-state');
+  }
+}

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

@@ -0,0 +1,151 @@
+/* global */
+$background-color: #f6f6f6;
+$font-family: "Open Sans", sans-serif;
+// TODO: Remove this varible already declared in typography.scss
+$font-size: 14px;
+
+//colors
+//teal colors
+$tgo-teal-60b: #1C443C;
+$tgo-teal-30b: #31766A;
+$tgo-teal-default: #46A997;
+$tgo-teal-30w: #7EC3B6;
+$tgo-teal-60w: #B5DDD5;
+$tgo-teal-secondary: #CBD6CB;
+$tgo-teal-90w: #ECF6F5;
+
+//petrol colors
+$tgo-petrol-60b: #102930;
+$tgo-petrol-30b: #1B4754;
+$tgo-petrol-default: #276678;
+$tgo-petrol-30w: #6894A0;
+$tgo-petrol-60w: #A9C2C9;
+$tgo-petrol-secondary: #C8D7DE;
+$tgo-petrol-90w: #E9F0F1;
+
+//error colors
+$tgo-error-60b: #513131;
+$tgo-error-30b: #8E5655;
+$tgo-error-60w: #E3C3C6;
+$tgo-error-secondary: #F0DAD9;
+$tgo-error-default: #cb7b7a;
+
+//warning colors
+$tgo-warning-secondary: #F0D6BB;
+$tgo-warning-default: #cca45f;
+
+//black colors - grayscale
+$tgo-black: #000000;
+$tgo-dark: #888888;
+$tgo-medium: #E0E0E0;
+$tgo-grey: #EDEDED;
+$tgo-light: #F6F6F6;
+$tgo-white: #ffffff;
+
+//box-shadow
+$box-shadow: #00000014;
+
+$navigation-subtitle: #528593;
+
+// new colors
+$brand-60: #A90686;
+$brand-50: #D410AA;
+$brand-40: #FF54DA;
+$brand-30: #FFB3EE;
+$brand-20: #FFE6FA;
+$brand-10: #FFF2FC;
+
+$grayscale-50: #666666;
+$grayscale-40: #919191;
+$grayscale-30: #D3D3D3;
+$grayscale-20: #E9E9E9;
+$grayscale-10: #F4F4F4;
+
+$black: #242424;
+
+$accent-20: #FFF5ED;
+$accent-10: #FFFAF6;
+
+$informative-40: #0165FC;
+$informative-30: #277CFD;
+$informative-20: #99C1FE;
+$informative-10: #D9E8FF;
+
+$success-50: #88B901;
+$success-40: #A0D900;
+$success-30: #C6E866;
+$success-20: #E2F4B3;
+$success-10: #F5FAE3;
+
+$error-50: #E02800;
+$error-40: #FF3003;
+$error-30: #FF6E4F;
+$error-20: #FFAC9A;
+$error-10: #FFEAE6;
+
+$warning-50: #D07D00;
+$warning-40: #FF9A03;
+$warning-30: #FFC268;
+$warning-20: #FFE1B3;
+$warning-10: #FFF5E6;
+
+//resposive breakpoints
+$tgo-breakpoints: (
+  'small': 320px,
+  'medium': 600px,
+  'large': 1024px,
+) !default;
+
+$colors: (
+  'teal-60b': $tgo-teal-60b,
+  'teal-30b': $tgo-teal-30b,
+  'teal-default': $tgo-teal-default,
+  'teal-30w': $tgo-teal-30w,
+  'teal-60w': $tgo-teal-60w,
+  'teal-secondary': $tgo-teal-secondary,
+  'teal-90w': $tgo-teal-90w,
+
+  'petrol-60b': $tgo-petrol-60b,
+  'petrol-30b': $tgo-petrol-30b,
+  'petrol-default': $tgo-petrol-default,
+  'petrol-30w': $tgo-petrol-30w,
+  'petrol-60w': $tgo-petrol-60w,
+  'petrol-secondary': $tgo-petrol-secondary,
+  'petrol-90w': $tgo-petrol-90w,
+
+  'error-60b': $tgo-error-60b,
+  'error-30b': $tgo-error-30b,
+  'error-60w': $tgo-error-60w,
+  'error-secondary': $tgo-error-secondary,
+  'error-default': $tgo-error-default,
+
+  'warning-secondary': $tgo-warning-secondary,
+  'warning-default': $tgo-warning-default,
+
+  'black': $tgo-black,
+  'dark': $tgo-dark,
+  'medium': $tgo-medium,
+  'grey': $tgo-grey,
+  'light': $tgo-light,
+  'white': $tgo-white,
+
+  'box-shadow': $box-shadow,
+  'navigation-subtitle': $navigation-subtitle,
+);
+
+@each $colorName, $colorValue in $colors {
+  .bg-#{$colorName} {
+    background: $colorValue;
+  }
+}
+
+@each $colorName, $colorValue in $colors {
+  .bgc-#{$colorName} {
+    background-color: $colorValue;
+  }
+}
+
+$box-shadow-hover-state: 0px 4px 16px 0px #24242414;
+$box-shadow-notification: 0px 4px 16px 0px #2424240A;
+$box-shadow-page-card: 0px 4px 100px 0px #2424240A;
+$box-shadow-modal: 0px 4px 100px 0px #24242414;

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

@@ -0,0 +1,50 @@
+@use "palette.scss" as *;
+@use "core.scss" as *;
+@use "variables.scss" as *;
+@use "typography.scss" as *;
+@use "tooltip.scss" as *;
+@use "mat-paginator.scss" as *;
+@use "font.scss" as *;
+@use "input.scss" as *;
+
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+//TODO: MOVE TO THE CORRESPONDING COMPONENTS OR PARTIAL
+.hidden {
+  visibility: hidden;
+}
+
+*[theme="dark"], *[theme="light"] {
+  * {
+    font-family: "ModernGothic", sans-serif;
+    font-weight: 400;
+
+    .mat-mdc-elevation-specific.mat-elevation-z8  {
+      box-shadow: $box-shadow-modal!important;
+    }
+  };
+}
+
+//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;
+    }
+  }
+}