[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

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -1,69 +1,65 @@
-@mixin app-layout-theme($theme) {
-    $primary: map-get($theme, primary);
-    $minimumAppWidth: 320px;
 
-    @media screen and (max-width: 599px) {
-        app-search-bar {
-            width: 150px;
-        }
-    }
-
-    @media screen and (max-width: 350px) {
-        app-search-bar {
-            width: 100px;
-        }
-    }
-
-    adf-file-uploading-dialog {
-        z-index: 1100;
-    }
-
-    .app-layout {
-        display: flex;
-        flex: 1;
-        min-width: $minimumAppWidth;
-        height: 100%;
-
-        .app-sidenav-link--active {
-            color: mat-color($primary);
-        }
-
-        .app-sidenav-link {
-            .mat-list-text {
-                font-size: 14px;
-                white-space: nowrap;
-                min-width: 120px;
-                padding: 0 10px;
-            }
-        }
-
-        .mat-nav-list .mat-list-item.app-sidenav-link {
-            height: 40px;
-        }
-
-        &-menu-spacer {
-            flex: 1 1 auto;
-        }
-    }
-
-    @media screen and (max-width: 959px) {
-        .app-menu {
-            padding-top: 0;
-        }
-    }
-
-    @media screen and (max-width: 599px) {}
-
-    mat-sidenav-content > div {
-        display: flex;
-        height: 100%;
-
-        > div {
-            flex: auto;
-        }
-    }
-
-    [dir='rtl'] .app-sidenav-link__expand-button {
-        transform: rotateY(180deg);
+@media screen and (max-width: 599px) {
+    app-search-bar {
+        width: 150px;
     }
 }
+
+@media screen and (max-width: 350px) {
+    app-search-bar {
+        width: 100px;
+    }
+}
+
+adf-file-uploading-dialog {
+    z-index: 1100;
+}
+
+.app-layout {
+    display: flex;
+    flex: 1;
+    min-width: 320px;
+    height: 100%;
+
+    .app-sidenav-link--active {
+        color: var(--theme-primary-color);
+    }
+
+    .app-sidenav-link {
+        .mat-list-text {
+            font-size: 14px;
+            white-space: nowrap;
+            min-width: 120px;
+            padding: 0 10px;
+        }
+    }
+
+    .mat-nav-list .mat-list-item.app-sidenav-link {
+        height: 40px;
+    }
+
+    &-menu-spacer {
+        flex: 1 1 auto;
+    }
+}
+
+@media screen and (max-width: 959px) {
+    .app-menu {
+        padding-top: 0;
+    }
+}
+
+@media screen and (max-width: 599px) {}
+
+mat-sidenav-content > div {
+    display: flex;
+    height: 100%;
+
+    > div {
+        flex: auto;
+    }
+}
+
+[dir='rtl'] .app-sidenav-link__expand-button {
+    transform: rotateY(180deg);
+}

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -24,9 +24,8 @@ import { ThemePalette } from '@angular/material/core';
 
 @Component({
     templateUrl: './app-layout.component.html',
-    host: {
-        'class': 'app-layout'
-    },
+    styleUrls: ['./app-layout.component.scss'],
+    host: { 'class': 'app-layout' },
     encapsulation: ViewEncapsulation.None
 })
 export class AppLayoutComponent implements OnInit, OnDestroy {