feat(bridge): Introduce keptn color scheme #5081 (#6577)

* append the custom look and feel stylesheet to the body, so that it overrides all other styles (stylesheet link type is body-ok, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com> * create keptn-theme.css and load via app-config.json Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com> * use color variables from theme.css Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com> * set dt-icon-color Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com> * create background color Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com> * fix dropdown color in app header Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>
keptn · Jan 17, 2022 · 9915466 · 9915466
1 parent c7e7273
commit 9915466
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 31 deletions.
diff --git a/bridge/client/_barista.scss b/bridge/client/_barista.scss
diff --git a/bridge/client/_variables.scss b/bridge/client/_variables.scss
@@ -1,9 +1,5 @@
 $base-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans' sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-$primary-color: #006bb8;
-$secondary-color: #002c66;
-$link-icon-color: #00a1b2;
-
 /* sequence and task status colors */
 $aborted-color: #b7b7b7;
 $approval-color: #2ab6f4;

diff --git a/...pp/_components/ktb-deployment-stage-timeline/ktb-deployment-stage-timeline.component.scss b/...pp/_components/ktb-deployment-stage-timeline/ktb-deployment-stage-timeline.component.scss
@@ -30,5 +30,5 @@
 }
 
 .link-icon {
-  fill: $link-icon-color;
+  fill: var(--dt-theme-main-default-color);
 }
