shipshapecode · chuckcarpenter · Aug 30, 2018 · Aug 8, 2018 · Aug 15, 2018 · Aug 17, 2018
diff --git a/README.md b/README.md
@@ -53,7 +53,6 @@ tour.start();
 
 [Demo](https://shipshapecode.github.io/shepherd/docs/welcome/)
 
-
 ## Contributing
 
 We encourage contributions of all kinds. If you would like to contribute in some way, please review our [guidelines for contributing](CONTRIBUTING.md).

diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
diff --git a/docs/welcome/index.html b/docs/welcome/index.html
@@ -7,9 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <link rel="icon" href="https://static.hubspot.com/favicon.ico">
 
-  <!-- Shepherd themes -->
-  <link rel="stylesheet" href="/shepherd/dist/css/shepherd-theme-arrows.css"/>
-
   <!-- Welcome docs styles -->
   <link rel="stylesheet" href="/shepherd/docs/welcome/css/prism.css"/>
   <link rel="stylesheet" href="/shepherd/docs/welcome/css/welcome.css"/>

diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js
@@ -15,15 +15,14 @@
     shepherd.addStep('welcome', {
       text: ['Shepherd is a javascript library for guiding users through your app. It uses <a href="https://popper.js.org/">Popper.js</a>, another open source library, to position all of its steps.', 'Popper makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.'],
       attachTo: '.hero-welcome bottom',
-      classes: 'shepherd shepherd-transparent-text',
+      classes: 'shepherd shepherd-welcome',
       buttons: [
         {
           action: shepherd.cancel,
           classes: 'shepherd-button-secondary',
           text: 'Exit'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
           text: 'Next'
         }
       ]
@@ -39,7 +38,6 @@
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
           text: 'Next'
         }
       ]
@@ -55,7 +53,6 @@
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
           text: 'Next'
         }
       ]
@@ -71,7 +68,6 @@
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
           text: 'Done'
         }
       ]

diff --git a/docs/welcome/scss/welcome.scss b/docs/welcome/scss/welcome.scss
@@ -1,6 +1,10 @@
-$color-inherit: "inherit";
-$color-green: #3b744f;
-$color-white: #ffffff;
+// Themeing
+$shepherd-theme-primary: #55a892 !default;
+$shepherd-header-background: #eeeeee !default;
+$shepherd-element-width: 420px !default;
+
+// Docs
+$color-white: #ffffff !default;
 
 html,
 body {
@@ -108,26 +112,33 @@ body {
   }
 }
 
