Issue #10: Fixing tab colors for dark theme. Using opportunity to cle…

…an up color vars for consistency.
patricknelson · Oct 2, 2023 · 04773fa · 04773fa
1 parent d70a244
commit 04773fa
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/demo/src/app.css b/demo/src/app.css
@@ -1,20 +1,23 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+  --dark-gray: #242424;
+  --light-gray: #f9f9f9;
+  --orange: #ff3e00;
+  --text-color: var(--light-gray);
+  --link-color: #646cff;
+  --link-hover: #535bf2;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: var(--text-color);
+  background-color: var(--dark-gray);
 
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-
-  --light-gray: #f9f9f9;
-  --orange: #ff3e00; /* you happy you have svelte-retag? 🧀 */
 }
 
 html {
@@ -23,11 +26,12 @@ html {
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--link-color);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  /* simpler across light/dark themes */
+  opacity: 0.9;
 }
 
 body {
@@ -69,7 +73,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--link-color);
 }
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -85,13 +89,7 @@ code {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
+    --text-color: var(--dark-gray);
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: var(--light-gray);
-  }
 }
diff --git a/demo/src/lib/Counter.svelte b/demo/src/lib/Counter.svelte
@@ -64,15 +64,15 @@
 		font-size: 1em;
 		font-weight: 500;
 		font-family: inherit;
-		background-color: #f9f9f9;
+		background-color: var(--light-gray);
 		cursor: pointer;
 		transition: border-color 0.25s;
 		margin: 10px 0;
-		/*color: $dark-text-color;*/
+		color: var(--dark-gray);
 	}
 
 	button:hover {
-		border-color: #646cff;
+		border-color: var(--link-color);
 	}
 
 	button:focus-visible {

diff --git a/demo/src/lib/tabs/TabButton.svelte b/demo/src/lib/tabs/TabButton.svelte
@@ -12,18 +12,27 @@
 	button {
 		background: none;
 		border: none;
-		border-bottom: 2px solid white;
+		border-bottom: 2px solid transparent;
 		border-radius: 0;
 		margin: 0;
-		color: #ccc;
 	}
 
 	.selected {
 		border-bottom: 2px solid var(--orange);
-		color: #333;
+	}
+	.selected span { /* see below */
+		opacity: 1;
+	}
+
+	/* Wrapping with a span, since I wish we could just dynamically mix in alpha to an existing HEX code instead of using RGB vars. */
+	span {
+		color: var(--text-color);
+		opacity: 0.2;
 	}
 </style>
 
 <button class:selected="{$selectedTab === tab}" on:click="{() => selectTab(tab)}">
-	<slot></slot>
+	<span>
+		<slot></slot>
+	</span>
 </button>