Improve theming to reduce need to override in a hacky way (#4407)

src/frontend/packages/core/sass/_all-theme.scss

@@ -40,6 +40,7 @@
 @import '../src/shared/components/tile-selector-tile/tile-selector-tile.component.theme';
 @import '../src/shared/components/entity-summary-title/entity-summary-title.component.theme';
 @import '../src/shared/components/multiline-title/multiline-title.component.theme';
+@import '../src/shared/components/intro-screen/intro-screen.component.theme';
 @import '../src/features/user-profile/profile-info/profile-info.component.theme';
 @import '../src/core/stateful-icon/stateful-icon.component.theme';
 @import './components/mat-snack-bar.theme';
@@ -65,6 +66,8 @@
 @import '../../core/src/features/error-page/error-page/error-page.component.theme';
 @import '../../core/src/features/endpoints/backup-restore/restore-endpoints/restore-endpoints.component.theme';
 @import '../../core/src/features/metrics/metrics/metrics.component.theme';
+
+
 // Creates the app theme and applies it to the application
 // $theme = Angular Material Theme
 // $nav-theme - Colors for the Side Nav (optional)
@@ -136,4 +139,6 @@
   @include app-user-avatar-theme($theme, $app-theme);
   @include restore-endpoints-theme($theme, $app-theme);
   @include metrics-component-theme($theme, $app-theme);
+  @include intro-screen-theme($theme, $app-theme);
+
 }

src/frontend/packages/core/sass/components/hyperlinks.theme.scss

@@ -1,10 +1,12 @@
 // Hyperlinks
 @mixin app-hyperlinks($theme, $app-theme) {
-  $primary: map-get($theme, primary);
+  $link-color: map-get($app-theme, link-color);
+  $link-active-color: map-get($app-theme, link-active-color);
+
   a {
-    color: mat-color($primary);
+    color: $link-color;
     &:hover {
-      color: mat-color($primary, 700);
+      color: $link-active-color;
     }
   }
 }

src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss

@@ -17,7 +17,7 @@
 
   .side-nav {
     &__nav-toggle {
-      color: mat-color($side-nav-colors, text);
+      color: $side-nav-top-foreground;
     }
     &__inner {
       background-color: mat-color($side-nav-colors, background);
@@ -28,7 +28,7 @@
     }
     &__item {
       color: mat-color($side-nav-colors, text);
-      transition: color ease .3s;
+      transition: none;
       &:hover {
         background-color: $side-nav-hover-color;
         color: mat-color($side-nav-colors, hover-text);
@@ -40,7 +40,7 @@
       }
     }
     &__items {
-      color: map-get($app-theme, app-background-text-color);
+      color: mat-color($side-nav-colors, text);
     }
     &__logo-text {
       color: mat-contrast($primary, 500);

src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.theme.scss

@@ -0,0 +1,11 @@
+@mixin intro-screen-theme($theme, $app-theme) {
+  $intro-bg-color: map-get($app-theme, intro-screen-background-color);
+
+  @if $intro-bg-color {
+    // Remove background image from setup screen (e.g. upgrade screen)
+    app-intro-screen > .intro {
+      background-color: $intro-bg-color;
+      background-image: none;
+    }
+  }
+}

src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss

@@ -1,10 +1,33 @@
 @mixin app-user-avatar-theme($theme, $app-theme) {
   $primary: map-get($theme, primary);
+  $user-avatar-background-color: map-get($app-theme, user-avatar-background-color);
+  $user-avatar-foreground-color: map-get($app-theme, user-avatar-foreground-color);
+  $user-avatar-underflow-invert-colors: map-get($app-theme, user-avatar-underflow-invert-colors);
+  $user-avatar-header-invert-colors: map-get($app-theme, user-avatar-header-invert-colors);
 
   .user-avatar {
     &__initials {
-      background-color: mat-contrast($primary, 500);
-      color: mat-color($primary);
+      background-color: $user-avatar-background-color;
+      color: $user-avatar-foreground-color;
     }
   }
+
+  @if $user-avatar-underflow-invert-colors {
+    .user-avatar.user-avatar__large {
+      .user-avatar__initials {
+        background-color: $user-avatar-foreground-color;
+        color: $user-avatar-background-color;
+      }
+    }
+  }
+
+  @if $user-avatar-header-invert-colors {
+    .user-avatar {
+      .user-avatar__initials.user-avatar__header {
+        background-color: $user-avatar-foreground-color;
+        color: $user-avatar-background-color;
+      }
+    }
+  }
+
 }

src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.theme.scss

@@ -1,8 +1,10 @@
 @mixin app-user-profile-banner-component-theme($theme, $app-theme) {
   $primary: map-get($theme, primary);
   $foreground: mat-color($primary, default-contrast);
+
   .user-profile-banner {
-    background-color: mat-color($primary);
+    background-color: map-get($app-theme, underflow-background-color);
+    color: map-get($app-theme, underflow-foreground-color);
     &__avatar {
       color: $foreground;
     }

src/frontend/packages/devkit/src/lib/packages.ts

@@ -61,7 +61,11 @@ export interface AssetMetadata {
 }
 
 // Helpers for getting list of dirs in a dir
-const isDirectory = source => fs.lstatSync(source).isDirectory();
+const isDirectory = source => {
+  const realPath = fs.realpathSync(source);
+  const stats = fs.lstatSync(realPath);
+  return stats.isDirectory();
+}
 const getDirectories = source =>
   fs.readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);
 

src/frontend/packages/shared/src/components/stratos-title/stratos-title.component.theme.scss

@@ -1,6 +1,12 @@
 @mixin stratos-title-component-theme($theme, $app-theme) {
   $primary: map-get($theme, primary);
+  $show-title-text: map-get($app-theme, stratos-title-show-text);
   .stratos-title {
     color: mat-color($primary);
+    @if $show-title-text {
+      .stratos-title__header {
+        display: initial;
+      }
+    }
   }
 }

src/frontend/packages/theme/_helper.scss

@@ -75,11 +75,19 @@ $oss-dark-theme: mat-dark-theme($oss-dark-primary, $oss-dark-accent, $oss-dark-w
       ansi-colors: $ansi-color-palette,
       header-background-color: mat-color($primary),
       header-foreground-color: mat-contrast($primary, 500),
+      stratos-title-show-text: false,
       // Does the header background color span across the top, or is the sidenav background color used for the top-left portion
       header-background-span: false,
       // Background colors to use for things like the about page header (underflow)
       underflow-background-color: mat-color($primary),
-      underflow-foreground-color: mat-contrast($primary, 500)
+      underflow-foreground-color: mat-contrast($primary, 500),
+      link-color: mat-color($primary),
+      link-active-color: mat-color($primary, 700),
+      user-avatar-background-color: mat-color($primary),
+      user-avatar-foreground-color: mat-contrast($primary, 500),
+      user-avatar-underflow-invert-colors: true,
+      user-avatar-header-invert-colors: true,
+      intro-screen-background-color: null
     )
   );
 }