-.shepherd-element {
-  &.shepherd-transparent-text .shepherd-text {
-    color: $color-green;
+pre {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  line-height: 1.4em;
+}
+
+// Import base theme
+@import '../../../src/scss/base';
+
+// Overwrite welcome-step with certain class
+.shepherd-welcome {
+  @include popper-theme-arrows($header-bg: #ffffff);
+
+  &:not(.shepherd-has-title) .shepherd-content {
+    header,
+    .shepherd-header {
+      padding-bottom: 0;
+    }
   }
 
   .shepherd-content {
-    max-width: 100%;
-    width: 400px;
-
-    a {
-      color: $color-inherit;
+    header,
+    .shepherd-header {
+      background: #ffffff;
     }
 
-    footer .shepherd-buttons li .shepherd-button-example-primary {
-      background: #55a892;
+    .shepherd-text {
+      color: darken($shepherd-theme-primary, 20);
     }
   }
 }
-
-pre {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  line-height: 1.4em;
-}
diff --git a/index.md b/index.md
@@ -261,6 +261,67 @@ mediator.on('user-create', () => {});
 
 IE9+ and all modern browsers
 
+## Using Themes
+We deliver some predefined themes (e.g. shepherd-theme-default or shepherd-theme-square). You are welcome to use them and embed them into your page as additional stylesheets.
+
+```html
+<head>
+  <link rel="stylesheet" href="shepherd-theme-default.css">
+</head>
+```
+
+Individual customizations to the standard themes must be made within the CSS file. Furthermore, individual CSS classes can be passed via the tour instance or for each step individually, to overwritte or supplement  existing style properties.
+
+```javascript
+let tour = new Shepherd.Tour({
+  defaults: {
+    classes: 'shepherd-theme-custom'
+  }
+});
+```
+
+### Custom Themeing
+We use [SASS](https://sass-lang.com/) as pre-processor for CSS. In connection with SASS there are extensive possibilities to generate CSS. For example, SASS can calculate or increase the saturation of color values. In addition, variables can be defined (similar to a scripting language), which ultimately end up as values in the CSS result. We make use of these extended possibilities by extracting themeing-relevant values as variables (__variables.scss_). This makes it easy to individualise colors and shapes.
+
+Basically, there are only a handful of variables that need to be adjusted. A distinction is made between color settings and other options.
+
+**Color Settings**
+
+| Variable | Purpose | Default
+|---|---|---
+| $shepherd-theme-primary | Primary or brand color. Primary button gets this color. | #3288e6
+| $shepherd-theme-secondary | Secondary color. If it is not set explicitly, it is calculated using the primary color. | desaturate(lighten($shepherd-theme-primary, 40), 70)
+| $shepherd-text-background | Background color of the text area. | #ffffff
+| $shepherd-header-background | Background color of the header element. If it is not set explicitly, it is calculated using the text background color. | darken($shepherd-text-background, 10) 
+
+**Options**
+
+| Variable | Purpose | Default
+|---|---|---
+| $shepherd-element-width | Width of the step element | 400px
+| $shepherd-element-border-radius | Set radius of rounded corners. 0 means (sharp) pointed corners. | 5px
+| $shepherd-element-max-height | Maximum height of the element | 100%
+| $shepherd-element-max-width | Maximum width of the element | 100%
+| $shepherd-element-z-index | Move the element forward or backward | 9999
+| $shepherd-text-line-height | Determine the line height of the body text | 1.3em
+| $shepherd-button-border-radius | Decide whether the buttons should have rounded or pointed corners. 0 means (sharp) pointed corners. | 3px
+| $use-drop-shadow | The element casts a shadow | true
+
+The example below is intended to illustrate the individual customizations. Please make sure that the values are set before the import of the _base-theme_.
+
+```scss
+$shepherd-theme-primary: #9b59b6 !default;
+$shepherd-theme-secondary: desaturate(lighten($shepherd-theme-primary, 30), 70) !default;
+$shepherd-header-background: #eeeeee !default;
+$shepherd-element-border-radius: 0 !default;
+$shepherd-button-border-radius: 0 !default;
+$use-drop-shadow: true !default;
+
+@import 'base';
+```
+
+As a result you get a squared theme with a purple primary button. The individual steps cast a shadow on the underlying elements. The header is colored in a light gray tone.
+
 ## Projects Using Shepherd
 
 Here we showcase some of the awesome libraries built using Shepherd.

diff --git a/src/js/step.js b/src/js/step.js
@@ -75,6 +75,8 @@ export class Step extends Evented {
       const footer = document.createElement('footer');
       const buttons = createFromHTML('<ul class="shepherd-buttons"></ul>');
 
+      footer.classList.add('shepherd-footer');
+
       this.options.buttons.map((cfg) => {
         const button = createFromHTML(`<li><a class="shepherd-button ${cfg.classes || ''}">${cfg.text}</a>`);
         buttons.appendChild(button);
@@ -172,6 +174,7 @@ export class Step extends Evented {
     }
 
     content.classList.add('shepherd-content');
+    header.classList.add('shepherd-header');
     element.appendChild(content);
     content.appendChild(header);
 

diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -1,62 +1,110 @@
-@import "./mixins/cancel-link";
-@import "./mixins/pie-clearfix";
-@import "./mixins/inline-block";
-@import "./mixins/shepherd-button";
-@import "./helpers/popper";
-@import "./helpers/popper-theme-arrows";
+@import 'variables';
+@import 'mixins';
+@import 'helpers';
 
-@include popper();
-@include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events, $background-color: $background-color, $color: $color, $use-drop-shadow: $use-drop-shadow);
+@include box-sizing();
 
 .shepherd-element {
-  // Make the arrow color the same as the header color when the arrow is on the top
+  @include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events);
 
-  &[x-placement^="bottom"] {
-    &.shepherd-has-title {
-      .popper__arrow {
-        border-bottom-color: $header-background-color;
-      }
-    }
+  @if $use-drop-shadow {
+    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
   }
 
-  &.shepherd-has-title .shepherd-content header {
-    background: $header-background-color;
-    padding: 1em;
-
-    a.shepherd-cancel-link {
-      margin-bottom: 0;
-      padding: 0;
+  max-height: $shepherd-element-max-height;
+  max-width: $shepherd-element-max-width;
+  width: $shepherd-element-width;
+  z-index: $shepherd-element-z-index;
+
+  // Care for enough space around title.
+  // Especially on colored headers.
+  &.shepherd-has-title .shepherd-content,
+  &.shepherd-has-cancel-link .shepherd-content {
+    .shepherd-header {
+      padding-bottom: 0.75em;
     }
   }
 
-  &.shepherd-has-cancel-link .shepherd-content header h3 {
-    float: left;
-  }
-
   .shepherd-content {
-    padding: 0;
+    background: none;
+    font-size: inherit;
 
-    * {
-      font-size: inherit;
-    }
-
-    header {
+    header,
+    .shepherd-header {
       @include pie-clearfix;
 
-      padding: 1em 1em 0;
+      background: $shepherd-header-background;
+      border-top-left-radius: $shepherd-element-border-radius;
+      border-top-right-radius: $shepherd-element-border-radius;
+      line-height: 2em;
+      padding: 0.75em 0.75em 0;
 
-      h3 {
+      .shepherd-title,
+      .shepherd-cancel-link {
         font-weight: normal;
         margin: 0;
+        padding: 0;
+        position: relative;
+        vertical-align: middle;
       }
 
-      a.shepherd-cancel-link {
-        @include cancel-link;
+      .shepherd-title {
+        color: map_get($shepherd-theme-text-colors, header);
+        float: left;
+        font-size: 1.1em;
+      }
+
+      .shepherd-cancel-link {
+        color: lighten(map_get($shepherd-theme-text-colors, header), 70);
+        float: right;
+        font-size: 2em;
+        text-decoration: none;
+        transition: color 0.5s ease;
+
+        &:before {
+          content: '\00d7';
+        }
+
+        &:hover {
+          color: map_get($shepherd-theme-text-colors, header);
+        }
       }
     }
 
-    footer {
-      padding: 0 1em 1em;
+    .shepherd-text {
+      background: $shepherd-text-background;
+      color: map_get($shepherd-theme-text-colors, text);
+      line-height: $shepherd-text-line-height;
+      padding: 0.75em;
+
+      a,
+      a:visited,
+      a:active {
+        border-bottom: 1px dotted;
+        border-bottom-color: map_get($shepherd-theme-text-colors, text);
+        color: map_get($shepherd-theme-text-colors, text);
+        text-decoration: none;
+
+        &:hover {
+          border-bottom-style: solid;
+        }
+      }
+
+      p {
+        margin-top: 0;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    footer,
+    .shepherd-footer {
+      background: $shepherd-text-background;
+      border-bottom-left-radius: $shepherd-element-border-radius;
+      border-bottom-right-radius: $shepherd-element-border-radius;
+      padding: 0 0.75em 0.75em;
 
       .shepherd-buttons {
         list-style: none;
@@ -66,32 +114,15 @@
 
         li {
           display: inline;
-          margin: 0;
-          padding: 0;
+          margin: 0 0.5em 0 0;
 
-          .shepherd-button {
-            @include inline-block;
-
-            cursor: pointer;
-            margin: 0 0.5em 0 0;
-          }
-
-          &:last-child .shepherd-button {
+          &:last-child {
             margin-right: 0;
           }
-        }
-      }
-    }
-
-    .shepherd-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
 
-        &:last-child {
-          margin-bottom: 0;
+          .shepherd-button {
+            @include shepherd-button;
+          }
         }
       }
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,7 +53,6 @@ tour.start();

		[Demo](https://shipshapecode.github.io/shepherd/docs/welcome/)


		## Contributing

		We encourage contributions of all kinds. If you would like to contribute in some way, please review our [guidelines for contributing](CONTRIBUTING.md).
Expand Down