Skip to content

Commit

Permalink
Add theme variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@iantrich
iantrich committed Jun 30, 2020
1 parent eec1af3 commit 688e6c9
Show file tree
Hide file tree
Showing 9 changed files with 225 additions and 2,206 deletions.
126 changes: 125 additions & 1 deletion .devcontainer/configuration.yaml
View file
@@ -1,4 +1,128 @@
default_config:
lovelace:
mode: yaml
demo:
resources:
- url: http://127.0.0.1:5000/radial-menu.js
type: module
demo:
frontend:
themes:
amoled:
accent-color: '#E45E65'
card-background-color: 'var(--paper-card-background-color)'
dark-primary-color: 'var(--accent-color)'
disabled-text-color: '#7F848E'
divider-color: 'rgba(0, 0, 0, .12)'
google-green-500: '#39E949'
google-red-500: '#E45E65'
ha-card-background: '#000000'
label-badge-background-color: '#2E333A'
label-badge-border-color: 'green'
label-badge-red: 'var(--accent-color)'
label-badge-text-color: 'var(--primary-text-color)'
light-primary-color: 'var(--accent-color)'
paper-button-color: '#5294E2'
paper-button-ink-color: '#5294E2'
paper-card-background-color: '#000000'
paper-card-header-color: 'var(--accent-color)'
paper-dialog-background-color: '#000000'
paper-grey-200: '#414A59'
paper-grey-50: 'var(--primary-text-color)'
paper-item-icon-active-color: '#F9C536'
paper-item-icon-color: 'var(--primary-text-color)'
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954'
paper-listbox-background-color: '#000000'
paper-listbox-color: '#FFFFFF)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-tabs-selection-bar-color: 'green'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
primary-background-color: '#000000'
primary-color: '#434954'
primary-text-color: '#FFFFFF'
secondary-background-color: '#383C45'
secondary-text-color: '#5294E2'
sidebar-icon-color: 'var(--primary-color)'
sidebar-selected-icon-color: 'var(--primary-text-color)'
sidebar-selected-text-color: 'var(--primary-text-color)'
sidebar-text-color: '#F1F1F1'
switch-unchecked-button-color: '#333333'
switch-unchecked-track-color: '#333333'
table-row-alternative-background-color: '#222429'
table-row-background-color: '#000000'
text-primary-color: 'var(--primary-text-color)'
radial-icon-size: '48px'
radial-menu-button-color: 'red'
radial-menu-item-color: 'yellow'
day:
### Main Interface Colors ###
primary-color: '#93abca'
light-primary-color: '#5F81B0'
primary-background-color: '#F0F5FF'
secondary-background-color: var(--primary-background-color)
secondary-background-color-alpha: 'rgba(220, 225, 235, 0.6)'
divider-color: '#D6DFEB'
### Text ###
primary-text-color: '#395274'
secondary-text-color: '#5294E2'
text-primary-color: '#FFFFFF'
disabled-text-color: '#88A1C4'
### Sidebar Menu ###
sidebar-icon-color: '#395274'
sidebar-text-color: var(--sidebar-icon-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: '#FF6262'
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: '#395274'
state-icon-active-color: '#ebb307'
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: '#FF6262'
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: '#FFFFFF'
label-badge-text-color: '#395274'
label-badge-red: '#FF8888'
### Cards ###
paper-card-background-color: 'rgba(255, 255, 255, 0.4)'
paper-listbox-background-color: '#F0F1F3'
card-background-color: 'var(--primary-background-color)'

ha-card-border-radius: 10px
border-color: 'var(--primary-text-color)'
background-image: 'center / cover no-repeat url("/local/background/day.jpg") fixed'

### Toggles ###
paper-toggle-button-checked-button-color: '#FF6262'
paper-toggle-button-checked-bar-color: '#FF6262'
paper-toggle-button-unchecked-button-color: '#395274'
paper-toggle-button-unchecked-bar-color: '#9CB2CE'
switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
switch-unchecked-button-color: 'var(--paper-toggle-button-unchecked-button-color)'
switch-unchecked-color: 'var(--paper-toggle-button-unchecked-bar-color)'
switch-unchecked-track-color: 'var(--paper-toggle-button-unchecked-bar-color)'
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)

radial-icon-size: '72px'
radial-menu-button-color: 'yellow'
radial-menu-item-color: 'red'

sc-background-filter: none
3 changes: 0 additions & 3 deletions .devcontainer/ui-lovelace.yaml
View file
@@ -1,6 +1,3 @@
resources:
- url: http://127.0.0.1:5000/radial-menu.js
type: module
views:
- cards:
- type: custom:radial-menu
Expand Down
35 changes: 26 additions & 9 deletions README.md
View file
Expand Up @@ -15,6 +15,10 @@

