updating color scheme

dimm-city · Sep 1, 2024 · 1f81314 · 1f81314
1 parent 26c440a
commit 1f81314
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 27 deletions.
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
@@ -91,7 +91,6 @@
 		font-family: var(--font-header);
 	}
 	button.close-button {
-		color: var(--color-accent-one);
 		font-size: 1.5rem;
 		display: block;
 		position: absolute;
@@ -101,10 +100,9 @@
 		margin: 0;
 		background-color: transparent;
 	}
-
-	button.close-button:focus-visible,
 	button.close-button:hover {
-		color: var(--color-accent-two);
+		box-shadow: none;
+		text-shadow: var(--shadow-accent-text);
 	}
 
 	dialog {

diff --git a/src/lib/components/SessionManager.svelte b/src/lib/components/SessionManager.svelte
@@ -176,7 +176,7 @@
 		<hr />
 		<div>
 			{#if mode === 'create' || mode == null}
-				<button on:click={createSession}>Create</button>
+				<button class="header" on:click={createSession}>Create</button>
 				<small>
 					Switch to <a href="#connect" class="switch-mode" on:click={() => (mode = 'join')}>
 						connect mode
@@ -240,11 +240,4 @@
 		align-items: center;
 		justify-content: space-between;
 	}
-	button {
-		font-family: var(--font-header);
-		color: var(--color-accent-one);
-		background-color: var(--color-accent-two);
-		width: 100%;
-		margin-block: 0.5rem;
-	}
 </style>
diff --git a/src/lib/components/Token.svelte b/src/lib/components/Token.svelte
@@ -245,16 +245,12 @@
 		align-items: center;
 		justify-content: center;
 		position: absolute;
-		background-color: whitesmoke;
 		--aug-border-all: 1px;
 		border-radius: 50%;
 	}
 	.token.enable {
 		cursor: pointer;
 	}
-	.token i {
-		color: rgb(253, 28, 242);
-	}
 	.token img {
 		margin: 1rem;
 	}
@@ -287,21 +283,24 @@
 	.edit-buttons {
 		display: flex;
 		justify-content: space-around;
+		box-shadow: none;
 	}
 
 	.icon-buttons button,
 	.edit-buttons button {
 		background: none;
 		border: none;
-		color: #fff; /* White color for icons */
+		color: var(--color-accent-one);
 		cursor: pointer;
 		padding: 5px;
 		font-size: 20px;
 	}
 
 	.icon-buttons button:hover,
 	.edit-buttons button:hover {
-		color: var(--color-accent-one); /* Highlight color on hover */
+		color: var(--color-accent-four); /* Highlight color on hover */
+
+		box-shadow: none;
 	}
 
 	input[type='text'] {

diff --git a/src/lib/style.css b/src/lib/style.css
@@ -26,18 +26,23 @@
     --color-dark-overlay: rgba(17, 17, 17, 0.5);
     --color-dark: rgba(0, 0, 0, 0.95);
 
+    /* Updated Cyberpunk Palette */
     --color-accent-one: #e6ff00;
-    --color-accent-two: #c643ff;
-    --color-accent-three: #ff15cb;
-    --color-accent-four: #00d4ff;
-
+    /* Electric Yellow as the primary accent */
+    --color-accent-two: #00d4ff;
+    /* Neon Orange */
+    --color-accent-three: #ff8300;
+    /* Neon Blue */
+    --color-accent-four: #c643ff;
+    /* Vivid Purple */
 
     /* Borders and Shadows */
     --border-width: 1px;
     --border-radius: 0rem;
     --shadow-default: 0 4px 6px var(--color-dark-overlay);
     --shadow-accent: 0 0 20px var(--color-accent-four);
     --shadow-accent-small: 0 0 10px var(--color-accent-four);
+    --shadow-accent-text: 0 0 4px var(--color-accent-one);
 
     --outline-width: 2px;
 }
@@ -134,22 +139,29 @@ a:hover {
 
 button {
     font-family: var(--font-main);
-    color: var(--color-text);
-    background-color: var(--color-accent-two);
+    color: var(--color-accent-one);
+    background-color: var(--color-accent-four);
     padding: 0.5rem 1rem;
     border-radius: var(--border-radius);
-    transition: background-color, box-shadow;
+    transition: background-color, box-shadow, text-shadow;
     transition-duration: 500ms;
     transition-timing-function: ease-in-out;
 }
 
 button:hover {
-    background-color: var(--color-accent-three);
-    color: var(--color-accent-one);
     box-shadow: var(--shadow-accent-small);
+    text-shadow: var(--shadow-accent-text);
     transition-duration: 300ms;
 }
 
+button.header {
+    font-family: var(--font-header);
+    width: 100%;
+    margin-block: 0.5rem;
+    color: var(--color-accent-four);
+    background-color: var(--color-accent-one);
+}
+
 input,
 textarea {
     background-color: var(--color-dark);