@testgorilla/tgo-ui 2.5.2 → 2.5.3

package/src/theme/_tooltip.scss

@@ -1,149 +0,0 @@
-@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/src/theme/_typography.scss

@@ -1,261 +0,0 @@
-@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/src/theme/_variables.scss

@@ -1,151 +0,0 @@
-/* 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/src/theme/theme.scss

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