[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)

* remove default-class mixin and use regular import

* cleanup colors

* remove variables file, fix bugs in animations

* proper ordering of imports, core css vars

* cleanup snackbar and material themes

* tags component

* login component styles

* app login

* toolbar component styles

* breadcrumb styles

* dropdown breadcrumb

* app layout component

* demo shell: files component

* aspect list styles

* content metadata styles

* node selector

* name location cell

* node share dialog

* content type dialog

* folder dialog

* document list

* datatable theme

* pagination theme

* viewer theme

* viewer theme

* user-info theme

* container widget

* dynamic table theme

* form widgets

* form theme

* form renderer

* sidebar menu

* header theme

* info drawer theme

* comment list

* commens and layout container

* sidenav layout

* empty content

* error content

* clipboard theme

* search input

* tooltip card and notification history

* card view theme

* remove unused keys

* add permission dialog

* search and permission dialogs

* version comparison and column themes

* upload drag area and cleanup references

* remove the need for content styles

* insight components

* cleanup insights theme

* process components

* process components

* process cloud themes

* cleanup unsed imports

* cleanup mixins

* update build scripts

* test fixes

* remove fdescribe

* css fixes

* update unit tests

lib/core/search-text/search-text-input.component.scss

@@ -0,0 +1,36 @@
+.adf-search-container {
+    overflow: hidden !important;
+}
+
+.adf-search-button {
+    left: -13px;
+}
+
+[dir='rtl'] .adf-search-button {
+    right: -13px;
+}
+
+[dir='ltr'] .adf-search-button {
+    left: -13px;
+}
+
+.adf {
+
+    &-search-fixed-text {
+        line-height: normal;
+    }
+
+    &-input-form-field-divider {
+        .mat-form-field-underline {
+            background-color: var(--adf-search-input-bg-color);
+            .mat-form-field-ripple {
+                background-color: var(--adf-search-input-bg-color);
+            }
+        }
+        font-size: 16px;
+    }
+}
+
+.adf-highlight {
+    color: var(--adf-search-input-highlight-color);
+}

lib/core/search-text/search-text-input.component.ts

@@ -26,6 +26,7 @@ import { SearchTextStateEnum, SearchAnimationState, SearchAnimationDirection } f
 @Component({
     selector: 'adf-search-text-input',
     templateUrl: './search-text-input.component.html',
+    styleUrls: ['./search-text-input.component.scss'],
     animations: [searchAnimation],
     encapsulation: ViewEncapsulation.None,
     host: {

lib/core/search-text/search-text-input.theme.scss

@@ -1,46 +0,0 @@
-@mixin adf-search-text-input-theme($theme) {
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $mat-menu-border-radius: 2px !default;
-    $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
-    $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
-
-    .adf-search-container {
-        overflow: hidden !important;
-    }
-
-    .adf-search-button {
-        left: -13px;
-    }
-
-    [dir='rtl'] .adf-search-button {
-        right: -13px;
-    }
-
-    [dir='ltr'] .adf-search-button {
-        left: -13px;
-    }
-
-    .adf {
-
-        &-search-fixed-text {
-            line-height: normal;
-        }
-
-        &-input-form-field-divider {
-            .mat-form-field-underline {
-                background-color: mat-color($primary, 50);
-                .mat-form-field-ripple {
-                    background-color: mat-color($primary, 50);
-                }
-            }
-            font-size: 16px;
-        }
-    }
-
-    .adf-highlight {
-        color: mat-color($primary, 900);
-    }
-}