Skip to content

Commit

Permalink
Remove predefined themes (#462)
Browse files Browse the repository at this point in the history
We decided the overhead of predefined themes was not really worth it, so instead, we will ship with a default set of styles that are easily overriden via variables.
  • Loading branch information
RobbieTheWagner authored Jul 24, 2019
1 parent 87f28be commit a9689eb
Show file tree
Hide file tree
Showing 10 changed files with 3 additions and 118 deletions.
Binary file removed docs-src/assets/img/themes/dark.png
Binary file not shown.
Binary file removed docs-src/assets/img/themes/default.png
Binary file not shown.
Binary file removed docs-src/assets/img/themes/square-dark.png
Binary file not shown.
Binary file removed docs-src/assets/img/themes/square.png
Binary file not shown.
2 changes: 1 addition & 1 deletion docs-src/tutorials/02-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,4 +288,4 @@ myTour.addStep('Step 1', {
});
```

Furthermore, while each of [Shepherd's themes](/docs/tutorial-predefined-themes.html) provides some basic arrow styling, you can style it as you wish by targeting [the markup that's genereated by Tippy](https://atomiks.github.io/tippyjs/#creating-custom-themes-tippy-element-structure).
Furthermore, while Shepherd provides some basic arrow styling, you can style it as you wish by targeting [the markup that's genereated by Tippy](https://atomiks.github.io/tippyjs/#creating-custom-themes-tippy-element-structure).
12 changes: 1 addition & 11 deletions docs-src/tutorials/03-styling.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
We deliver some [predefined themes](/docs/themes.md) (e.g., `dark` or `square`).
You are welcome to use one of them by passing the `theme` option in the Shepherd config.

```js
const tour = new Shepherd.Tour({
...
theme: 'light'
});
```

If you'd like to extend a theme within your own CSS, you can pass custom class names to the tour instance —
If you'd like to change styles within your own CSS, you can pass custom class names to the tour instance —
or, as part of the options for each step — and use them as hooks for your own styling rules.

```javascript
Expand Down
7 changes: 1 addition & 6 deletions docs-src/tutorials/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"title": "Usage"
},
"03-styling": {
"title": "Theming and Styling",
"children": {
"predefined-themes": {
"title": "Predefined Themes"
}
}
"title": "Theming and Styling"
}
}
61 changes: 0 additions & 61 deletions docs-src/tutorials/predefined-themes.md

This file was deleted.

34 changes: 0 additions & 34 deletions src/js/styles/themes.js

This file was deleted.

5 changes: 0 additions & 5 deletions src/js/styles/variables.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { darken, desaturate, lighten, readableColor, transparentize } from 'polished';
import themes from './themes';

const styles = {
arrowSize: 2.1,
Expand All @@ -16,10 +15,6 @@ const styles = {
};

export default function getVariables(options) {
if (options.theme) {
Object.assign(styles, themes[options.theme]);
}

if (options.styleVariables) {
Object.assign(styles, options.styleVariables);
}
Expand Down

0 comments on commit a9689eb

Please sign in to comment.