From 72495a63bea7834d15a28ff0e13d69da6d2bed04 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 6 Oct 2023 12:31:17 +0100
Subject: [PATCH] Update color vars in Svelte components - BUT NOT PAGES

---
 src/lib/islands/input-island-form.svelte     |  4 ++--
 src/lib/islands/island.svelte                |  4 ++--
 src/lib/islands/overlay-island.svelte        |  4 ++--
 src/lib/islands/quick-link-island.svelte     |  4 ++--
 src/lib/islands/quick-link-set-island.svelte |  4 ++--
 src/lib/islands/result-island.svelte         |  2 +-
 src/lib/navigation/LogoutButton.svelte       |  4 ++--
 src/lib/navigation/done.svelte               |  4 ++--
 src/lib/navigation/header.svelte             |  6 +++---
 src/lib/navigation/loading.svelte            |  6 +++---
 src/lib/navigation/nav-ldb.svelte            |  6 +++---
 src/lib/navigation/nav.svelte                |  4 ++--
 src/lib/overlays/welcome.svelte              | 10 ++++-----
 src/lib/themes.css                           | 22 ++++++++------------
 src/lib/train/train-detail.svelte            | 12 +++++------
 15 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/src/lib/islands/input-island-form.svelte b/src/lib/islands/input-island-form.svelte
index 433c6de..a3afc07 100644
--- a/src/lib/islands/input-island-form.svelte
+++ b/src/lib/islands/input-island-form.svelte
@@ -39,7 +39,7 @@
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
-    background-color: var(--main-bg-color);
-    color: var(--link-color);
+    background-color: var(--island-button-color);
+    color: var(--island-link-color);
   }
 </style>
diff --git a/src/lib/islands/island.svelte b/src/lib/islands/island.svelte
index fa72635..b00ad4e 100644
--- a/src/lib/islands/island.svelte
+++ b/src/lib/islands/island.svelte
@@ -14,7 +14,7 @@
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: 600;
     font-size: 20px;
-    color: var(--main-text-color);
+    color: var(--island-header-color);
   }
   div {
     width: 85%;
@@ -22,7 +22,7 @@
     margin: auto;
     margin-top: 25px;
     padding: 10px;
-    background-color: var(--overlay-color);
+    background-color: var(--island-bg-color);
     border-radius: 10px;
     box-shadow: 2px 2px 30px rgba(0,0,0,0.19);
   }
diff --git a/src/lib/islands/overlay-island.svelte b/src/lib/islands/overlay-island.svelte
index c75b6d8..f87dc2c 100644
--- a/src/lib/islands/overlay-island.svelte
+++ b/src/lib/islands/overlay-island.svelte
@@ -12,7 +12,7 @@
 <style>
   span {
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    color: var(--main-text-color);
+    color: var(--island-header-color);
     font-weight: 600;
     font-size: 20px;
   }
@@ -29,7 +29,7 @@
     margin: auto;
     margin-top: 25px;
     padding: 10px;
-    background-color: var(--overlay-color);
+    background-color: var(--overlay-island-bg-color);
     border-radius: 10px;
     z-index: 1000;
   }
diff --git a/src/lib/islands/quick-link-island.svelte b/src/lib/islands/quick-link-island.svelte
index 44679ce..707458d 100644
--- a/src/lib/islands/quick-link-island.svelte
+++ b/src/lib/islands/quick-link-island.svelte
@@ -47,7 +47,7 @@
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;
-    background-color: var(--main-bg-color);
-    color: var(--link-color);
+    background-color: var(--island-button-color);
+    color: var(--island-link-color);
   }
 </style>
diff --git a/src/lib/islands/quick-link-set-island.svelte b/src/lib/islands/quick-link-set-island.svelte
index 09a4218..43b7ca4 100644
--- a/src/lib/islands/quick-link-set-island.svelte
+++ b/src/lib/islands/quick-link-set-island.svelte
@@ -109,7 +109,7 @@
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
-    background-color: var(--main-bg-color);
-    color: var(--link-color);
+    background-color: var(--island-button-color);
+    color: var(--island-link-color);
   }
 </style>
diff --git a/src/lib/islands/result-island.svelte b/src/lib/islands/result-island.svelte
index 6e1e2fe..0b33306 100644
--- a/src/lib/islands/result-island.svelte
+++ b/src/lib/islands/result-island.svelte
@@ -26,6 +26,6 @@
 
 <style>
   p {
-    color: white;
+    color: var(--island-text-color);
   }
 </style>
