[chrome] fix a few more unstyled patches

Author: velzie

packages/chrome/src/App.tsx

@@ -1,4 +1,5 @@
 import type { ComponentContext } from "dreamland/core";
+import { css } from "dreamland/core";
 import { TabStrip } from "./components/TabStrip/TabStrip";
 import { browser } from "./Browser";
 import type { Tab } from "./Tab";
@@ -72,8 +73,18 @@ export function App(props: {}, cx: ComponentContext) {
 			{use(browser.activetab.url, browser.settings.showBookmarksBar)
 				.map(([u, pinned]) => pinned || u.href === "puter://newtab")
 				.andThen(<BookmarksStrip />)}
-			<div style="border-bottom: 1px solid var(--bg20)"></div>
+			<div class="separator"></div>
 			{cx.children}
 		</div>
 	);
 }
+App.style = css`
+	:scope {
+		background-color: var(--toolbar);
+		--separator-color: color-mix(in srgb, currentColor 10%, transparent);
+	}
+	.separator {
+		color: var(--toolbar);
+		/*border-bottom: 1px solid var(--separator-color);*/
+	}
+`;

packages/chrome/src/components/Omnibar/OmnibarButton.tsx

@@ -38,7 +38,7 @@ OmnibarButton.style = css`
 		opacity: 0.4;
 	}
 	:scope.active:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 	:scope.active {
 		opacity: 1;

packages/chrome/src/components/Omnibar/UrlInput.tsx

@@ -137,14 +137,15 @@ UrlInput.style = css`
 	}
 
 	.placeholder {
-		color: var(--fg4);
+		color: var(--toolbar_text);
+		opacity: 0.5;
 		display: flex;
 		align-items: center;
 	}
 
 	.lefticon {
 		font-size: 1.15em;
-		color: var(--fg2);
+		color: var(--toolbar_text);
 		display: flex;
 		margin: 0.25em;
 

packages/chrome/src/style.css

@@ -81,6 +81,17 @@ body.light-mode {
 :root {
 	font-family: "Inter", system-ui, sans-serif;
 	--tab-height: 33px;
+
+	--toolbarbutton-hover-background: color-mix(
+		in srgb,
+		currentColor 17%,
+		transparent
+	);
+	--toolbarbutton-active-background: color-mix(
+		in srgb,
+		currentColor 30%,
+		transparent
+	);
 }
 
 * {