[NTP Search]: Change color to browser theme

brave · Dec 12, 2024 · 4ed2389 · 4ed2389
1 parent 2867ea8
commit 4ed2389
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 34 deletions.
diff --git a/components/brave_new_tab_ui/components/search/EnginePicker.tsx b/components/brave_new_tab_ui/components/search/EnginePicker.tsx
@@ -7,7 +7,7 @@ import Flex from "$web-common/Flex";
 import { getLocale } from "$web-common/locale";
 import Button from '@brave/leo/react/button';
 import Floating from '@brave/leo/react/floating';
-import { radius, spacing } from "@brave/leo/tokens/css/variables";
+import { color, radius, spacing } from "@brave/leo/tokens/css/variables";
 import * as React from "react";
 import styled, { css } from "styled-components";
 import { useSearchContext } from "./SearchContext";
@@ -22,12 +22,12 @@ const Option = styled.div`
   border-radius: ${radius.s};
 
   &:hover, &[data-selected=true] {
-    background: rgba(255,255,255,0.1);
+    background: color-mix(in srgb, ${color.text.primary} 10%, transparent 90%);
   }
 `
 
 const CustomizeButton = styled(Option)`
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid color-mix(in srgb, ${color.text.primary} 10%, transparent 90%);
 
   justify-content: center;
 
@@ -49,15 +49,15 @@ const IconContainer = styled(Flex) <{ open: boolean }>`
   height: 32px;
 
   ${p => p.open && css`
-    background: rgba(255,255,255,0.25);
+    background: color-mix(in srgb, ${color.text.primary} 25%, transparent 75%);
   `}
 `
 
 const Menu = styled.div`
   width: 180px;
 
-  background: rgba(255,255,255,0.1);
-  backdrop-filter: blur(64px);
+  background: ${color.container.background};
+  border: 1px solid ${color.divider.subtle};
 
   border-radius: ${radius.m};
   padding: ${spacing.s};
