From b27b5f02d7310fb37e48aca68a7579fbb77c4ddf Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Mon, 25 Apr 2022 16:59:10 +0200
Subject: [PATCH] [Minor] Added styling for additional components

---
 bower.json                |  5 ++--
 strolch-wc-app-style.html | 50 +++++++++++++++++++++++++++------------
 strolch-wc-styles.html    |  4 +++-
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/bower.json b/bower.json
index b19f645..a61413f 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-styles",
   "description": "Strolch WebComponent Styles",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
@@ -17,6 +17,7 @@
   "homepage": "https://github.com/strolch-li/strolch-wc-styles",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.11.3"
+    "polymer": "Polymer/polymer#^1.12.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.3.1"
   }
 }
diff --git a/strolch-wc-app-style.html b/strolch-wc-app-style.html
index ea4bdd3..3e9986d 100644
--- a/strolch-wc-app-style.html
+++ b/strolch-wc-app-style.html
@@ -1,5 +1,6 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../paper-styles/color.html">
+
+<link rel="import" href="../paper-styles/paper-styles.html">
 
 <link rel="import" href="./strolch-wc-styles.html">
 
@@ -31,40 +32,59 @@
 
                 /* highlight colors */
                 --app-light-highlight-fg-color: black;
-                --app-light-highlight-bg-color: var(--paper-indigo-100);
+                --app-light-highlight-bg-color: #c5cae9;
                 --app-regular-highlight-fg-color: white;
-                --app-regular-highlight-bg-color: var(--paper-indigo-200);
+                --app-regular-highlight-bg-color: #9fa8da;
                 --app-dark-highlight-fg-color: white;
-                --app-dark-highlight-bg-color: var(--paper-indigo-400);
+                --app-dark-highlight-bg-color: #5c6bc0;
 
                 /* warning colors */
                 --app-light-warning-fg-color: white;
-                --app-light-warning-bg-color: var(--paper-red-200);
+                --app-light-warning-bg-color: #ef9a9a; /*var(--paper-red-200);*/
                 --app-regular-warning-fg-color: white;
-                --app-regular-warning-bg-color: var(--paper-red-700);
+                --app-regular-warning-bg-color: #d32f2f; /*var(--paper-red-700);*/
                 --app-dark-warning-fg-color: white;
-                --app-dark-warning-bg-color: var(--paper-red-700);
+                --app-dark-warning-bg-color: #b71c1c; /*var(--paper-red-700);*/
 
                 /* warning colors */
                 --app-light-warning2-fg-color: white;
-                --app-light-warning2-bg-color: var(--paper-amber-100);
+                --app-light-warning2-bg-color: #ffecb3; /*var(--paper-amber-100);*/
                 --app-regular-warning2-fg-color: white;
-                --app-regular-warning2-bg-color: var(--paper-amber-200);
+                --app-regular-warning2-bg-color: #ffe082; /*var(--paper-amber-200);*/
                 --app-dark-warning2-fg-color: white;
-                --app-dark-warning2-bg-color: var(--paper-amber-700);
+                --app-dark-warning2-bg-color: #ffa000; /*var(--paper-amber-700); */
 
                 /* decent colors */
                 --app-light-decent-fg-color: black;
-                --app-light-decent-bg-color: var(--paper-grey-100);
+                --app-light-decent-bg-color: #f5f5f5; /*var(--paper-grey-100);*/
                 --app-regular-decent-fg-color: black;
-                --app-regular-decent-bg-color: var(--paper-grey-200);
+                --app-regular-decent-bg-color: #eeeeee; /*var(--paper-grey-200); */
                 --app-dark-decent-fg-color: black;
-                --app-dark-decent-bg-color: var(--paper-grey-300);
+                --app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
 
                 --paper-toolbar-background: var(--app-dark-highlight-bg-color);
+                --paper-dialog-button-color: var(--app-dark-highlight-bg-color);
 
             }
 
+            app-toolbar {
+                background-color: var(--app-dark-highlight-bg-color);
+                color: var(--app-regular-highlight-fg-color);
+            }
+
+            paper-menu {
+                --paper-menu-selected-item: {
+                    background-color: var(--app-light-highlight-bg-color);
+                };
+                --paper-menu-focused-item: {
+                    background-color: var(--app-regular-highlight-bg-color);
+                };
+            }
+
+            paper-menu paper-item:hover {
+                background-color: var(--app-regular-highlight-bg-color);
+            }
+
             h1, h2, h3, h4, h5, h6 {
                 color: var(--app-primary-color);
             }
@@ -101,8 +121,8 @@
             }
 
             paper-button[disabled] {
-                background: var(--paper-grey-200);
-                color: var(--paper-grey-500);
+                background: #eeeeee;
+                color: #9e9e9e;
             }
 
             paper-checkbox {
diff --git a/strolch-wc-styles.html b/strolch-wc-styles.html
index 0f12eb2..27fb436 100644
--- a/strolch-wc-styles.html
+++ b/strolch-wc-styles.html
@@ -1,8 +1,10 @@
 <link rel="import" href="../polymer/polymer.html">
 
+<link rel="import" href="../paper-styles/paper-styles.html">
+
 <dom-module id="strolch-wc-styles">
     <template>
-        <style>
+        <style is="custom-style">
 
             .g-card {
                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),