From 90d7214915a7a7732677345068a9388c5baf9063 Mon Sep 17 00:00:00 2001 From: velzie Date: Fri, 24 Oct 2025 19:04:54 -0400 Subject: [PATCH 01/10] [chrome] (google) chrome theme test --- packages/chrome/src/App.tsx | 24 ++++++++++++++++++- .../chrome/src/components/BookmarksStrip.tsx | 4 ++-- .../chrome/src/components/Omnibar/Omnibar.tsx | 2 +- .../src/components/TabStrip/DragTab.tsx | 16 +++++++------ .../src/components/TabStrip/TabStrip.tsx | 2 +- 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index e75aba54..db6a9fc2 100644 --- a/packages/chrome/src/App.tsx +++ b/packages/chrome/src/App.tsx @@ -5,7 +5,7 @@ import type { Tab } from "./Tab"; import { BookmarksStrip } from "./components/BookmarksStrip"; import { Omnibar } from "./components/Omnibar/Omnibar"; -export function App(_, cx: ComponentContext) { +export function App(props: {}, cx: ComponentContext) { const applyTheme = () => { let theme = browser.settings.theme; @@ -32,6 +32,28 @@ export function App(_, 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], + }, + }; + + cx.mount = () => { + for (const [key, value] of Object.entries(theme.colors)) { + cx.root.style.setProperty(`--${key}`, `rgb(${value.join(",")})`); + } + }; + return (
Date: Mon, 10 Nov 2025 18:42:12 -0500 Subject: [PATCH 02/10] [chrome] use firefox themes instead of chrome themes --- packages/chrome/src/App.tsx | 32 ++++++++++--------- .../chrome/src/components/BookmarksStrip.tsx | 17 ++++++++-- .../src/components/Omnibar/OmnibarButton.tsx | 6 ++-- .../chrome/src/components/Omnibar/Omnibox.tsx | 6 ++-- .../src/components/TabStrip/DragTab.tsx | 32 +++++++++++++------ .../src/components/TabStrip/TabStrip.tsx | 5 +-- packages/chrome/src/pages/NewTabPage.tsx | 4 +-- packages/chrome/src/style.css | 1 + 8 files changed, 66 insertions(+), 37 deletions(-) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index 024e3c4d..d932b08b 100644 --- a/packages/chrome/src/App.tsx +++ b/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); } }; diff --git a/packages/chrome/src/components/BookmarksStrip.tsx b/packages/chrome/src/components/BookmarksStrip.tsx index f8bb9aa4..68fb5463 100644 --- a/packages/chrome/src/components/BookmarksStrip.tsx +++ b/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; diff --git a/packages/chrome/src/components/Omnibar/OmnibarButton.tsx b/packages/chrome/src/components/Omnibar/OmnibarButton.tsx index 64b6d960..53d3d5ba 100644 --- a/packages/chrome/src/components/Omnibar/OmnibarButton.tsx +++ b/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; } `; diff --git a/packages/chrome/src/components/Omnibar/Omnibox.tsx b/packages/chrome/src/components/Omnibar/Omnibox.tsx index d88b7b04..4dd71145 100644 --- a/packages/chrome/src/components/Omnibar/Omnibox.tsx +++ b/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 { diff --git a/packages/chrome/src/components/TabStrip/DragTab.tsx b/packages/chrome/src/components/TabStrip/DragTab.tsx index e554ccc8..ec477091 100644 --- a/packages/chrome/src/components/TabStrip/DragTab.tsx +++ b/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 { diff --git a/packages/chrome/src/components/TabStrip/TabStrip.tsx b/packages/chrome/src/components/TabStrip/TabStrip.tsx index 9b3291d5..b9dcc7e0 100644 --- a/packages/chrome/src/components/TabStrip/TabStrip.tsx +++ b/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; diff --git a/packages/chrome/src/pages/NewTabPage.tsx b/packages/chrome/src/pages/NewTabPage.tsx index d827c0c9..c76cb53f 100644 --- a/packages/chrome/src/pages/NewTabPage.tsx +++ b/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; } diff --git a/packages/chrome/src/style.css b/packages/chrome/src/style.css index f9cfe9a9..6d939cf3 100644 --- a/packages/chrome/src/style.css +++ b/packages/chrome/src/style.css @@ -80,6 +80,7 @@ body.light-mode { :root { font-family: "Inter", system-ui, sans-serif; + --tab-height: 33px; } * { From 30b547fa871dc228eeb59bcc609672e0820dfb0e Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:15:04 -0500 Subject: [PATCH 03/10] [ci] add amplify.yml --- amplify.yml | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 amplify.yml diff --git a/amplify.yml b/amplify.yml new file mode 100644 index 00000000..7136fe32 --- /dev/null +++ b/amplify.yml @@ -0,0 +1,65 @@ +version: 1 + +frontend: + phases: + preBuild: + commands: + - echo "preBuild enable corepack and prepare pnpm" + - corepack enable + - corepack prepare pnpm@latest --activate + - node -v + - npm -v + - pnpm -v || true + - echo "Install JS dependencies (root of monorepo)" + - pnpm install --frozen-lockfile + + - | + if ! command -v cargo >/dev/null 2>&1; then + echo "Installing rustup & cargo toolchain (stable)" + curl https://sh.rustup.rs -sSf | sh -s -- -y + source $HOME/.cargo/env + else + echo "cargo already available" + fi + + - | + if ! command -v wasm-bindgen >/dev/null 2>&1; then + echo "Installing wasm-bindgen-cli" + cargo install wasm-bindgen-cli --version 0.2.105 || true + fi + - | + if ! command -v wasm-snip >/dev/null 2>&1; then + echo "Installing wasm-snip" + cargo install --git https://github.com/r58playz/wasm-snip || true + fi + + build: + commands: + - echo "Build Dreamland" + - cd external/dreamland + - pnpm install --frozen-lockfile + - pnpm build + - cd - + - echo "1) Build Scramjet core" + - cd packages/scramjet/packages/core + + - echo "Pack core package" + - pnpm pack + - cd - + + - echo "2) Build frontend" + + - pnpm build + - VITE_PUTER_BRANDING=1 VITE_ISOLATION_ORIGIN="https://puter.zone" pnpm build:chrome + +# No tests, no artifact collection steps per request. + +cache: + paths: + - ~/.pnpm-store/**/* + - node_modules/**/* + - packages/**/node_modules/**/* + - packages/scramjet/packages/core/rewriter/wasm/out/**/* + - packages/scramjet/packages/core/dist/**/* + - $HOME/.cargo/**/* + - $HOME/.rustup/**/* From 0cf4ff900649f5f2a13730867277bca13054cba9 Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:16:00 -0500 Subject: [PATCH 04/10] [chrome] fix a few more unstyled patches --- packages/chrome/src/App.tsx | 13 ++++++++++++- .../chrome/src/components/Omnibar/OmnibarButton.tsx | 2 +- packages/chrome/src/components/Omnibar/UrlInput.tsx | 5 +++-- packages/chrome/src/style.css | 11 +++++++++++ 4 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index d932b08b..767faaeb 100644 --- a/packages/chrome/src/App.tsx +++ b/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()} -
+
{cx.children}
); } +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);*/ + } +`; diff --git a/packages/chrome/src/components/Omnibar/OmnibarButton.tsx b/packages/chrome/src/components/Omnibar/OmnibarButton.tsx index 53d3d5ba..f0463f10 100644 --- a/packages/chrome/src/components/Omnibar/OmnibarButton.tsx +++ b/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; diff --git a/packages/chrome/src/components/Omnibar/UrlInput.tsx b/packages/chrome/src/components/Omnibar/UrlInput.tsx index 6bf8257c..67a9c644 100644 --- a/packages/chrome/src/components/Omnibar/UrlInput.tsx +++ b/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; diff --git a/packages/chrome/src/style.css b/packages/chrome/src/style.css index 6d939cf3..d155bfdb 100644 --- a/packages/chrome/src/style.css +++ b/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 + ); } * { From 12a64ae759b5bd61177bf6de3349f781d66afeda Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:23:33 -0500 Subject: [PATCH 05/10] [chrome] fix unstyled menu --- packages/chrome/src/App.tsx | 2 +- packages/chrome/src/components/Menu.tsx | 8 ++++---- packages/chrome/src/style.css | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index 767faaeb..a75a420b 100644 --- a/packages/chrome/src/App.tsx +++ b/packages/chrome/src/App.tsx @@ -53,7 +53,7 @@ export function App(props: {}, cx: ComponentContext) { cx.mount = () => { for (const [key, value] of Object.entries(theme)) { - cx.root.style.setProperty(`--${key}`, value); + document.body.style.setProperty(`--${key}`, value); } }; diff --git a/packages/chrome/src/components/Menu.tsx b/packages/chrome/src/components/Menu.tsx index 09b31385..cdb6bf38 100644 --- a/packages/chrome/src/components/Menu.tsx +++ b/packages/chrome/src/components/Menu.tsx @@ -153,8 +153,8 @@ Menu.style = css` position: absolute; top: var(--y); left: var(--x); - background: var(--bg02); - border: 1px solid var(--fg4); + background-color: var(--frame); + border: 1px solid var(--toolbar_text); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1000; @@ -170,7 +170,7 @@ Menu.style = css` transform: scale(100%); } .separator { - border-top: 1px solid var(--fg4); + border-top: 1px solid var(--toolbar_text); } :scope.closing { transform: scale(95%); @@ -182,7 +182,7 @@ Menu.style = css` font-size: 0.8em; padding: 1em; text-align: left; - color: var(--fg); + color: var(--toolbar_text); display: flex; align-items: center; diff --git a/packages/chrome/src/style.css b/packages/chrome/src/style.css index d155bfdb..2ee475ad 100644 --- a/packages/chrome/src/style.css +++ b/packages/chrome/src/style.css @@ -80,7 +80,7 @@ body.light-mode { :root { font-family: "Inter", system-ui, sans-serif; - --tab-height: 33px; + --tab-height: 37px; --toolbarbutton-hover-background: color-mix( in srgb, From a2f0aa6199fc641e1a289fc10399c1a907e89ab3 Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:36:26 -0500 Subject: [PATCH 06/10] [chrome] add styled colors to siteinformationpopup and urlinput --- packages/chrome/src/components/Button.tsx | 3 +++ packages/chrome/src/components/Omnibar/UrlInput.tsx | 6 +++--- packages/chrome/src/components/SiteInformationPopup.tsx | 9 ++++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/chrome/src/components/Button.tsx b/packages/chrome/src/components/Button.tsx index a31b1b6e..19631d85 100644 --- a/packages/chrome/src/components/Button.tsx +++ b/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); diff --git a/packages/chrome/src/components/Omnibar/UrlInput.tsx b/packages/chrome/src/components/Omnibar/UrlInput.tsx index 67a9c644..2c91abfb 100644 --- a/packages/chrome/src/components/Omnibar/UrlInput.tsx +++ b/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 { diff --git a/packages/chrome/src/components/SiteInformationPopup.tsx b/packages/chrome/src/components/SiteInformationPopup.tsx index 1c768130..913f903c 100644 --- a/packages/chrome/src/components/SiteInformationPopup.tsx +++ b/packages/chrome/src/components/SiteInformationPopup.tsx @@ -50,6 +50,8 @@ SiteInformationPopup.style = css` flex-direction: column; gap: 1em; width: 20em; + + color: var(--toolbar_text); } .buttoniconscontainer { @@ -57,6 +59,7 @@ SiteInformationPopup.style = css` 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); } `; From 5c81cd8d036d80ff18136afdfcddd51253cf75de Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:39:59 -0500 Subject: [PATCH 07/10] [chrome] apply style to siteoptionsbutton and bookmarkbutton --- packages/chrome/src/components/Omnibar/BookmarkButton.tsx | 5 ++--- .../chrome/src/components/Omnibar/SiteOptionsButton.tsx | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/chrome/src/components/Omnibar/BookmarkButton.tsx b/packages/chrome/src/components/Omnibar/BookmarkButton.tsx index 074c49d4..2582e4ab 100644 --- a/packages/chrome/src/components/Omnibar/BookmarkButton.tsx +++ b/packages/chrome/src/components/Omnibar/BookmarkButton.tsx @@ -48,7 +48,7 @@ export function BookmarkButton(s: { url: URL }) { BookmarkButton.style = css` :scope { font-size: 1em; - color: var(--fg2); + color: var(--toolbar_text); display: flex; margin: 0.25em; padding: 0.25em; @@ -58,10 +58,9 @@ BookmarkButton.style = css` align-items: center; justify-content: center; - color: var(--fg2); border-radius: 0.2em; } :scope:hover { - background: var(--bg01); + background: var(--toolbarbutton-hover-background); } `; diff --git a/packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx b/packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx index 5a28002e..2405dfff 100644 --- a/packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx +++ b/packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx @@ -34,16 +34,16 @@ SiteOptionsButton.style = css` background: none; outline: none; border: none; - color: var(--fg); + color: var(--toolbar_text); font-size: 1em; padding: 0.1em; border-radius: 0.2em; display: flex; align-items: center; justify-content: center; - background: var(--bg01); + background: var(--toolbar); } :scope:hover { - background: var(--bg02); + background: var(--toolbarbutton-hover-background); } `; From c8ca5e74309cb92f45b090bb12d46d922ff9a311 Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 19:43:25 -0500 Subject: [PATCH 08/10] [chrome] apply style to suggestion.tsx --- packages/chrome/src/components/Omnibar/Suggestion.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/chrome/src/components/Omnibar/Suggestion.tsx b/packages/chrome/src/components/Omnibar/Suggestion.tsx index 8078fb7e..38df61ca 100644 --- a/packages/chrome/src/components/Omnibar/Suggestion.tsx +++ b/packages/chrome/src/components/Omnibar/Suggestion.tsx @@ -105,7 +105,7 @@ Suggestion.style = css` padding-bottom: 0.25em; white-space: nowrap; - color: var(--fg); + color: var(--toolbar_text); overflow: hidden; border-radius: var(--radius); @@ -148,10 +148,10 @@ Suggestion.style = css` } :scope.focused, :scope.focused:hover { - background: var(--bg20); + background: var(--accent); } :scope:hover { - background: var(--bg04); + background: var(--toolbarbutton-hover-background); } .focused .description { From dc1f1903c1fc89960e385b58959595d540f88faf Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 20:04:24 -0500 Subject: [PATCH 09/10] [chrome] sane default colors --- packages/chrome/src/App.tsx | 39 ++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index a75a420b..7b785c04 100644 --- a/packages/chrome/src/App.tsx +++ b/packages/chrome/src/App.tsx @@ -2,7 +2,7 @@ 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"; +import { Tab } from "./Tab"; import { BookmarksStrip } from "./components/BookmarksStrip"; import { Omnibar } from "./components/Omnibar/Omnibar"; @@ -34,21 +34,28 @@ export function App(props: {}, cx: ComponentContext) { use(browser.settings.theme).listen(applyTheme); const theme = { - 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)", + frame: "#1c1b22", + tab_selected: "#42414d", + tab_background_text: "white", + toolbar: "#2b2a33", + toolbar_text: "white", + toolbar_field: "#1C1B22", + toolbar_field_text: "white", + icons: "white", + // 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 = () => { From 40bb7e44e1c3c02098cf2d667cecaee23d1bf993 Mon Sep 17 00:00:00 2001 From: velzie Date: Mon, 10 Nov 2025 20:05:34 -0500 Subject: [PATCH 10/10] [chrome] ntp_background default color --- packages/chrome/src/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index 7b785c04..cdcdd537 100644 --- a/packages/chrome/src/App.tsx +++ b/packages/chrome/src/App.tsx @@ -42,6 +42,9 @@ export function App(props: {}, cx: ComponentContext) { toolbar_field: "#1C1B22", toolbar_field_text: "white", icons: "white", + ntp_background: "#121117", + ntp_text: "white", + // toolbar_text: "rgb(236, 191, 189)", // frame: "rgb(30, 30, 40)", // tab_background_text: "rgb(215, 218, 224)",