@@ -106,7 +106,7 @@ export default function EnginePicker() {
       </IconContainer>
     </OpenButton>
     {open && <Floating ref={menuRef} target={findParentWithTag(buttonRef.current, 'LEO-INPUT')!} autoUpdate positionStrategy="fixed" placement="top-start">
-      <Menu data-theme="dark" onClick={e => {
+      <Menu onClick={e => {
         e.preventDefault()
         e.stopPropagation()
       }}>

diff --git a/components/brave_new_tab_ui/components/search/MaybePromptEnableSuggestions.tsx b/components/brave_new_tab_ui/components/search/MaybePromptEnableSuggestions.tsx
@@ -12,8 +12,8 @@ import { color, font, spacing } from '@brave/leo/tokens/css/variables';
 import { getLocale } from '$web-common/locale';
 
 const Container = styled.div`
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
+    background: color-mix(in srgb, ${color.container.background} 10%, transparent 90%);
+    color: color-mix(in srgb, ${color.text.primary} 70%, transparent 30%);
 
     padding: ${spacing['2Xl']};
     margin: -8px -8px 4px -8px;
@@ -26,7 +26,7 @@ const Container = styled.div`
 `
 
 const Title = styled.span`
-    color: ${color.white};
+    color: ${color.text.primary};
     font: ${font.default.semibold};
 `
 

diff --git a/components/brave_new_tab_ui/components/search/SearchBox.tsx b/components/brave_new_tab_ui/components/search/SearchBox.tsx
@@ -18,15 +18,14 @@ const searchBoxClass = 'ntp-search-box'
 const SearchInput = styled(Input)`
   --leo-control-focus-effect: none;
   --leo-control-padding: 12px 10px;
-  --leo-control-color: rgba(255, 255, 255, 0.1);
-  --leo-control-text-color: ${color.white};
+  --leo-control-text-color: ${color.text.primary};
   --leo-control-font: ${font.large.regular};
 
   display: inline-block;
   width: 540px;
 
   leo-icon {
-    --leo-icon-color: rgba(255, 255, 255, 0.5);
+    --leo-icon-color: ${color.icon.default};
   }
 `
 
@@ -47,14 +46,6 @@ const Container = styled.div`
   border-radius: var(--leo-control-radius);
 `
 
-export const Backdrop = styled.div`
-  z-index: -1;
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(64px);
-  border-radius: ${searchBoxRadius};
-`
-
 export default function SearchBox() {
   const { searchEngine, query, setQuery } = useSearchContext()
   const placeholderText = searchEngine?.host === braveSearchHost

diff --git a/components/brave_new_tab_ui/components/search/SearchDialog.tsx b/components/brave_new_tab_ui/components/search/SearchDialog.tsx
@@ -6,7 +6,7 @@ import { color } from '@brave/leo/tokens/css/variables';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import styled, { keyframes } from 'styled-components';
-import SearchBox, { Backdrop } from './SearchBox';
+import SearchBox from './SearchBox';
 import SearchResults from './SearchResults';
 import { searchBoxRadius } from './config';
 
@@ -141,7 +141,6 @@ export default function Component(props: Props) {
     e.preventDefault()
     doClose()
   }}>
-    <Backdrop />
     <SearchBox />
     <SearchResults />
   </Dialog>, document.body)

diff --git a/components/brave_new_tab_ui/components/search/SearchPlaceholder.tsx b/components/brave_new_tab_ui/components/search/SearchPlaceholder.tsx
@@ -5,14 +5,14 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { useNewTabPref } from '../../hooks/usePref';
-import SearchBox, { Backdrop } from './SearchBox';
+import SearchBox from './SearchBox';
 import { SearchContext, useSearchContext } from './SearchContext';
 import SearchDialog from './SearchDialog';
 import { searchBoxRadius } from './config';
 import Button from '@brave/leo/react/button';
 import Icon from '@brave/leo/react/icon';
 import ButtonMenu from '@brave/leo/react/buttonMenu';
-import { spacing } from '@brave/leo/tokens/css/variables';
+import { color, spacing } from '@brave/leo/tokens/css/variables';
 import { getLocale } from '$web-common/locale';
 import getNTPBrowserAPI from '../../api/background';
 
@@ -38,7 +38,7 @@ const MenuContainer = styled(ButtonMenu).attrs({
 `
 
 const MenuButton = styled(Button)`
-  color: white;
+  color: ${color.container.background};
 `
 
 const PlaceholderContainer = styled.div`
@@ -72,7 +72,6 @@ function Swapper() {
       setOpen(true)
       setBoxPos(e.currentTarget.getBoundingClientRect().y)
     }}>
-      <Backdrop />
       <SearchBox />
       <div data-theme="light">
         <MenuContainer>

diff --git a/components/brave_new_tab_ui/components/search/SearchResult.tsx b/components/brave_new_tab_ui/components/search/SearchResult.tsx
@@ -32,7 +32,7 @@ const Container = styled.a`
   overflow: hidden;
 
   &[aria-selected=true], &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: color-mix(in srgb, ${color.text.primary} 10%, transparent 90%);
   }
 `
 
@@ -61,7 +61,7 @@ const IconContainer = styled.div`
 `
 
 const SearchIcon = styled.span<{ url: string }>`
-  background: rgba(255, 255, 255, 0.5);
+  background: color-mix(in srgb, ${color.icon.default} 50%, transparent 50%);
   mask-image: url(${p => p.url});
   mask-size: contain;
 `
@@ -74,13 +74,13 @@ const FavIcon = styled.span<{ url: string }>`
 const Content = styled.span`
   font: ${font.large.regular};
   line-height: 24px;
-  color: ${color.white};
+  color: ${color.text.primary};
 `
 
 const Description = styled.span`
   font: ${font.small.regular};
   line-height: 18px;
-  color: rgba(255,255,255,0.7);
+  color: ${color.text.secondary};
 `
 
 const LeoIcon = styled(Icon)`

diff --git a/components/brave_new_tab_ui/components/search/SearchResults.tsx b/components/brave_new_tab_ui/components/search/SearchResults.tsx
@@ -15,9 +15,9 @@ import { handleOpenURLClick, validateScheme } from '$web-common/SecureLink';
 import MaybePromptEnableSuggestions from './MaybePromptEnableSuggestions';
 
 const Container = styled.div`
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid ${color.container.background};
 
-  background: rgba(255,255,255,0.1);
+  background: ${color.container.background};
 
   color: ${color.white};
 
@@ -177,7 +177,7 @@ export default function SearchResults() {
     return (e: React.MouseEvent) => openMatch(match, line, e, searchEngine)
   }
 
-  return matches.length ? <Container data-theme="dark" className='search-results'>
+  return matches.length ? <Container className='search-results'>
     <MaybePromptEnableSuggestions />
     {matches.map((r, i) => <SearchResult key={i} selected={i === selectedMatch} onClick={onSearchResultClick(r)} match={r} />)}
   </Container> : null