Feature/PXS-6168 add premium theme

apps/golden-sample-app/project.json

@@ -30,7 +30,18 @@
  "output": "assets/transactions-journey"
  }
  ],
- "styles": ["apps/golden-sample-app/src/styles.scss"],
+ "styles": [
+ {
+ "input": "apps/golden-sample-app/src/styles.scss",
+ "bundleName": "theme-default",
+ "inject": true
+ },
+ {
+ "input": "apps/golden-sample-app/src/themes/theme-premium/main.scss",
+ "bundleName": "theme-premium",
+ "inject": false
+ }
+ ],
  "scripts": []
  },
  "configurations": {

apps/golden-sample-app/src/app/app.component.html

@@ -173,6 +173,7 @@
 
  <!-- Topbar Content Area (a.k.a. Right Topbar Area) -->
  <div class="bb-layout__topbar-content-area">
+ <app-theme-switcher class="mx-2"></app-theme-switcher>
  <app-locale-selector class="mx-2"></app-locale-selector>
  <div>
  <a routerLink="/accounts">

apps/golden-sample-app/src/app/app.module.ts

@@ -47,6 +47,8 @@ import { TrackerModule } from '@backbase/foundation-ang/observability';
 import { UserContextInterceptor } from './user-context/user-context.interceptor';
 import { ActivityMonitorModule } from './auth/activity-monitor';
 import packageInfo from 'package-json';
+import { ThemeSwitcherModule } from './theme-switcher/theme-switcher.component.module';
+import { ThemeManagerService } from './theme-switcher/theme-service';
 
 @NgModule({
  declarations: [AppComponent],
@@ -62,6 +64,7 @@ import packageInfo from 'package-json';
  NgbDropdownModule,
  AvatarModule,
  EntitlementsModule,
+ ThemeSwitcherModule,
  StoreModule.forRoot({}),
  EffectsModule.forRoot([]),
  OAuthModule.forRoot(),
@@ -170,6 +173,7 @@ import packageInfo from 'package-json';
  provide: ErrorHandler,
  useClass: AppErrorHandler,
  },
+ ThemeManagerService,
  ],
  bootstrap: [AppComponent],
 })

apps/golden-sample-app/src/app/theme-switcher/theme-service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ThemeManagerService {
+ public static THEMES = ['theme-default', 'theme-premium'];
+
+ setTheme(theme: string) {
+ const linkElement: HTMLLinkElement | null =
+ window.document.head.querySelector('link[rel="stylesheet"]');
+ if (!linkElement) return;
+ linkElement.href = `${theme}.css`;
+ }
+}

apps/golden-sample-app/src/app/theme-switcher/theme-switcher.component.html

@@ -0,0 +1,10 @@
+<div class="theme-selector">
+ <bb-dropdown-menu-ui
+ (select)="onSelect($event)"
+ [options]="themes"
+ ariaLabel="theme selector"
+ container="body"
+ icon="expand-more"
+ [label]="theme"
+ ></bb-dropdown-menu-ui>
+</div>

apps/golden-sample-app/src/app/theme-switcher/theme-switcher.component.module.ts

@@ -0,0 +1,10 @@
+import { DropdownMenuModule } from '@backbase/ui-ang/dropdown-menu';
+import { ThemeSwitcherComponent } from './theme-switcher.component';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+ declarations: [ThemeSwitcherComponent],
+ imports: [DropdownMenuModule],
+ exports: [ThemeSwitcherComponent],
+})
+export class ThemeSwitcherModule {}

apps/golden-sample-app/src/app/theme-switcher/theme-switcher.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { ThemeManagerService } from './theme-service';
+
+@Component({
+ selector: 'app-theme-switcher',
+ templateUrl: './theme-switcher.component.html',
+})
+export class ThemeSwitcherComponent {
+ constructor(private themeManagerService: ThemeManagerService) {}
+
+ @Input() theme = ThemeManagerService.THEMES[0];
+
+ themes = ThemeManagerService.THEMES;
+
+ onSelect(theme: string | object) {
+ if (typeof theme === 'string') {
+ this.themeManagerService.setTheme(theme);
+ this.theme = theme;
+ }
+ }
+}

apps/golden-sample-app/src/themes/theme-premium/main.scss