diff --git a/src/lib/navigation/LogoutButton.svelte b/src/lib/navigation/LogoutButton.svelte
index 83ecb2b..4d32d4c 100644
--- a/src/lib/navigation/LogoutButton.svelte
+++ b/src/lib/navigation/LogoutButton.svelte
@@ -12,8 +12,8 @@
 <style>
   .logout {
     border: none;
-    background-color: var(--overlay-color);
-    color: white;
+    background-color: var(--island-button-color);
+    color: var(--island-link-color);
     width: 35%;
     border-radius: 50px;
     font-size: 20px;
diff --git a/src/lib/navigation/done.svelte b/src/lib/navigation/done.svelte
index fed6c66..37162b1 100644
--- a/src/lib/navigation/done.svelte
+++ b/src/lib/navigation/done.svelte
@@ -15,7 +15,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     margin: auto;
-    background-color: var(--overlay-color);
+    background-color: var(--overlay-island-bg-color);
     border-radius: 15px;
     padding: 20px;
     padding-bottom: 1px;
@@ -26,6 +26,6 @@
     padding-top: 0px;
     font-weight: bolder;
     overflow-wrap: normal;
-    color: white;
+    color: var(--island-text-color);
   }
 </style>
diff --git a/src/lib/navigation/header.svelte b/src/lib/navigation/header.svelte
index 4a762b0..f0d4a21 100644
--- a/src/lib/navigation/header.svelte
+++ b/src/lib/navigation/header.svelte
@@ -17,8 +17,8 @@
 
 <style>
   .headerBar {
-    background: var(--overlay-color-solid);
-    color: var(--main-text-color);
+    background: var(--island-bg-solid);
+    color: var(--island-header-color);
     position: fixed;
     top: 0;
     left: 0;
@@ -27,7 +27,7 @@
     padding: 0;
     height: 50px;
     z-index: 20;
-    box-shadow: 0 3px 30px rgba(0,0,0,0.19);
+    box-shadow: 0 3px 30px var(--box-shadow-color);
   }
 
   img {
diff --git a/src/lib/navigation/loading.svelte b/src/lib/navigation/loading.svelte
index 210e17d..0ffbf2f 100644
--- a/src/lib/navigation/loading.svelte
+++ b/src/lib/navigation/loading.svelte
@@ -19,7 +19,7 @@
   .spinner::before {
     animation: 1.5s linear infinite spinner;
     animation-play-state: inherit;
-    border: solid 5px var(--overlay-color);
+    border: solid 5px var(--overlay-island-bg-color);
     border-bottom-color: white;
     border-radius: 50%;
     content: '';
@@ -37,7 +37,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     margin: auto;
-    background-color: var(--overlay-color);
+    background-color: var(--overlay-island-bg-color);
     border-radius: 15px;
     padding: 20px;
     padding-bottom: 1px;
@@ -48,6 +48,6 @@
     padding-top: 50px;
     font-weight: bolder;
     overflow-wrap: normal;
-    color: white;
+    color: var(--island-text-color);
   }
 </style>
diff --git a/src/lib/navigation/nav-ldb.svelte b/src/lib/navigation/nav-ldb.svelte
index 7025c09..4d84a8d 100644
--- a/src/lib/navigation/nav-ldb.svelte
+++ b/src/lib/navigation/nav-ldb.svelte
@@ -36,18 +36,18 @@
     left: 0;
     width: 100%;
     height: 50px;
-    background-color: var(--overlay-color);
+    background-color: var(--island-overlay-bg-color);
   }
 
   .footerLink {
     width: 30%;
     height: 100%;
-    background-color: var(--overlay-color);
+    background-color: var(--island-overlay-bg-color);
     border-style: solid;
     border-width: 1px;
     border-top: none;
     border-bottom: none;
-    border-color: rgba(0, 0, 0, 0.24);
+    border-color: var(--box-shadow-color);
     text-decoration: double;
     font-weight: 600;
   }
diff --git a/src/lib/navigation/nav.svelte b/src/lib/navigation/nav.svelte
index cef35fc..a358f60 100644
--- a/src/lib/navigation/nav.svelte
+++ b/src/lib/navigation/nav.svelte
@@ -45,12 +45,12 @@
     flex: 12;
     width: 30%;
     height: 100%;
