@testgorilla/tgo-ui 6.2.2 → 6.2.4

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

@@ -1,13 +1,14 @@
-@use "variables.scss" as *;
-@use "tooltip.scss" as *;
-@use "mat-paginator.scss" as *;
-@use "core.scss" as *;
+@use 'variables.scss' as *;
+@use 'tooltip.scss' as *;
+@use 'mat-paginator.scss' as *;
+@use 'core.scss' as *;
 
-*[theme="dark"], *[theme="light"] {
+*[theme='dark'],
+*[theme='light'] {
   * {
-    font-family: "ModernGothic", sans-serif !important;
+    font-family: 'ModernGothic', sans-serif !important;
     font-weight: 400;
-  };
+  }
 }
 
 //custom scss for the angular material components

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

@@ -1,28 +1,29 @@
-@use "./variables" as *;
+@use './variables' as *;
 
 .mat-mdc-paginator {
-
   .mdc-text-field--focused {
-    .mdc-notched-outline__leading, .mdc-notched-outline__trailing, .mdc-notched-outline__notch {
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__trailing,
+    .mdc-notched-outline__notch {
       border-color: $tgo-petrol-default !important;
     }
   }
 
   .mat-mdc-select {
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
       .mat-mdc-select-arrow {
         @extend .select-arrow;
         background-image: url('/icons/Arrow_down.svg');
       }
 
-      &[aria-disabled="true"] {
+      &[aria-disabled='true'] {
         .mat-mdc-select-arrow {
           opacity: 0.2 !important;
         }
       }
     }
 
-    &[aria-expanded="true"] {
+    &[aria-expanded='true'] {
       .mat-mdc-select-arrow {
         @extend .select-arrow;
         background-image: url('/icons/Arrow_up.svg');
@@ -36,13 +37,13 @@
 }
 
 .mdc-menu-surface {
-  &[aria-labelledby*="mat-paginator"] {
+  &[aria-labelledby*='mat-paginator'] {
     mat-option {
-      &[aria-selected="true"] {
-        background: $tgo-petrol-90w!important;
+      &[aria-selected='true'] {
+        background: $tgo-petrol-90w !important;
 
         .mdc-list-item__primary-text {
-          color: black!important;
+          color: black !important;
         }
       }
     }

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

@@ -1,19 +1,19 @@
-@use "@angular/material" as mat;
+@use '@angular/material' as mat;
 @include mat.elevation-classes();
 @include mat.app-background();
 //teal
 $tgo-teal-palette: (
-  50: #ECF6F5,
+  50: #ecf6f5,
   //secondary teal
-  100: #CBD6CB,
-  200: #B5DDD5,
-  300: #7EC3B6,
-  400: #55B9A6,
-  500: #46A997,
-  600: #347E70,
-  700: #31766A,
-  800: #2B685D,
-  900: #1C443C,
+  100: #cbd6cb,
+  200: #b5ddd5,
+  300: #7ec3b6,
+  400: #55b9a6,
+  500: #46a997,
+  600: #347e70,
+  700: #31766a,
+  800: #2b685d,
+  900: #1c443c,
   contrast: (
     50: #000000,
     100: #000000,
@@ -30,16 +30,16 @@ $tgo-teal-palette: (
 
 //petrol
 $tgo-petrol-palette: (
-  50: #E9F0F1,
+  50: #e9f0f1,
   //secondary petrol
-  100: #C8D7DE,
-  200: #A9C2C9,
-  300: #6894A0,
-  400: #368DA6,
+  100: #c8d7de,
+  200: #a9c2c9,
+  300: #6894a0,
+  400: #368da6,
   500: #276678,
-  600: #1F5261,
-  700: #1B4754,
-  800: #183F4A,
+  600: #1f5261,
+  700: #1b4754,
+  800: #183f4a,
   900: #102930,
   contrast: (
     50: #000000,
@@ -56,14 +56,14 @@ $tgo-petrol-palette: (
 $tgo-error-palette: (
   50: #ffffff,
   //secondary error
-  100: #F0DAD9,
-  200: #E3C3C6,
-  300: #DCA7A6,
-  400: #D49190,
+  100: #f0dad9,
+  200: #e3c3c6,
+  300: #dca7a6,
+  400: #d49190,
   500: #cb7b7a,
-  600: #C26564,
-  700: #BA4F4E,
-  800: #8E5655,
+  600: #c26564,
+  700: #ba4f4e,
+  800: #8e5655,
   900: #513131,
   contrast: (
     50: #000000,
@@ -89,9 +89,21 @@ $tgo-error: mat.m2-define-palette($tgo-error-palette, 500);
 //typography
 $tgo-typography: mat.m2-define-typography-config(
   $font-family: "'Open Sans', sans-serif",
-  $body-1: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $body-2: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $button: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
+  $body-1:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
+  $body-2:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
+  $button:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
 );
 
 $my-theme: mat.m2-define-light-theme(

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

@@ -1,4 +1,4 @@
-@use "./variables" as *;
+@use './variables' as *;
 
 @mixin rebranded-tooltip {
   background-color: $black;
@@ -12,7 +12,7 @@
 @mixin rebranded-tooltip-right {
   margin-left: 5px;
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     left: -8px;
     top: calc(50% - 7px);
@@ -30,7 +30,7 @@
 @mixin rebranded-tooltip-left {
   margin-right: 5px;
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     right: -8px;
     top: calc(50% - 7px);
@@ -48,7 +48,7 @@
 @mixin rebranded-tooltip-below {
   margin-top: 5px;
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     right: calc(50% - 7px);
     top: -8px;
@@ -66,7 +66,7 @@
 @mixin rebranded-tooltip-above {
   margin-bottom: 5px;
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     right: calc(50% - 7px);
     bottom: -8px;
@@ -79,7 +79,6 @@
     border-top-right-radius: 4px;
     transform: rotate(135deg);
   }
-
 }
 
 .mat-mdc-tooltip {
@@ -95,57 +94,62 @@
 }
 
 body {
-  &[theme="dark"], &[theme="light"] {
+  &[theme='dark'],
+  &[theme='light'] {
     .mat-mdc-tooltip {
-      @include rebranded-tooltip()
+      @include rebranded-tooltip();
     }
 
     .mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-right()
+      @include rebranded-tooltip-right();
     }
 
     .mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-left()
+      @include rebranded-tooltip-left();
     }
 
     .mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-below()
+      @include rebranded-tooltip-below();
     }
 
     .mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-above()
+      @include rebranded-tooltip-above();
     }
   }
 }
 
 .mat-mdc-tooltip {
-  &.light, &.dark {
-    @include rebranded-tooltip()
+  &.light,
+  &.dark {
+    @include rebranded-tooltip();
   }
 }
 
 .mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-right()
+  &.light,
+  &.dark {
+    @include rebranded-tooltip-right();
   }
 }
 
-
 .mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-left()
+  &.light,
+  &.dark {
+    @include rebranded-tooltip-left();
   }
 }
 
 .mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-below()
+  &.light,
+  &.dark {
+    @include rebranded-tooltip-below();
   }
 }
 
 .mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-above()
+  &.light,
+  &.dark {
+    @include rebranded-tooltip-above();
   }
 }
 
@@ -177,19 +181,17 @@ body {
   }
 }
 
-
 .right {
   .template-tooltip {
     @include rebranded-tooltip-right();
 
     &:after {
-      transition: none!important;
+      transition: none !important;
       left: -3px;
     }
   }
 }
 
-
 .left {
   .template-tooltip {
     @include rebranded-tooltip-left();
@@ -239,7 +241,6 @@ body {
   }
 }
 
-
 .right {
   .template-tooltip {
     @include rebranded-tooltip-right();
@@ -250,7 +251,6 @@ body {
   }
 }
 
-
 .left {
   .template-tooltip {
     @include rebranded-tooltip-left();
@@ -281,7 +281,7 @@ body {
 .label-definition {
   &-inner {
     display: flex;
-    font-weight: bold!important;
+    font-weight: bold !important;
     font-size: 12px;
     line-height: 16px;
   }
@@ -310,7 +310,7 @@ body {
 }
 
 .text-definition {
-  font-weight: normal!important;
+  font-weight: normal !important;
   font-size: 12px;
   line-height: 16px;
 }

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

@@ -1,4 +1,4 @@
-@use "./variables" as *;
+@use './variables' as *;
 
 // Headings
 h1,
@@ -72,7 +72,8 @@ body {
   line-height: 20px;
 }
 
-strong, b {
+strong,
+b {
   font-weight: 700 !important;
 }
 
@@ -86,7 +87,7 @@ p,
 .caption {
   .semibold {
     font-weight: 600;
-    color: #46A997;
+    color: #46a997;
   }
 }
 
@@ -142,11 +143,11 @@ caption,
   } @else if ($type == 'button-label') {
     font-weight: 500;
     font-size: 14px;
-    font-feature-settings: "capb";
+    font-feature-settings: 'capb';
   } @else if ($type == 'label') {
     font-weight: 400;
     font-size: 14px;
-    font-feature-settings: "capb";
+    font-feature-settings: 'capb';
   } @else if ($type == 'large-hover-state') {
     font-weight: bold;
     text-decoration: underline;
@@ -160,8 +161,8 @@ caption,
   }
 }
 
-
-*[theme="dark"], *[theme="light"] {
+*[theme='dark'],
+*[theme='light'] {
   h1,
   .h1 {
     color: $black;
@@ -170,7 +171,7 @@ caption,
     font-weight: 400;
 
     &.black {
-      font-family: "ModernGothic", sans-serif!important;
+      font-family: 'ModernGothic', sans-serif !important;
       font-weight: 900;
     }
   }
@@ -181,7 +182,7 @@ caption,
     font-size: 24px;
     line-height: 30px;
     font-weight: 900;
-    font-family: "ModernGothic", sans-serif!important;
+    font-family: 'ModernGothic', sans-serif !important;
   }
 
   h3,
@@ -192,7 +193,7 @@ caption,
     color: $black;
 
     &.bold {
-      font-family: "ModernGothic", sans-serif!important;
+      font-family: 'ModernGothic', sans-serif !important;
       font-weight: 700;
     }
   }
@@ -203,7 +204,7 @@ caption,
     line-height: 20px;
     font-weight: 700;
     color: $black;
-    font-family: "ModernGothic", sans-serif!important;
+    font-family: 'ModernGothic', sans-serif !important;
   }
 
   h5,
@@ -212,7 +213,7 @@ caption,
     line-height: 18px;
     font-weight: 700;
     color: $black;
-    font-family: "ModernGothic", sans-serif!important;
+    font-family: 'ModernGothic', sans-serif !important;
   }
 
   .body-large {
@@ -264,8 +265,17 @@ caption,
   }
 }
 
-*[theme="dark"] {
-  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, {
+*[theme='dark'] {
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5 {
     color: $tgo-white;
   }
 }

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

@@ -1,45 +1,45 @@
 /* global */
 $background-color: #f6f6f6;
-$font-family: "Open Sans", sans-serif;
+$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;
+$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-30b: #1b4754;
 $tgo-petrol-default: #276678;
-$tgo-petrol-30w: #6894A0;
-$tgo-petrol-60w: #A9C2C9;
-$tgo-petrol-secondary: #C8D7DE;
-$tgo-petrol-90w: #E9F0F1;
+$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-30b: #8e5655;
+$tgo-error-60w: #e3c3c6;
+$tgo-error-secondary: #f0dad9;
 $tgo-error-default: #cb7b7a;
 
 //warning colors
-$tgo-warning-secondary: #F0D6BB;
+$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-medium: #e0e0e0;
+$tgo-grey: #ededed;
+$tgo-light: #f6f6f6;
 $tgo-white: #ffffff;
 
 //box-shadow
@@ -49,50 +49,50 @@ $box-shadow-rebrand: #24242414;
 $navigation-subtitle: #528593;
 
 // new colors
-$brand-60: #A90686;
-$brand-50: #D410AA;
-$brand-40: #FF54DA;
-$brand-30: #FFB3EE;
-$brand-20: #FFE6FA;
-$brand-10: #FFF2FC;
+$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;
+$grayscale-30: #d3d3d3;
+$grayscale-20: #e9e9e9;
+$grayscale-10: #f4f4f4;
 
 $black: #242424;
 
-$accent-20: #FFF5ED;
-$accent-10: #FFFAF6;
+$accent-20: #fff5ed;
+$accent-10: #fffaf6;
 
-$informative-50: #1A47AA;
-$informative-40: #0165FC;
-$informative-30: #277CFD;
-$informative-20: #99C1FE;
-$informative-10: #D9E8FF;
+$informative-50: #1a47aa;
+$informative-40: #0165fc;
+$informative-30: #277cfd;
+$informative-20: #99c1fe;
+$informative-10: #d9e8ff;
 
-$success-50: #3C9A13;
-$success-40: #56C71A;
-$success-30: #80D63E;
-$success-20: #AAE47A;
-$success-10: #D4F2C3;
+$success-50: #3c9a13;
+$success-40: #56c71a;
+$success-30: #80d63e;
+$success-20: #aae47a;
+$success-10: #d4f2c3;
 
-$error-50: #E02800;
-$error-40: #FF3003;
-$error-30: #FF6E4F;
-$error-20: #FFAC9A;
-$error-10: #FFEAE6;
+$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;
+$warning-50: #d07d00;
+$warning-40: #ff9a03;
+$warning-30: #ffc268;
+$warning-20: #ffe1b3;
+$warning-10: #fff5e6;
 
-$ai-gradient-blue: #0165FC;
-$ai-gradient-pink: #D410AA;
+$ai-gradient-blue: #0165fc;
+$ai-gradient-pink: #d410aa;
 
 //resposive breakpoints
 $tgo-breakpoints: (
@@ -153,8 +153,8 @@ $colors: (
 }
 
 $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-notification: 0px 4px 16px 0px #2424240a;
+$box-shadow-page-card: 0px 4px 100px 0px #2424240a;
 $box-shadow-modal: 0px 4px 100px 0px #24242414;
 
 @mixin ai-gradient-background() {
@@ -163,5 +163,5 @@ $box-shadow-modal: 0px 4px 100px 0px #24242414;
 
 @mixin ai-gradient-border() {
   background: linear-gradient(to left, white, white),
-  linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
+    linear-gradient(to right, $ai-gradient-pink 25%, $ai-gradient-blue 100%);
 }

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

@@ -1,37 +1,38 @@
-@use "palette.scss" as *;
-@use "core.scss" as *;
-@use "variables.scss" as *;
-@use "typography.scss" as *;
-@use "tooltip.scss" as *;
-@use "mat-menu.scss" as *;
-@use "mat-paginator.scss" as *;
-@use "font.scss" as *;
-@use "input.scss" as *;
-@use "button.scss" as *;
-@use "icon.scss" as *;
-@use "line-clamp.scss" as *;
+@use 'palette.scss' as *;
+@use 'core.scss' as *;
+@use 'variables.scss' as *;
+@use 'typography.scss' as *;
+@use 'tooltip.scss' as *;
+@use 'mat-menu.scss' as *;
+@use 'mat-paginator.scss' as *;
+@use 'font.scss' as *;
+@use 'input.scss' as *;
+@use 'button.scss' as *;
+@use 'icon.scss' as *;
+@use 'line-clamp.scss' as *;
 
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@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"] {
+*[theme='dark'],
+*[theme='light'] {
   * {
-    font-family: "ModernGothic", sans-serif;
+    font-family: 'ModernGothic', sans-serif;
     font-weight: 400;
 
-    .mat-mdc-elevation-specific.mat-elevation-z8  {
-      box-shadow: $box-shadow-modal!important;
+    .mat-mdc-elevation-specific.mat-elevation-z8 {
+      box-shadow: $box-shadow-modal !important;
       border-radius: 10px;
     }
 
     .mat-mdc-menu-panel {
       max-width: fit-content;
     }
-  };
+  }
 }
 
 //custom scss for the angular material components