@@ -0,0 +1,3 @@
+@import "./variables";
+
+@import '@backbase/ui-ang/scss/main';

apps/golden-sample-app/src/themes/theme-premium/variables/_index.scss

@@ -0,0 +1 @@
+@import "./color";

apps/golden-sample-app/src/themes/theme-premium/variables/color/_background.scss

@@ -0,0 +1,65 @@
+$color-background-none: #00000000;
+$color-background-page: #f6f2f0ff;
+
+$color-background-surface-1: #fefefeff;
+$color-background-surface-1-hovered: #e8e0dbff;
+$color-background-surface-1-pressed: #d3c3baff;
+$color-background-surface-2: #f6f2f0ff;
+$color-background-surface-2-hovered: #e8e0dbff;
+$color-background-surface-2-pressed: #d3c3baff;
+$color-background-inverted: #33231aff;
+$color-background-overlay: #00000014;
+$color-background-overlay-hovered: #0000003d;
+$color-background-overlay-pressed: #0000005c;
+
+$color-background-brand-subtle: #e3dad4ff;
+$color-background-brand: #6e4930ff;
+$color-background-brand-hovered: #5d3d27ff;
+$color-background-brand-pressed: #392416ff;
+$color-background-neutral-subtle: #d3c3baff;
+$color-background-neutral: #977965ff;
+$color-background-neutral-hovered: #593b28ff;
+$color-background-neutral-pressed: #493122ff;
+$color-background-info-subtle: #dfe7ffff;
+$color-background-info: #295effff;
+$color-background-info-hovered: #1d42b2ff;
+$color-background-info-pressed: #17348cff;
+$color-background-success-subtle: #dbece2ff;
+$color-background-success: #0e813eff;
+$color-background-success-hovered: #0a5a2bff;
+$color-background-success-pressed: #084722ff;
+$color-background-warning-subtle: #fef6dfff;
+$color-background-warning: #fbc02dff;
+$color-background-warning-hovered: #b08620ff;
+$color-background-warning-pressed: #8a6a19ff;
+$color-background-danger-subtle: #f5dedbff;
+$color-background-danger: #bf2310ff;
+$color-background-danger-hovered: #86190bff;
+$color-background-danger-pressed: #691309ff;
+
+$color-background-category-1-subtle: #f6f2f0ff;
+$color-background-category-1: #e01700ff;
+$color-background-category-2-subtle: #e3dad4ff;
+$color-background-category-2: #392416ff;
+$color-background-category-3-subtle: #e3dad4ff;
+$color-background-category-3: #392416ff;
+$color-background-category-4-subtle: #e3dad4ff;
+$color-background-category-4: #392416ff;
+$color-background-category-5-subtle: #e3dad4ff;
+$color-background-category-5: #392416ff;
+$color-background-category-6-subtle: #e3dad4ff;
+$color-background-category-6: #392416ff;
+$color-background-category-7-subtle: #e3dad4ff;
+$color-background-category-7: #392416ff;
+$color-background-category-8-subtle: #e3dad4ff;
+$color-background-category-8: #392416ff;
+$color-background-category-9-subtle: #e3dad4ff;
+$color-background-category-9: #392416ff;
+$color-background-category-10-subtle: #e3dad4ff;
+$color-background-category-10: #392416ff;
+$color-background-on-color: #ffffffff;
+$color-background-on-color-hovered: #ffffffb8;
+$color-background-on-color-pressed: #ffffff8f;
+
+$color-background-disabled: #d3c3baff;
+$color-background-selected: #e3dad4ff;

apps/golden-sample-app/src/themes/theme-premium/variables/color/_border.scss

@@ -0,0 +1,8 @@
+$color-border-default: #977965;
+$color-border-subtle: #d3c3ba;
+$color-border-brand: #6e4930;
+$color-border-info: #295eff;
+$color-border-success: #0e813e;
+$color-border-warning: #8a6a19;
+$color-border-danger: #bf2310;
+$color-border-on-color: #ffffff;

apps/golden-sample-app/src/themes/theme-premium/variables/color/_focus.scss

@@ -0,0 +1,2 @@
+$color-focus-outline: #6e4930;
+$color-focus-on-color-outline: #fefefe;

