add docs

README.md

@@ -2,10 +2,27 @@
 
 [![hacs][hacs-image]][hacs-url]
 
-Mushroom is a collection of cards for [Home Assistant][home-assistant] Lovelace UI
-
 > Mushroom is currently in `beta` and not released yet. There can be some breaking changes.
 
+![Overview](https://user-images.githubusercontent.com/5878303/152332130-760cf616-5c40-4825-a482-bb8f1f0f5251.png)
+
+## What is mushroom ?
+
+Mushroom is a collection of cards for [Home Assistant][home-assistant] Lovelace UI.
+
+Mushroom mission is to propose easy to use components to build your [Home Assistant][home-assistant] dashboard.
+
+### Features
+
+-   🛠 Editor for **all cards** and and **all options**
+-   🚀 0 dependencies : no need to install another card.
+-   📝 No `yaml` edition needed (but you can!)
+-   🌈 Based on Material UI colors
+-   🌓 Light and dark theme support
+-   Optional theme customization
+
+The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent [UI-Lovelace-Minimalist][ui-lovelace-minimalist] and [Button-card][button-card] plugins for this.
+
 ## Installation
 
 ### HACS
@@ -42,6 +59,64 @@ All the Mushroom cards can be configured using Lovelace UI editor.
 3. Click Plus button to add a new card.
 4. Find one of the _Custom: Mushroom_ card in the list.
 
+### Cards
+
+Different cards are available for differents entities :
+
+-   🚨 [Alarm card](docs/cards/alarm.md)
+-   🪟 [Cover card](docs/cards/cover.md)
+-   💨 [Fan card](docs/cards/fan.md)
+-   💡 [Light card](docs/cards/light.md)
+-   🙋 [Person card](docs/cards/person.md)
+-   📏 [Sensor card](docs/cards/sensor.md)
+-   🛠 [Template card](docs/cards/template.md)
+-   🔔 [Chips card](docs/cards/chips.md)
+
+Some cards are on the todo list :
+
+-   🌡 Climate card
+-   📺 Media card
+-   🧹 Vacuum card
+
+### Theme customization
+
+Mushroom works without theme but you can add a theme for better experience by copiing the theme file [themes/mushroom.yaml](themes/mushroom.yaml) in your theme folder.
+If you want more information about themes, check out the official [Home Assistant documentation about themes][home-assitant-theme-docs].
+
+```yaml
+Mushroom:
+    # HA variables
+    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
+    ha-card-border-radius: 12px
+    # Mushroom custom variables
+    mush-spacing: 12px
+    mush-rgb-red: 244, 67, 54
+    mush-rgb-pink: 233, 30, 99
+    mush-rgb-purple: 156, 39, 176
+    mush-rgb-deep-purple: 103, 58, 183
+    mush-rgb-indigo: 63, 81, 181
+    mush-rgb-blue: 33, 150, 243
+    mush-rgb-light-blue: 3, 169, 244
+    mush-rgb-cyan: 0, 188, 212
+    mush-rgb-teal: 0, 150, 136
+    mush-rgb-green: 76, 175, 80
+    mush-rgb-light-green: 139, 195, 74
+    mush-rgb-lime: 205, 220, 57
+    mush-rgb-yellow: 255, 235, 59
+    mush-rgb-amber: 255, 193, 7
+    mush-rgb-orange: 255, 152, 0
+    mush-rgb-deep-orange: 255, 87, 34
+    mush-rgb-brown: 121, 85, 72
+    mush-rgb-grey: 158, 158, 158
+    mush-rgb-blue-grey: 96, 125, 139
+    mush-rgb-black: 0, 0, 0
+    mush-rgb-white: 255, 255, 255
+    # You must keep this to support light/dark theme
+    modes:
+        light: {}
+        dark: {}
+```
+
 ## Development server
 
 ### Home assistant demo
@@ -92,4 +167,7 @@ npm run build
 <!-- References -->
 
 [home-assistant]: https://www.home-assistant.io/
+[home-assitant-theme-docs]: https://www.home-assistant.io/integrations/frontend/#defining-themes
 [hacs]: https://hacs.xyz
+[ui-lovelace-minimalist]: https://ui-lovelace-minimalist.github.io/UI/
+[button-card]: https://github.com/custom-cards/button-card

docs/cards/alarm.md

@@ -0,0 +1,23 @@
+# Alarm control panel card
+
+![Alarm light](../images/alarm-light.png)
+![Alarm dark](../images/alarm-dark.png)
+
+## Description
+
+A alarm control panel card allow you to control a alarm panel entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name          | Type    | Default                        | Description                              |
+| :------------ | :------ | :----------------------------- | :--------------------------------------- |
+| `entity`      | string  | Required                       | Alarm control panel entity               |
+| `icon`        | string  | Optional                       | Custom icon                              |
+| `name`        | string  | Optional                       | Custom name                              |
+| `vertical`    | boolean | `false`                        | Vertical layout                          |
+| `hide_state`  | boolean | `false`                        | Hide the entity state                    |
+| `states`      | list    | `["armed_home", "armed_away"]` | List of arm states to display            |
+| `tap_action`  | action  | `more-info`                    | Home assistant action to perform on tap  |
+| `hold_action` | action  | `more-info`                    | Home assistant action to perform on hold |

docs/cards/chips.md

@@ -0,0 +1,47 @@
+# Chips card
+
+## Description
+
+A chips card allow you to small information at the top of your dashboard
+
+### Action chip
+
+![Chip action light](../images/chip-action-light.png)
+![Chip action dark](../images/chip-action-dark.png)
+
+An action chip allow you to perform a Home Assistant action (navigate, call-service, etc...).
+
+### Back chip
+
+![Chip back light](../images/chip-back-light.png)
+![Chip back dark](../images/chip-back-dark.png)
+
+An action chip allow you to perform a back action.
+
+### Entity chip
+
+![Chip entity light](../images/chip-entity-light.png)
+![Chip entity dark](../images/chip-entity-dark.png)
+
+An entity chip allow you to display entity state.
+
+### Menu chip
+
+![Chip menu light](../images/chip-menu-light.png)
+![Chip menu dark](../images/chip-menu-dark.png)
+
+A menu chip allow you to open the drawer in mobile.
+
+### Template chip
+
+![Chip template light](../images/chip-template-light.png)
+![Chip template dark](../images/chip-template-dark.png)
+
+A template chip allow you to build custom chip using [templates](https://www.home-assistant.io/docs/configuration/templating/).
+
+### Weather chip
+
+![Chip weather light](../images/chip-weather-light.png)
+![Chip weather dark](../images/chip-weather-dark.png)
+
+A weather chip allow you to display the weather.

docs/cards/cover.md

@@ -0,0 +1,24 @@
+# Cover card
+
+![Cover light](../images/cover-light.png)
+![Cover dark](../images/cover-dark.png)
+
+## Description
+
+A cover card allow you to control a cover entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                    | Type    | Default     | Description                                    |
+| :---------------------- | :------ | :---------- | :--------------------------------------------- |
+| `entity`                | string  | Required    | Cover entity                                   |
+| `icon`                  | string  | Optional    | Custom icon                                    |
+| `name`                  | string  | Optional    | Custom name                                    |
+| `vertical`              | boolean | `false`     | Vertical layout                                |
+| `hide_state`            | boolean | `false`     | Hide the entity state                          |
+| `show_buttons_control`  | boolean | `false`     | Show buttons to open, close and stop cover     |
+| `show_position_control` | boolean | `false`     | Show a slider to control position of the cover |
+| `tap_action`            | action  | `toggle`    | Home assistant action to perform on tap        |
+| `hold_action`           | action  | `more-info` | Home assistant action to perform on hold       |

docs/cards/fan.md

@@ -0,0 +1,25 @@
+# Light card
+
+![Fan light](../images/fan-light.png)
+![Fan dark](../images/fan-dark.png)
+
+## Description
+
+A fan card allow you to control a fan entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                      | Type    | Default     | Description                              |
+| :------------------------ | :------ | :---------- | :--------------------------------------- |
+| `entity`                  | string  | Required    | Fan entity                               |
+| `icon`                    | string  | Optional    | Custom icon                              |
+| `name`                    | string  | Optional    | Custom name                              |
+| `vertical`                | boolean | `false`     | Vertical layout                          |
+| `hide_state`              | boolean | `false`     | Hide the entity state                    |
+| `icon_animation`          | boolean | `false`     | Animate the icon when fan is `on`        |
+| `show_percentage_control` | boolean | `false`     | Show a slider to control speed           |
+| `show_oscillate_control`  | boolean | `false`     | Show a button to control oscillation     |
+| `tap_action`              | action  | `toggle`    | Home assistant action to perform on tap  |
+| `hold_action`             | action  | `more-info` | Home assistant action to perform on hold |

docs/cards/light.md

@@ -0,0 +1,24 @@
+# Light card
+
+![Light light](../images/light-light.png)
+![Light dark](../images/light-dark.png)
+
+## Description
+
+A light card allow you to control a light entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                      | Type    | Default     | Description                                |
+| :------------------------ | :------ | :---------- | :----------------------------------------- |
+| `entity`                  | string  | Required    | Light entity                               |
+| `icon`                    | string  | Optional    | Custom icon                                |
+| `name`                    | string  | Optional    | Custom name                                |
+| `vertical`                | boolean | `false`     | Vertical layout                            |
+| `hide_state`              | boolean | `false`     | Hide the entity state                      |
+| `show_brightness_control` | boolean | `false`     | Show a slider to control brightness        |
+| `show_color_temp_control` | boolean | `false`     | Show a slider to control temperature color |
+| `tap_action`              | action  | `toggle`    | Home assistant action to perform on tap    |
+| `hold_action`             | action  | `more-info` | Home assistant action to perform on hold   |

docs/cards/person.md

@@ -0,0 +1,32 @@
+# Person card
+
+![Person light](../images/person-light.png)
+![Person dark](../images/person-dark.png)
+
+## Description
+
+A cover card allow you to control a person entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                 | Type    | Default     | Description                                          |
+| :------------------- | :------ | :---------- | :--------------------------------------------------- |
+| `entity`             | string  | Required    | Person entity                                        |
+| `icon`               | string  | Optional    | Custom icon                                          |
+| `name`               | string  | Optional    | Custom name                                          |
+| `vertical`           | boolean | `false`     | Vertical layout                                      |
+| `hide_state`         | boolean | `false`     | Hide the entity state                                |
+| `use_entity_picture` | boolean | `false`     | Use the picture of the person entity instead of icon |
+| `tap_action`         | action  | `more-info` | Home assistant action to perform on tap              |
+| `hold_action`        | action  | `more-info` | Home assistant action to perform on hold             |
+
+    entity: string;
+    name?: string;
+    icon?: string;
+    use_entity_picture?: boolean;
+    vertical?: boolean;
+    hide_state?: boolean;
+    tap_action?: ActionConfig;
+    hold_action?: ActionConfig;

docs/cards/sensor.md

@@ -0,0 +1,24 @@
+# Sensor card
+
+![Sensor light](../images/sensor-light.png)
+![Sensor dark](../images/sensor-dark.png)
+
+## Description
+
+A sensor card allow you to control a sensor entity.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name             | Type    | Default                                             | Description                              |
+| :--------------- | :------ | :-------------------------------------------------- | :--------------------------------------- |
+| `entity`         | string  | Required                                            | Sensor entity                            |
+| `icon`           | string  | Optional                                            | Custom icon                              |
+| `icon_color`     | string  | `blue`                                              | Custom color for icon                    |
+| `name`           | string  | Optional                                            | Custom name                              |
+| `vertical`       | boolean | `false`                                             | Vertical layout                          |
+| `primary_info`   | boolean | `name` `state`                                      | Info to show as primary info             |
+| `secondary_info` | boolean | `name` `state` `last-changed` `last-updated` `none` | Info to show as secondary info           |
+| `tap_action`     | action  | `more-info`                                         | Home assistant action to perform on tap  |
+| `hold_action`    | action  | `more-info`                                         | Home assistant action to perform on hold |

docs/cards/template.md

@@ -0,0 +1,24 @@
+# Template card
+
+![Template light](../images/template-light.png)
+![Template dark](../images/template-dark.png)
+
+## Description
+
+A template card allow you to build custom card.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name          | Type            | Default  | Description                                                                                                                         |
+| :------------ | :-------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`        | string          | Optional | Icon to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                              |
+| `icon_color`  | string          | Optional | Icon color to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                        |
+| `primary`     | string          | Optional | Primary info to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                      |
+| `secondary`   | string          | Optional | Secondary info to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                    |
+| `vertical`    | boolean         | `false`  | Vertical layout                                                                                                                     |
+| `hide_state`  | boolean         | `false`  | Hide the entity state                                                                                                               |
+| `tap_action`  | action          | `none`   | Home assistant action to perform on tap                                                                                             |
+| `hold_action` | action          | `none`   | Home assistant action to perform on hold                                                                                            |
+| `entity_id`   | `string` `list` | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities. |