fix(style): replace bg colors with css variables (#1430)

* chore: replace bg colors with css variables

* chore: update bg colors for itemfilter

* chore: update bg colors for layercontrol

* chore: update bg colors for jsonform

* chore: remove select style from utils

* chore: fix format

* chore: remove styling from unstyled style

elements/itemfilter/src/style.eox.js

@@ -21,11 +21,12 @@ export const styleEOX = `
     #000000 20%,
     transparent
   );
-  --background-color: #fff;
+  --background-color: var(--eox-background-color, transparent);
   --padding: 0.5rem;
   --text-transform: capitalize;
   --form-flex-direction: column;
   --filter-display: block;
+  background-color: var(--background-color);
 }
 * {
   font-family: Roboto, sans-serif;
@@ -517,4 +518,7 @@ eox-itemfilter-results li.highlighted {
   font-size: x-small;
   top: -8px;
 }
+input {
+  background-color: var(--background-color);
+}
 `;

elements/jsonform/src/style.eox.js

@@ -1,4 +1,14 @@
 export const styleEOX = `
+  :host, :root {
+    --background-color: var(--eox-background-color, transparent);
+    background-color: var(--background-color, transparent);
+  }
+  form {
+    background-color: var(--background-color, transparent);
+  }
+  .CodeMirror {
+    background-color: var(--background-color, transparent);
+  }
   [data-schemaid=root] > .je-header {
     display: none;
   }

elements/layercontrol/src/components/tools-items.js

@@ -179,6 +179,7 @@ export class EOxLayerControlTabs extends LitElement {
       display: flex;
       justify-content: start;
       align-items: center;
+      background: var(--background-color) !important;
     }
     .listed label:not(:first-of-type) {
       margin-top: 10px;
@@ -204,7 +205,7 @@ export class EOxLayerControlTabs extends LitElement {
       cursor: pointer;
     }
     figure {
-      background: #00417011;
+      background: var(--background-color);
       border-top: 1px solid #0041701a;
       padding: 8px var(--padding);
     }

elements/layercontrol/src/main.js

@@ -268,6 +268,11 @@ export class EOxLayerControl extends LitElement {
 
       display: block;
       padding: var(--padding) 0;
+      --background-color: var(--eox-background-color, transparent);
+      background-color: var(--background-color, transparent);
+    }
+    select {
+      background-color: var(--background-color);
     }
   `;
 }

utils/styles/input.css

@@ -10,6 +10,7 @@ textarea {
   background: var(--background-color);
 }
 
+input,
 input[type="text"],
 input[type="url"],
 input[type="email"],
@@ -26,4 +27,5 @@ select {
   padding: 5px 7px;
   border-radius: 4px;
   border: 1px solid #0004;
+  background-color: var(--background-color);
 }

utils/styles/main.css

@@ -4,7 +4,7 @@
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
 
-  --background-color: var(--eox-background-color, white);
+  --background-color: var(--eox-background-color, transparent);
   --color: var(--eox-color, #2c3d49);
   --h-color: var(--eox-h-color, var(--color));