apps/golden-sample-app/src/themes/theme-premium/variables/color/_foreground.scss

@@ -0,0 +1,19 @@
+$color-foreground-default: #33231a;
+$color-foreground-support: #593b28;
+$color-foreground-disabled: #977965;
+$color-foreground-brand: #6e4930;
+$color-foreground-info: #295eff;
+$color-foreground-success: #0e813e;
+$color-foreground-warning: #8a6a19;
+$color-foreground-danger: #691309;
+$color-foreground-category-1: #7b0d00;
+$color-foreground-category-2: #8c4600;
+$color-foreground-category-3: #82345b;
+$color-foreground-category-4: #17348c;
+$color-foreground-category-5: #390d72;
+$color-foreground-category-6: #ffffff;
+$color-foreground-category-7: #236949;
+$color-foreground-category-8: #436d0c;
+$color-foreground-category-9: #856707;
+$color-foreground-category-10: #202833;
+$color-foreground-on-color: #ffffff;

apps/golden-sample-app/src/themes/theme-premium/variables/color/_index.scss

@@ -0,0 +1,6 @@
+@import "background";
+@import "on-background";
+@import "foreground";
+@import "link";
+@import "border";
+@import "focus";

apps/golden-sample-app/src/themes/theme-premium/variables/color/_link.scss

@@ -0,0 +1,8 @@
+$color-link-default: #6e4930;
+$color-link-hovered: #5d3d27;
+$color-link-pressed: #392416;
+$color-link-disabled: #977965;
+$color-link-on-color-default: #fefefe;
+$color-link-on-color-hovered: #fefefe;
+$color-link-on-color-pressed: #fefefe;
+$color-link-on-color-disabled: #e0e5eb;

apps/golden-sample-app/src/themes/theme-premium/variables/color/_on-background.scss

@@ -0,0 +1,35 @@
+$color-on-background-brand-subtle: #392416ff;
+$color-on-background-brand: #ffffffff;
+$color-on-background-neutral-subtle: #493122ff;
+$color-on-background-neutral: #fefefeff;
+$color-on-background-info-subtle: #17348cff;
+$color-on-background-info: #ffffffff;
+$color-on-background-success-subtle: #084722ff;
+$color-on-background-success: #ffffffff;
+$color-on-background-warning-subtle: #8a6a19ff;
+$color-on-background-warning: #000000ff;
+$color-on-background-danger-subtle: #691309ff;
+$color-on-background-danger: #ffffffff;
+$color-on-background-on-color: #0c0705ff;
+$color-on-background-inverted: #ffffffff;
+
+$color-on-background-category-1-subtle: #392416ff;
+$color-on-background-category-1: #ffffffff;
+$color-on-background-category-2-subtle: #392416ff;
+$color-on-background-category-2: #ffffffff;
+$color-on-background-category-3-subtle: #392416ff;
+$color-on-background-category-3: #ffffffff;
+$color-on-background-category-4-subtle: #392416ff;
+$color-on-background-category-4: #ffffffff;
+$color-on-background-category-5-subtle: #392416ff;
+$color-on-background-category-5: #ffffffff;
+$color-on-background-category-6-subtle: #392416ff;
+$color-on-background-category-6: #ffffffff;
+$color-on-background-category-7-subtle: #392416ff;
+$color-on-background-category-7: #ffffffff;
+$color-on-background-category-8-subtle: #392416ff;
+$color-on-background-category-8: #ffffffff;
+$color-on-background-category-9-subtle: #392416ff;
+$color-on-background-category-9: #ffffffff;
+$color-on-background-category-10-subtle: #392416ff;
+$color-on-background-category-10: #ffffffff;

package.json

@@ -45,7 +45,7 @@
  "@backbase/internal-accessgroup-shared-data-access": "4.1.0",
  "@backbase/select-context-widget-ang": "8.2.0",
  "@backbase/transactions-http-ang": "^4.0.0",
- "@backbase/ui-ang": "^11.0.0",
+ "@backbase/ui-ang": "^11.11.0",
  "@material/animation": "^3.0.0",
  "@ng-bootstrap/ng-bootstrap": "^16.0.0",
  "@ng-select/ng-select": "^12.0.0",