@testgorilla/tgo-ui 2.20.0 → 2.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "lint-staged": {
     "src/**/*.ts": [
       "eslint --fix",

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

@@ -199,6 +199,10 @@
   .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
     &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
 
+      .mdc-text-field__input::placeholder {
+        color: $grayscale-50;
+      }
+
       .mat-mdc-form-field-hint.error,
       .mat-mdc-form-field-hint.error svg {
         color: $error-50;
@@ -263,7 +267,7 @@
 
         .mdc-notched-outline__notch {
           label {
-            color: $grayscale-40 !important;
+            color: $black !important;
           }
         }
 
@@ -282,7 +286,7 @@
         }
 
         .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-          color: $grayscale-40 !important;
+          color: $black !important;
         }
 
         .mdc-notched-outline__leading {
@@ -394,11 +398,11 @@
     }
   }
 
-  .mat-mdc-select-placeholder, .ui-field[theme="dark"] .mdc-text-field__input::placeholder {
+  .mat-mdc-select-placeholder {
     color: $grayscale-40;
   }
 
-  .ui-dropdown .mat-mdc-select, .ui-field[theme="dark"] .mdc-text-field__input {
+  .ui-dropdown .mat-mdc-select {
     color: $tgo-white;
   }
 }
@@ -444,6 +448,11 @@
   }
 }
 
+.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,
+.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label {
+  color: $black!important;
+}
+
 .mat-mdc-form-field {
   .mat-mdc-form-field-hint-wrapper {
     padding: 0;

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

@@ -30,38 +30,38 @@
 
 @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);
-    }
+  &: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);
-    }
+  &: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 {
@@ -100,9 +100,11 @@ body {
     .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()
     }
@@ -147,3 +149,103 @@ body {
     @include rebranded-tooltip-above()
   }
 }
+
+.template-tooltip {
+  padding: 8px;
+  background: $black;
+  color: $tgo-white;
+  border-radius: 6px;
+  border: 1px solid $tgo-white;
+}
+
+.top {
+  .template-tooltip {
+    @include rebranded-tooltip-above();
+
+    &:after {
+      bottom: -3px;
+    }
+  }
+}
+
+.bottom {
+  .template-tooltip {
+    @include rebranded-tooltip-below();
+
+    &:after {
+      top: -3px;
+    }
+  }
+}
+
+
+.right {
+  .template-tooltip {
+    @include rebranded-tooltip-right();
+
+    &:after {
+      left: -3px;
+    }
+  }
+}
+
+
+.left {
+  .template-tooltip {
+    @include rebranded-tooltip-left();
+
+    &:after {
+      right: -3px;
+    }
+  }
+}
+
+.template-tooltip {
+  padding: 8px;
+  background: $black;
+  color: $tgo-white;
+  border-radius: 6px;
+  border: 1px solid $tgo-white;
+}
+
+.top {
+  .template-tooltip {
+    @include rebranded-tooltip-above();
+
+    &:after {
+      bottom: -3px;
+    }
+  }
+}
+
+.bottom {
+  .template-tooltip {
+    @include rebranded-tooltip-below();
+
+    &:after {
+      top: -3px;
+    }
+  }
+}
+
+
+.right {
+  .template-tooltip {
+    @include rebranded-tooltip-right();
+
+    &:after {
+      left: -3px;
+    }
+  }
+}
+
+
+.left {
+  .template-tooltip {
+    @include rebranded-tooltip-left();
+
+    &:after {
+      right: -3px;
+    }
+  }
+}