diff --git a/src/frontend/packages/core/sass/_all-theme.scss b/src/frontend/packages/core/sass/_all-theme.scss index 67ae92ae8b..950f0d84f3 100644 --- a/src/frontend/packages/core/sass/_all-theme.scss +++ b/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); + } diff --git a/src/frontend/packages/core/sass/components/hyperlinks.theme.scss b/src/frontend/packages/core/sass/components/hyperlinks.theme.scss index e0ab11dd8f..471c2b0284 100644 --- a/src/frontend/packages/core/sass/components/hyperlinks.theme.scss +++ b/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; } } } diff --git a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss b/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss index e4023c6b4c..b74eb57f55 100644 --- a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss +++ b/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); diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.theme.scss b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.theme.scss new file mode 100644 index 0000000000..77ece6a973 --- /dev/null +++ b/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; + } + } +} diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss index bc5856b7f3..62c8f12e2c 100644 --- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss +++ b/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; + } + } + } + } diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.theme.scss b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.theme.scss index e0e10450c4..460ba1399c 100644 --- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.theme.scss +++ b/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; } diff --git a/src/frontend/packages/devkit/src/lib/packages.ts b/src/frontend/packages/devkit/src/lib/packages.ts index 0cc801f990..aa051f26d5 100644 --- a/src/frontend/packages/devkit/src/lib/packages.ts +++ b/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); diff --git a/src/frontend/packages/shared/src/components/stratos-title/stratos-title.component.theme.scss b/src/frontend/packages/shared/src/components/stratos-title/stratos-title.component.theme.scss index 56e8a4a125..9b3138909f 100644 --- a/src/frontend/packages/shared/src/components/stratos-title/stratos-title.component.theme.scss +++ b/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; + } + } } } diff --git a/src/frontend/packages/theme/_helper.scss b/src/frontend/packages/theme/_helper.scss index ba0c49c6c9..7b9015f992 100644 --- a/src/frontend/packages/theme/_helper.scss +++ b/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 ) ); }