Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Docs (grammar/wording changes) #6048

Merged
merged 10 commits into from Mar 12, 2019
Merged

Improve Docs (grammar/wording changes) #6048

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9b467a2
grammar
jmxo Mar 12, 2019
5bf8429
grammar
jmxo Mar 12, 2019
1be9c07
wording
jmxo Mar 12, 2019
a8b9b63
punctuation/grammar
jmxo Mar 12, 2019
0fb92cb
wording
jmxo Mar 12, 2019
4bafdcd
wording
jmxo Mar 12, 2019
ae81531
grammar
jmxo Mar 12, 2019
b151861
wording
jmxo Mar 12, 2019
7ce3f04
punctuation
jmxo Mar 12, 2019
951d2a2
grammar
jmxo Mar 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/src/pages/configurations/theming/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Storybook is theme-able! You can change theme variables using the [options param

## Set a theme

You can do this in an decorator, addon or in `.storybook/config.js`. Changing theme at runtime is supported!
You can do this in a decorator, an addon or in `.storybook/config.js`. Changing theme at runtime is also supported!

Just modify `.storybook/config.js` to include your new options:

Expand All @@ -21,15 +21,15 @@ addParameters({
});
```

When setting a theme, set a full theme object, the theme is replaced, not combined.
When setting a theme, set a full theme object. The theme is replaced not combined.

See more addon options at https://github.com/storybooks/storybook/tree/master/addons/options

## Get a theme

We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark theme).
We have created two themes for you: "normal" (a light theme) and "dark" (a dark theme).

You can get these themes like so:
Here's an example of using the "dark" theme:

```js
import { addParameters, configure } from '@storybook/react';
Expand All @@ -46,9 +46,9 @@ addParameters({

## Create a theme quickstart

The `storybook/theming` is build using TypeScript, so this should help create a valid theme for typescript users. The types are part of the package itself.
The `storybook/theming` is built using TypeScript, so this should help create a valid theme for typescript users. The types are part of the package itself.

The easiest way to customize Storybook to generate a new theme using `create()`. This function includes shorthands for the most common theme variables. Here's how to use it.
The easiest way to customize Storybook is to generate a new theme using the `create()` function from `storybook/theming`. This function includes shorthands for the most common theme variables. Here's how to use it:

First create a new file in `.storybook` called `yourTheme.js`.

Expand Down Expand Up @@ -124,7 +124,7 @@ export default create({

Some addons require specific theme variables that a Storybook user must add. If you share your theme with the community make sure to support the official and other popular addons so your users have a consistent experience.

For example, the popular Actions addon uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of it's own. Supply additional theme variables to style it like so:
For example, the popular Actions addon uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of its own. Supply additional theme variables to style it like so:

```js
addonActionsTheme: {
Expand Down