import { Canvas, Meta, Story } from '@storybook/addon-docs';

import ThemeProvider from 'src/theme';

<Meta title="Guide/Theme" component={ThemeProvider} />

# Theme Guide

Theme is consist of various components. each and every component has set of colors.

### SwapWidget

```json
{
  "swapWidget": {
    "primary": "",
    "secondary": "",
    "backgroundColor": "",
    "detailsBackground": "",
    "interactiveColor": "",
    "interactiveBgColor": ""
  }
}
```

### TextInput

```json
{
  "textInput": {
    "text": "",
    "labelText": "",
    "placeholderText": "",
    "backgroundColor": ""
  }
}
```

### CurrencySelect

```json
{
  "currencySelect": {
    "defaultText": "",
    "selectedText": "",
    "defaultBackgroundColor": "",
    "selectedBackgroundColor": ""
  }
}
```

### ToggleButton

```json
{
  "toggleButton": {
    "backgroundColor": "",
    "selectedColor": "",
    "fontColor": ""
  }
}
```

### Drawer

```json
{
  "drawer": {
    "text": "",
    "backgroundColor": ""
  }
}
```

### Button

```json
{
  "button": {
    "primary": {
      "background": "",
      "color": ""
    },
    "secondary": {
      "background": "",
      "color": ""
    },
    "outline": {
      "borderColor": "",
      "color": ""
    },
    "plain": {
      "color": ""
    },
    "disable": {
      "background": "",
      "color": ""
    },
    "confirmed": {
      "background": "",
      "color": "",
      "borderColor": ""
    }
  }
}
```

### Switch

```json
{
  "switch": {
    "onColor": "",
    "offColor": "",
    "backgroundColor": ""
  }
}
```

### Loader

```json
{
  "loader": {
    "text": ""
  }
}
```

### NumberOptions

```json
{
  "numberOptions": {
    "text": "",
    "activeTextColor": "",
    "activeBackgroundColor": "",
    "inactiveBackgroundColor": "",
    "borderColor": ""
  }
}
```
