Modern theme

src/omnibar/omnibar.spec.ts

@@ -320,6 +320,27 @@ describe('Omnibar', () => {
     expect(placeholderAccentStyle.display).toBe('none');
   });
 
+  it('should apply pre-defined styles when the theme name is "modern"', () => {
+    loadOmnibar({
+      theme: {
+        name: 'modern'
+      }
+    });
+
+    const placeholderEl = getPlaceholderEl();
+    const placeholderStyle = getComputedStyle(placeholderEl);
+
+    const placeholderAccentEl = getPlaceholderAccentEl();
+    const placeholderAccentStyle = getComputedStyle(placeholderAccentEl);
+
+    expect(placeholderStyle.backgroundColor).toBe('rgb(255, 255, 255)');
+    expect(placeholderStyle.borderBottomColor).toBe('rgb(226, 227, 228)');
+    expect(placeholderStyle.borderBottomStyle).toBe('solid');
+    expect(placeholderStyle.borderBottomWidth).toBe('1px');
+
+    expect(placeholderAccentStyle.height).toBe('4px');
+  });
+
   it('should disable redirect when the session ends and allow anonymous is true', (done) => {
     postOmnibarMessageSpy.and.callFake(
       (iframeEl: HTMLIFrameElement, data: any) => {

src/omnibar/omnibar.ts

@@ -118,11 +118,19 @@ function collapseIframe(): void {
 
 function addStyleEl(): void {
   let accentCss = 'background: linear-gradient(to right, #71bf44 0, #31b986 50%, #00b2ec 100%);';
+  let accentHeight = '5px';
   let backgroundColor = '#4d5259';
+  let borderBottom = 'none';
 
   const theme = omnibarConfig.theme;
 
   if (theme) {
+    if (theme.name === 'modern') {
+      accentHeight = '4px';
+      backgroundColor = '#fff';
+      borderBottom = 'solid 1px #e2e3e4';
+    }
+
     const accent = theme.accent;
 
     backgroundColor = theme.backgroundColor || backgroundColor;
@@ -159,11 +167,12 @@ body {
 
 .sky-omnibar-placeholder {
   background-color: ${backgroundColor};
+  border-bottom: ${borderBottom};
   display: none;
 }
 
 .sky-omnibar-placeholder-accent {
-  height: 5px;
+  height: ${accentHeight};
   ${accentCss}
 }
 

src/omnibar/theming/omnibar-theme.ts

@@ -18,4 +18,8 @@ export interface BBOmnibarTheme {
 
   iconColor?: string;
 
+  name?: string;
+
+  mode?: string;
+
 }