Add theme variables

iantrich · iantrich · commit 688e6c9167d9 · 2020-06-29T22:41:12.000-05:00
diff --git a/.devcontainer/configuration.yaml b/.devcontainer/configuration.yaml
@@ -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
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -1,6 +1,3 @@
-resources:
-  - url: http://127.0.0.1:5000/radial-menu.js
-    type: module
 views:
   - cards:
       - type: custom:radial-menu
diff --git a/README.md b/README.md
@@ -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:!
@@ -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
 
@@ -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
@@ -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
 ```
 
diff --git a/hacs.json b/hacs.json
@@ -1,4 +1,5 @@
 {
     "name": "Radial Menu Element",
-    "render_readme": true
+    "render_readme": true,
+    "homeassistant": "0.110.0"
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "radial-menu",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Lovelace radial-menu",
   "keywords": [
     "home-assistant",
@@ -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"
   }
-}
+}
diff --git a/src/const.ts b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.5.1';
+export const CARD_VERSION = '1.6.0';
diff --git a/src/radial-menu.ts b/src/radial-menu.ts
diff --git a/src/types.ts b/src/types.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "Radial Menu Element",`
`3`		`- "render_readme": true`
	`3`	`+ "render_readme": true,`
	`4`	`+ "homeassistant": "0.110.0"`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export const CARD_VERSION = '1.5.1';`
	`1`	`+export const CARD_VERSION = '1.6.0';`