diff --git a/bridge/client/app/_components/ktb-keptn-services-list/ktb-keptn-services-list.component.scss b/bridge/client/app/_components/ktb-keptn-services-list/ktb-keptn-services-list.component.scss
@@ -16,7 +16,7 @@
 }
 
 .info {
-  fill: $primary-color;
+  fill: var(--dt-theme-main-default-color);
 }
 
 .no-integration-selected {

diff --git a/bridge/client/app/_components/ktb-notification-bar/ktb-notification-bar.component.scss b/bridge/client/app/_components/ktb-notification-bar/ktb-notification-bar.component.scss
@@ -52,7 +52,7 @@
 }
 
 .info-note {
-  background-color: $secondary-color;
+  background-color: var(--dt-theme-main-active-color);
 }
 .error-note {
   background-color: $error-color;

diff --git a/bridge/client/app/_components/ktb-project-tile/ktb-project-tile.component.scss b/bridge/client/app/_components/ktb-project-tile/ktb-project-tile.component.scss
@@ -14,7 +14,7 @@
   height: 16px;
 
   &.info {
-    fill: $primary-color;
+    fill: var(--dt-theme-main-default-color);
   }
   &.error {
     fill: $error-color;

diff --git a/bridge/client/app/_components/ktb-service-details/ktb-service-details.component.scss b/bridge/client/app/_components/ktb-service-details/ktb-service-details.component.scss
@@ -19,5 +19,5 @@ code {
 }
 
 .info {
-  fill: $primary-color;
+  fill: var(--dt-theme-main-default-color);
 }
diff --git a/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.scss b/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.scss
@@ -3,7 +3,7 @@
 
 :host {
   width: 100%;
-  border: 1px solid $turquoise-600;
+  border: 1px solid var(--dt-theme-main-default-color);
   background: #ffffff;
 }
 
@@ -14,7 +14,7 @@
 }
 
 .select-overlay-header {
-  background: $turquoise-600;
+  background: var(--dt-theme-main-default-color);
 
   > div {
     color: #ffffff;
@@ -30,7 +30,7 @@
     height: 0;
     border-style: solid;
     border-width: 0 15px 15px 15px;
-    border-color: transparent transparent $turquoise-600 transparent;
+    border-color: transparent transparent var(--dt-theme-main-default-color) transparent;
   }
 
   > div > .dt-icon {

diff --git a/bridge/client/app/_components/ktb-webhook-settings/ktb-webhook-settings.component.scss b/bridge/client/app/_components/ktb-webhook-settings/ktb-webhook-settings.component.scss
@@ -13,7 +13,7 @@
 .dt-icon.info {
   width: 16px;
   height: 16px;
-  fill: $primary-color;
+  fill: var(--dt-theme-main-default-color);
 }
 
 .send-finished-input + .dt-overlay-trigger {

diff --git a/bridge/client/app/_services/app.init.ts b/bridge/client/app/_services/app.init.ts
@@ -22,13 +22,13 @@ export class AppInitService {
               });
 
               if (window.config?.stylesheetUrl) {
-                const head = document.getElementsByTagName('head')[0];
+                const body = document.getElementsByTagName('body')[0];
                 const link = document.createElement('link');
                 link.setAttribute('rel', 'stylesheet');
                 link.setAttribute('type', 'text/css');
                 link.setAttribute('href', window.config.stylesheetUrl);
                 link.setAttribute('media', 'all');
-                head.appendChild(link);
+                body.appendChild(link);
               }
             }
           } catch (err) {

diff --git a/bridge/client/app/app-header/app-header.component.scss b/bridge/client/app/app-header/app-header.component.scss
@@ -3,11 +3,11 @@
 
 dt-top-bar-navigation {
   color: #fff;
-  background-color: $primary-color;
+  background-color: var(--dt-theme-main-default-color);
   height: auto;
 
   .dt-top-bar-action {
-    background-color: $primary-color;
+    background-color: var(--dt-theme-main-default-color);
   }
 
   .brand {
@@ -40,7 +40,7 @@ dt-top-bar-navigation {
     word-break: break-all;
   }
   a:hover {
-    color: lighten($primary-color, 55%);
+    color: var(--dt-theme-main-hover-color);
   }
 
   .dt-icon.error {
@@ -65,6 +65,6 @@ dt-select#projectSelect {
     border-radius: 3px;
   }
   ::ng-deep .dt-select-arrow svg {
-    fill: #fff;
+    fill: #fff !important;
   }
 }
diff --git a/bridge/client/app/dashboard/dashboard.component.scss b/bridge/client/app/dashboard/dashboard.component.scss
@@ -22,7 +22,7 @@
   bottom: 30px;
   left: 190px;
   background-color: #ffffff;
-  border: 1px solid $primary-color;
+  border: 1px solid var(--dt-theme-main-default-color);
   border-radius: 5px;
   z-index: 2;
 

diff --git a/bridge/client/assets/default-branding/app-config.json b/bridge/client/assets/default-branding/app-config.json
@@ -1,5 +1,6 @@
 {
   "appTitle": "keptn",
   "logoUrl": "assets/default-branding/logo.png",
-  "logoInvertedUrl": "assets/default-branding/logo_inverted.png"
+  "logoInvertedUrl": "assets/default-branding/logo_inverted.png",
+  "stylesheetUrl": "assets/default-branding/keptn-theme.css"
 }
diff --git a/bridge/client/assets/default-branding/keptn-theme.css b/bridge/client/assets/default-branding/keptn-theme.css
@@ -0,0 +1,94 @@
+:root {
+  --dt-theme-main-default-color: #006bb8;
+  --dt-theme-main-hover-color: #0058A8;
+  --dt-theme-main-active-color: #004EA0;
+  --dt-theme-main-background-color: #C2E5FF;
+  --dt-warning-default-color: #c9a000;
+  --dt-warning-hover-color: #ab8300;
+  --dt-warning-active-color: #8e6500;
+  --dt-error-default-color: #dc172a;
+  --dt-error-hover-color: #c41425;
+  --dt-error-active-color: #ab0c17;
+  --dt-recovered-default-color: #3f962a;
+  --dt-recovered-hover-color: #1f7e1e;
+  --dt-recovered-active-color: #006613;
+  --dt-neutral-default-color: #6d6d6d;
+  --dt-neutral-hover-color: #454646;
+  --dt-neutral-active-color: #353535;
+  --dt-cta-default-color: #5ead35;
+  --dt-cta-hover-color: #3f962a;
+  --dt-cta-active-color: #1f7e1e;
+  --dt-critical-default-color: #ab0c17;
+  --dt-critical-hover-color: #93060e;
+  --dt-critical-active-color: #7a0004;
+  --dt-critical-background-color: #f9acaf;
+
+  --dt-accent-active-background-color: #C2E5FF;
+}
+
+.dt-button {
+  --dt-button-default-color: var(--dt-theme-main-default-color);
+  --dt-button-hover-color: var(--dt-theme-main-hover-color);
+  --dt-button-active-color: var(--dt-theme-main-active-color);
+}
+
+.dt-radio-button {
+  --dt-radio-default-color: var(--dt-theme-main-default-color);
+  --dt-radio-hover-color: var(--dt-theme-main-hover-color);
+  --dt-radio-active-color: var(--dt-theme-main-active-color);
+}
+
+.dt-show-more-icon {
+  --dt-show-more-default-color: var(--dt-theme-main-default-color);
+  --dt-show-more-hover-color: var(--dt-theme-main-hover-color);
+  --dt-show-more-active-color: var(--dt-theme-main-active-color);
+}
+
+.dt-switch-bar {
+  --dt-switch-bar-checked-before-background-color: var(--dt-theme-main-default-color);
+  --dt-switch-bar-checked-active-before-background: var(--dt-theme-main-active-color);
+}
+
+.dt-highlight {
+  --dt-highlight-color: var(--dt-theme-main-background-color);
+}
+
+.dt-option:not(.dt-option-disabled).dt-option-active, .dt-option:not(.dt-option-disabled):hover {
+  background-color: var(--dt-theme-main-background-color) !important;
+}
+
+.dt-filter-field-tag-value {
+  color: var(--dt-theme-main-default-color) !important;
+}
+
+.dt-select-arrow svg {
+  fill: var(--dt-theme-main-default-color) !important;
+}
+
+.dt-checkbox-container {
+  border: 2px solid var(--dt-theme-main-default-color) !important;
+}
+
+.dt-checkbox-icon svg {
+  stroke: var(--dt-theme-main-default-color) !important;
+}
+
+:hover .dt-checkbox-icon svg {
+  stroke: var(--dt-theme-main-hover-color) !important;
+}
+
+:active .dt-checkbox-icon svg {
+  stroke: var(--dt-theme-main-active-color) !important;
+}
+
+.dt-button.dt-button-nested .dt-loading-spinner-svg {
+  stroke: var(--dt-neutral-active-color) !important;
+}
+
+.dt-quick-filter-close, .dt-quick-filter-open {
+  color: var(--dt-theme-main-default-color) !important;
+}
+
+.dt-overlay-container {
+  border: 1px solid var(--dt-theme-main-default-color) !important;
+}
diff --git a/bridge/client/styles.scss b/bridge/client/styles.scss
@@ -8,8 +8,6 @@ $fonts-dir: '^./assets/fonts';
 @import '~@dynatrace/barista-components/style/main';
 @import '~@dynatrace/barista-components/style/index';
 
-@import 'barista';
-
 pre,
 code {
   font-family: monospace;
@@ -129,7 +127,7 @@ a {
 }
 
 a:hover {
-  color: $primary-color;
+  color: var(--dt-theme-main-default-color);
 }
 
 button.dt-button-primary.danger-button:not([disabled]),
@@ -432,7 +430,7 @@ pre.code {
   flex-direction: column;
   align-items: center;
   width: 100%;
-  border: 1px solid $link-icon-color;
+  border: 1px solid var(--dt-theme-main-default-color);
   border-radius: 5px;
   background-color: transparent;
   text-align: center;