@testgorilla/tgo-ui 2.7.0 → 2.7.2

package/package.json

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

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

@@ -362,6 +362,55 @@
   }
 }
 
+// this overrides for dark ui-dropdown used in coderunner only. will be removed with proper rebranded dark theme
+*[theme="dark"], .dark {
+  &, .ui-field[theme="dark"] {
+    .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
+      &:hover, &.mdc-text-field--focused, & {
+        .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+          border-color: $tgo-white !important;
+        }
+
+        .mat-mdc-form-field-flex {
+          .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $grayscale-40 !important;
+          }
+        }
+
+        ui-icon svg {
+          color: $grayscale-40 !important;
+        }
+      }
+    }
+  }
+
+  .ui-dropdown-list.mat-accent {
+    background-color: $grayscale-50;
+
+    mat-option {
+      background-color: $grayscale-50 !important;
+
+      &:hover, &.mat-mdc-option-active {
+        background-color: $grayscale-40 !important;
+      }
+
+      &, &.mat-mdc-option-active {
+        .mdc-list-item__primary-text {
+          color: $tgo-white !important;
+        }
+      }
+    }
+  }
+
+  .mat-mdc-select-placeholder, .ui-field[theme="dark"] .mdc-text-field__input::placeholder {
+    color: $grayscale-40;
+  }
+
+  .ui-dropdown .mat-mdc-select, .ui-field[theme="dark"] .mdc-text-field__input {
+    color: $tgo-white;
+  }
+}
+
 .cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
   border-radius: 10px !important;
   box-shadow: $box-shadow-hover-state;