[chrome] add styled colors to siteinformationpopup and urlinput

Author: velzie

packages/chrome/src/components/Button.tsx

@@ -21,6 +21,9 @@ export function Button(
 }
 
 Button.style = css`
+	:scope {
+		color: inherit;
+	}
 	:scope:not(.icon) {
 		background: var(--bg02);
 		border: 1px solid var(--fg4);

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

@@ -122,18 +122,18 @@ UrlInput.style = css`
 		text-wrap: nowrap;
 		overflow: hidden;
 		font-family: var(--font);
-		color: var(--fg);
+		color: var(--toolbar_text);
 		cursor: text;
 	}
 	.inactiveurl {
 		display: flex;
 		align-items: center;
-		color: var(--fg);
+		color: var(--toolbar_text);
 	}
 	.inactiveurl .subdomain,
 	.inactiveurl .rest {
 		opacity: 0.7;
-		color: var(--fg2);
+		color: var(--toolbar_text);
 	}
 
 	.placeholder {

packages/chrome/src/components/SiteInformationPopup.tsx

@@ -50,13 +50,16 @@ SiteInformationPopup.style = css`
 		flex-direction: column;
 		gap: 1em;
 		width: 20em;
+
+		color: var(--toolbar_text);
 	}
 
 	.buttoniconscontainer {
 		flex: 1;
 		display: flex;
 		align-items: top;
 		justify-content: end;
+		color: var(--toolbar_text);
 	}
 
 	.content {
@@ -66,14 +69,14 @@ SiteInformationPopup.style = css`
 	.header {
 		padding: 1em;
 		display: flex;
-		border-bottom: 1px solid var(--fg4);
+		border-bottom: 1px solid var(--toolbar_text);
 	}
 	.header span {
 		font-size: 1.15em;
 	}
 
 	.footer {
-		border-top: 1px solid var(--fg4);
+		border-top: 1px solid var(--toolbar_text);
 		display: flex;
 		flex-direction: column;
 	}
@@ -86,6 +89,6 @@ SiteInformationPopup.style = css`
 		gap: 1em;
 	}
 	.entry:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 `;