-    background-color: var(--overlay-color);
+    background-color: var(--overlay-island-bg-color);
     border-style: solid;
     border-width: 1px;
     border-top: none;
     border-bottom: none;
-    border-color: rgba(0, 0, 0, 0.24);
+    border-color: var(--box-shadow-color);
     text-decoration: double;
     font-weight: 600;
   }
diff --git a/src/lib/overlays/welcome.svelte b/src/lib/overlays/welcome.svelte
index 6f52a81..b5421c6 100644
--- a/src/lib/overlays/welcome.svelte
+++ b/src/lib/overlays/welcome.svelte
@@ -58,17 +58,17 @@
     margin: auto;
     margin-top: 25px;
     padding: 10px;
-    background-color: grey;
+    background-color: var(--overlay-island-color);
     border-radius: 10px;
     z-index: 2500;
-    box-shadow: 1px 1px 3px rgba(0,0,0,0.19);
+    box-shadow: 1px 1px 3px var(--box-shadow-color);
   }
 
   .navButton {
     border-radius: 50px;
     border: none;
-    color: white;
-    background-color: var(--overlay-color);
+    color: var(--island-link-color);
+    background-color: var(--overlay-island-bg-color);
     width: 50px;
     height: 50px;
     font-size: 20px;
@@ -96,6 +96,6 @@
   }
 
   div {
-    color: white;
+    color: var(--island-text-color);
   }
 </style>
diff --git a/src/lib/themes.css b/src/lib/themes.css
index 745ae08..3270511 100644
--- a/src/lib/themes.css
+++ b/src/lib/themes.css
@@ -9,7 +9,7 @@
     --second-text-color: #0afdfd;
     --note-text-color: #9de7ff;
     --link-color: azure;
-    --box-border-color: ;
+    --box-border-color: rgba(0,0,0,0.19);
     --link-visited-color: azure;
     --main-alert-color: #ed6d00;
     --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
@@ -21,18 +21,14 @@
 :root {
     --main-bg-color: #404c55;
     --second-bg-color: #2b343c;
-    --accent-color: #007979;
-    --island-color: #3c6f79de;
-    --main-heading-color: #00b7b7;
-    --main-text-color: #0afdfd;
-    --note-text-color: #9de7ff;
-    --link-color: azure;
-    --box-border-color: rgba(0,0,0,0.19);
-    --link-visited-color: azure;
-    --main-alert-color: #ed6d00;
-    --second-alert-color: #e77f00;
-    --main-warning-color: orange;
-    --board-name-color: #fcfc09;
+    --island-bg-color: ;
+    --island-bg-solid: ;
+    --island-button-color: ;
+    --island-link-color: ;
+    --island-header-color: ;
+    --island-text-color: ;
+    --overlay-island-bg-color: ;
+    --box-shadow-color: rgba(0,0,0,0.19);
 }
 */
 /*
diff --git a/src/lib/train/train-detail.svelte b/src/lib/train/train-detail.svelte
index 214a1e4..ff63fb6 100644
--- a/src/lib/train/train-detail.svelte
+++ b/src/lib/train/train-detail.svelte
@@ -104,7 +104,7 @@
     width: 95%;
     max-width: 600px;
     height: auto;
-    background-color: var(--overlay-color);
+    background-color: var(--overlay-island-bg-color);
     border-radius: 10px;
     overflow: hidden;
     transition: height 500ms ease-in-out;
@@ -117,12 +117,12 @@
     padding-top: 12px;
     padding-bottom: 10px;
     font-family: ubuntu, monospace;
-    color: white;
+    color: var(--island-text-color);
   }
   #container-arrow {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 600;
-    color: white;
+    color: var(--island-text-color);
     margin: 0;
     padding: 0;
     position: absolute;
@@ -142,14 +142,14 @@
   .pis {
     font-size: 18px;
     font-weight: 600;
-    color: azure;
+    color: var(--island-header-color);
     margin-top: 10px;
     margin-bottom: 5px;
   }
   .svc-detail {
     margin-top: 2px;
     margin-bottom: 2px;
-    color: white;
+    color: var(--island-text-color);
   }
   .validity {
     font-size: 14px;
@@ -158,6 +158,6 @@
     margin: auto;
     padding-top: 10px;
     padding-bottom: 10px;
-    color: white;
+    color: var(--island-text-color);
   }
 </style>