Update color vars in Svelte components - BUT NOT PAGES

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;

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>

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 {

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>

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;
   }

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;
   }