DS-2735 - Theming fixes

assets/css/tour.css

+.joyride-close-tip {
+  color: white;
+}
+
+.joyride-modal-bg {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.joyride-nub.top {
+  border-bottom: 28px solid #333;
+}
+
+.joyride-nub.bottom {
+  border-top: 28px solid #333;
+}
+
+.joyride-nub.left {
+  border-right: 28px solid #333;
+}
+
+.joyride-nub.right {
+  border-left: 28px solid #333;
+}
+
+.joyride-tip-guide {
+  background: #333;
+  color: white;
+  border-radius: 10px;
+}
+
+.joyride-content-wrapper {
+  border-radius: 10px;
+}

components/00-config/_variables.scss

@@ -18,4 +18,5 @@ $enable-rounded:            true;
 @import 'variables/navbar';
 @import 'variables/pagination';
 @import 'variables/popover';
+@import 'variables/tour';
 @import 'variables/tooltip';

components/00-config/variables/_tour.scss

+$tour-background-color: #333;
+$tour-text-color: white;
+$tour-backdrop-color: rgba(0,0,0,0.5);

components/03-molecules/tour/tour.scss

+@import 'settings';
+
+.joyride-close-tip {
+  color: $tour-text-color;
+}
+
+.joyride-modal-bg {
+  background: $tour-backdrop-color;
+}
+
+.joyride-nub.top {
+  border-bottom: 28px solid $tour-background-color;
+}
+
+.joyride-nub.bottom {
+  border-top: 28px solid $tour-background-color;
+}
+
+.joyride-nub.left {
+  border-right: 28px solid $tour-background-color;
+}
+
+.joyride-nub.right {
+  border-left: 28px solid $tour-background-color;
+}
+
+.joyride-tip-guide {
+  background: $tour-background-color;
+  color: $tour-text-color;
+  border-radius: $border-radius-base;
+}
+
+.joyride-content-wrapper {
+  border-radius: $border-radius-base;
+}

socialblue.info.yml

@@ -54,6 +54,8 @@ libraries-extend:
     - socialblue/navbar
   socialbase/teaser:
     - socialblue/teaser
+  socialbase/tour:
+    - socialblue/tour
   # Extend Organisms
   socialbase/comment:
     - socialblue/comment

socialblue.libraries.yml

@@ -117,6 +117,11 @@ teaser:
     theme:
       assets/css/teaser.css: {}
 
+tour:
+  css:
+    theme:
+      assets/css/tour.css: {}
+
 ### 2.3 Organisms
 comment:
   css: