[chrome] use firefox themes instead of chrome themes

Author: velzie

packages/chrome/src/App.tsx

@@ -33,24 +33,26 @@ export function App(props: {}, cx: ComponentContext) {
 	use(browser.settings.theme).listen(applyTheme);
 
 	const theme = {
-		colors: {
-			frame: [81, 111, 163],
-			toolbar: [145, 168, 208],
-			ntp_background: [131, 156, 200],
-			tab_text: [27, 43, 70],
-			bookmark_text: [27, 43, 70],
-			tab_background_text: [255, 255, 255],
-			ntp_text: [27, 43, 70],
-		},
-		tints: {
-			buttons: [0.6, 1, 0.2],
-			frame_incognito: [0.6, 0.5, 0.25],
-		},
+		toolbar: "rgb(45, 41, 59)",
+		toolbar_text: "rgb(236, 191, 189)",
+		frame: "rgb(30, 30, 40)",
+		tab_background_text: "rgb(215, 218, 224)",
+		toolbar_field: "rgb(30, 30, 40)",
+		toolbar_field_text: "rgb(236, 191, 189)",
+		tab_line: "rgb(236, 191, 189)",
+		popup: "rgb(30, 30, 40)",
+		popup_text: "rgb(236, 191, 189)",
+		icons: "rgb(198, 170, 232)",
+		ntp_background: "rgb(21, 18, 28)",
+		ntp_text: "rgb(164, 185, 239)",
+		popup_border: "rgb(236, 191, 189)",
+		toolbar_top_separator: "rgb(30, 30, 40)",
+		tab_loading: "rgb(236, 191, 189)",
 	};
 
 	cx.mount = () => {
-		for (const [key, value] of Object.entries(theme.colors)) {
-			cx.root.style.setProperty(`--${key}`, `rgb(${value.join(",")})`);
+		for (const [key, value] of Object.entries(theme)) {
+			cx.root.style.setProperty(`--${key}`, value);
 		}
 	};
 

packages/chrome/src/components/BookmarksStrip.tsx

@@ -104,7 +104,17 @@ BookmarksStrip.style = css`
 		display: flex;
 		gap: 0.5em;
 		background: var(--toolbar);
-		color: var(--bookmark_text);
+		color: var(--toolbar_text);
+		--toolbarbutton-hover-background: color-mix(
+			in srgb,
+			currentColor 17%,
+			transparent
+		);
+		--toolbarbutton-active-background: color-mix(
+			in srgb,
+			currentColor 30%,
+			transparent
+		);
 	}
 
 	button {
@@ -115,10 +125,11 @@ BookmarksStrip.style = css`
 
 		padding-left: 0.25em;
 		padding-right: 0.25em;
-		border-radius: var(--radius);
+		border-radius: 3px;
+		color: var(--toolbar_text);
 	}
 	button:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 	button span {
 		white-space: nowrap;

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

@@ -32,13 +32,15 @@ OmnibarButton.style = css`
 		padding: 0.25em;
 
 		font-size: 1.15em;
-		color: var(--fg2);
+		color: var(--icons);
 		border-radius: 0.2em;
+
+		opacity: 0.4;
 	}
 	:scope.active:hover {
 		background: var(--bg20);
 	}
 	:scope.active {
-		color: var(--fg2);
+		opacity: 1;
 	}
 `;

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

@@ -38,7 +38,7 @@ function InactiveBar(props: { subtle: boolean; active: boolean }) {
 }
 InactiveBar.style = css`
 	:scope {
-		background: var(--bg);
+		background: var(--toolbar_field);
 		width: 100%;
 		border: none;
 		outline: none;
@@ -411,11 +411,11 @@ Omnibox.style = css`
 	.overflow {
 		position: absolute;
 		display: none;
-		background: var(--bg02);
+		background: var(--toolbar_field);
 		width: 100%;
 		border-radius: 4px;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-		border: 1px solid var(--fg5);
+		border: 1px solid var(--toolbar_text);
 		padding-bottom: 0.5em;
 	}
 	.overflow .spacer {

packages/chrome/src/components/TabStrip/DragTab.tsx

@@ -141,10 +141,12 @@ DragTab.style = css`
 		--tab-active-border-width: 11px;
 		--tab-active-border-radius: 10px;
 		--tab-active-border-radius-neg: -10px;
+
+		--tab-selected-textcolor: var(--toolbar_text);
 	}
 
 	.main {
-		height: 28px;
+		height: var(--tab-height);
 		min-width: 0;
 		width: 100%;
 
@@ -169,9 +171,9 @@ DragTab.style = css`
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		height: 100%;
-		vertical-align: center;
-		line-height: 1.2;
+		display: flex;
+		align-items: center;
+		line-height: var(--tab-height);
 	}
 	.main .close > * {
 		width: 14px;
@@ -190,22 +192,32 @@ DragTab.style = css`
 
 		padding: 0;
 		margin-left: 8px;
+		position: relative;
 	}
-	.close:hover {
-		background: red;
-		border-radius: 0.5em;
+	.close:hover::before {
+		background: color-mix(in srgb, currentColor 17%, transparent);
+		position: absolute;
+		content: "";
+		width: 21px;
+		height: 21px;
+		top: -4px;
+		left: -4px;
+		border-radius: 3px;
 	}
 
 	.main:not(.active):hover {
 		transition: background 250ms;
-
-		background: var(--background_tab);
+		background-color: color-mix(in srgb, currentColor 7%, transparent);
+		/*background: var(--background_tab);*/
 		/*color: var(-);*/
 	}
 
 	.main.active {
 		background: var(--toolbar);
-		color: var(--tab_text);
+		color: var(--tab-selected-textcolor);
+
+		outline: 1px solid var(--tab-selected-textcolor);
+		outline-offset: -1px;
 	}
 
 	.belowcontainer {

packages/chrome/src/components/TabStrip/TabStrip.tsx

@@ -303,9 +303,10 @@ export function TabStrip(
 }
 TabStrip.style = css`
 	:scope {
+		--tab-padding: 4px;
 		background: var(--frame);
-		padding: 6px 12px;
-		height: calc(28px + 12px);
+		padding: var(--tab-padding) 12px;
+		height: calc(var(--tab-height) + calc(var(--tab-padding) * 2));
 		z-index: 2;
 
 		position: relative;

packages/chrome/src/pages/NewTabPage.tsx

@@ -77,8 +77,8 @@ NewTabPage.style = css`
 		flex-direction: column;
 		align-items: center;
 		font-family: var(--font);
-		background: var(--bg01);
-		color: var(--fg);
+		background: var(--ntp_background);
+		color: var(--ntp_text);
 
 		padding: 5em;
 	}

packages/chrome/src/style.css

@@ -80,6 +80,7 @@ body.light-mode {
 
 :root {
 	font-family: "Inter", system-ui, sans-serif;
+	--tab-height: 33px;
 }
 
 * {