This element is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Assistant](https://www.home-assistant.io/) that provides a radial menu on click for quick/space saving access to commands. Designed for picture-elements, but can be used anywhere.

## Minimum Home Assistant Version

Home Assistant version 0.110.0 or higher is required as of release 1.2.0 of restriction-card

## Support

Hey dude! Help me out for a couple of :beers: or a :coffee:!
Expand Down Expand Up @@ -48,6 +52,7 @@ resources:
| `tap_action` | `map` | **Optional** | Action to take on tap. See [action options](#action-options) | `action: toggle-menu` |
| `hold_action` | `map` | **Optional** | Action to take on hold. See [action options](#action-options) | `none` |
| `double_tap_action` | `map` | **Optional** | Action to take on double tap. See [action options](#action-options) | `action: none` |
| theme | `string` | **Optional** | Card theme |

## Item Options

Expand All @@ -74,32 +79,44 @@ resources:
| `service_data` | `map` | none | Any service data | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. |
| `haptic` | `string` | none | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection` | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) |

## Theme Variables

The following variables are available and can be set in your theme to change the appearance of the radial menu.

Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.

| name | Default | Description |
| -------------------------- | --------------- | ----------- |
| `radial-icon-size` | `24px` | icon size |
| `radial-menu-button-color` | `primary-color` | Menu color |
| `radial-menu-item-color` | `primary-color` | Item color |

## Usage

```yaml
type: "custom:radial-menu"
icon: "mdi:home"
name: "Home"
type: 'custom:radial-menu'
icon: 'mdi:home'
name: 'Home'
default_open: true
default_dismiss: false
hold_action:
action: url
url: https://www.home-assistant.io
items:
- entity: light.bed_light
icon: "mdi:flash"
icon: 'mdi:flash'
name: Bedroom Light
tap_action:
action: toggle
haptic: true
hold_action:
action: more-info
- entity: alarm_control_panel.ha_alarm
icon: "mdi:alarm-light"
icon: 'mdi:alarm-light'
name: Alarm Panel
tap_action:
action: more-info
- icon: "mdi:alarm"
- icon: 'mdi:alarm'
name: Timer
tap_action:
action: call-service
Expand All @@ -113,18 +130,18 @@ items:
service_data:
entity_id: timer.laundry
haptic: true
- entity_picture: "/local/headphones.png"
- entity_picture: '/local/headphones.png'
name: Podcasts
tap_action:
action: navigate
navigation_path: /lovelace/1
- card:
type: "custom:button-card"
type: 'custom:button-card'
entity: light.kitchen
show_name: false
styles:
card:
- background-color: "rgba(0, 0, 0, 0)"
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: 0px 0px 0px 0px black
```

Expand Down
3 changes: 2 additions & 1 deletion hacs.json
View file
@@ -1,4 +1,5 @@
{
"name": "Radial Menu Element",
"render_readme": true
"render_readme": true,
"homeassistant": "0.110.0"
}
42 changes: 21 additions & 21 deletions package.json
View file
@@ -1,6 +1,6 @@
{
"name": "radial-menu",
"version": "1.5.1",
"version": "1.6.0",
"description": "Lovelace radial-menu",
"keywords": [
"home-assistant",
Expand All @@ -16,35 +16,35 @@
"license": "MIT",
"dependencies": {
"custom-card-helpers": "^1.6.4",
"home-assistant-js-websocket": "^4.4.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2"
"home-assistant-js-websocket": "^4.5.0",
"lit-element": "^2.3.1",
"lit-html": "^1.2.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.0",
"@typescript-eslint/eslint-plugin": "^2.6.0",
"@typescript-eslint/parser": "^2.6.0",
"eslint": "^6.6.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.1",
"prettier": "^1.18.2",
"rollup": "^1.26.0",
"rollup-plugin-babel": "^4.3.3",
"@babel/core": "^7.10.3",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-decorators": "^7.10.3",
"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^1.19.1",
"rollup": "^1.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript2": "^0.24.3",
"rollup-plugin-uglify": "^6.0.3",
"typescript": "^3.6.4"
"rollup-plugin-uglify": "^6.0.4",
"typescript": "^3.9.5"
},
"scripts": {
"start": "rollup -c rollup.config.dev.js --watch",
"build": "npm run lint && npm run rollup",
"lint": "eslint src/*.ts",
"rollup": "rollup -c"
}
}
}
2 changes: 1 addition & 1 deletion src/const.ts
View file
@@ -1 +1 @@
export const CARD_VERSION = '1.5.1';
export const CARD_VERSION = '1.6.0';

0 comments on commit 688e6c9

Please sign in to comment.