diff --git a/amplify.yml b/amplify.yml index ce705503..4b0f1c52 100644 --- a/amplify.yml +++ b/amplify.yml @@ -52,6 +52,7 @@ frontend: - pnpm build - VITE_PUTER_BRANDING=1 VITE_ISOLATION_ORIGIN="https://puter.zone" pnpm build:chrome + artifacts: baseDirectory: packages/scramjet/packages/core/dist files: diff --git a/packages/chrome/src/App.tsx b/packages/chrome/src/App.tsx index dd076fc6..cdcdd537 100644 --- a/packages/chrome/src/App.tsx +++ b/packages/chrome/src/App.tsx @@ -1,7 +1,8 @@ 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"; @@ -32,6 +33,40 @@ export function App(props: {}, cx: ComponentContext) { use(browser.settings.theme).listen(applyTheme); + const theme = { + frame: "#1c1b22", + tab_selected: "#42414d", + tab_background_text: "white", + toolbar: "#2b2a33", + toolbar_text: "white", + 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)", + // 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)) { + document.body.style.setProperty(`--${key}`, value); + } + }; + return (
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/BookmarksStrip.tsx b/packages/chrome/src/components/BookmarksStrip.tsx index 718e42af..68fb5463 100644 --- a/packages/chrome/src/components/BookmarksStrip.tsx +++ b/packages/chrome/src/components/BookmarksStrip.tsx @@ -103,8 +103,18 @@ BookmarksStrip.style = css` height: 2em; display: flex; gap: 0.5em; - background: var(--bg01); - color: var(--fg); + background: var(--toolbar); + 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/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/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/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/Omnibar.tsx b/packages/chrome/src/components/Omnibar/Omnibar.tsx index 3fa1e368..785c1511 100644 --- a/packages/chrome/src/components/Omnibar/Omnibar.tsx +++ b/packages/chrome/src/components/Omnibar/Omnibar.tsx @@ -225,7 +225,7 @@ export function Omnibar(s: { tab: Tab }, cx: ComponentContext) { Omnibar.style = css` :scope { z-index: 1; - background: var(--bg01); + background: var(--toolbar); display: flex; padding: 0 7px 0 7px; height: 2.5em; diff --git a/packages/chrome/src/components/Omnibar/OmnibarButton.tsx b/packages/chrome/src/components/Omnibar/OmnibarButton.tsx index 64b6d960..f0463f10 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); + background: var(--toolbarbutton-hover-background); } :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/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); } `; 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 { diff --git a/packages/chrome/src/components/Omnibar/UrlInput.tsx b/packages/chrome/src/components/Omnibar/UrlInput.tsx index 6bf8257c..2c91abfb 100644 --- a/packages/chrome/src/components/Omnibar/UrlInput.tsx +++ b/packages/chrome/src/components/Omnibar/UrlInput.tsx @@ -122,29 +122,30 @@ 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 { - 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/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); } `; diff --git a/packages/chrome/src/components/TabStrip/DragTab.tsx b/packages/chrome/src/components/TabStrip/DragTab.tsx index 31e868e3..ec477091 100644 --- a/packages/chrome/src/components/TabStrip/DragTab.tsx +++ b/packages/chrome/src/components/TabStrip/DragTab.tsx @@ -141,18 +141,22 @@ 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%; - color: var(--fg); + color: var(--tab_background_text); border-radius: 4px; padding: 7px 8px; + background: var(--background_tab_inactive); + display: flex; align-items: center; gap: 8px; @@ -167,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; @@ -184,26 +188,36 @@ DragTab.style = css` display: flex; align-items: center; justify-content: center; - color: var(--fg); + color: var(--tab_text); padding: 0; margin-left: 8px; + position: relative; } - .close:hover { - background: var(--bg20); - 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(--bg01); - color: var(--fg); + background-color: color-mix(in srgb, currentColor 7%, transparent); + /*background: var(--background_tab);*/ + /*color: var(-);*/ } .main.active { - background: var(--bg02); - color: var(--fg); + background: var(--toolbar); + 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 b2b41030..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 { - background: var(--bg); - padding: 6px 12px; - height: calc(28px + 12px); + --tab-padding: 4px; + background: var(--frame); + 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..2ee475ad 100644 --- a/packages/chrome/src/style.css +++ b/packages/chrome/src/style.css @@ -80,6 +80,18 @@ body.light-mode { :root { font-family: "Inter", system-ui, sans-serif; + --tab-height: 37px; + + --toolbarbutton-hover-background: color-mix( + in srgb, + currentColor 17%, + transparent + ); + --toolbarbutton-active-background: color-mix( + in srgb, + currentColor 30%, + transparent + ); } * {