Invert foreground color when background is light

components/brave_new_tab_ui/components/default/braveToday/hint.tsx

@@ -8,14 +8,18 @@ import styled from 'styled-components'
 import { CaratStrongDownIcon } from 'brave-ui/components/icons'
 import { getLocale } from '../../../../common/locale'
 
-const Hint = styled('div')`
+interface Props {
+  color: string
+}
+
+const Hint = styled('div')<Props>`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   text-align: center;
   font-size: 15px;
-  color: white;
+  color: ${p => p.color};
   > p {
     margin: 0;
   }
@@ -26,9 +30,9 @@ const Graphic = styled('div')`
   height: 16px;
 `
 
-export default function BraveTodayHint () {
+export default function BraveTodayHint (props: Props) {
   return (
-    <Hint>
+    <Hint color={props.color}>
       <p>{getLocale('braveTodayScrollHint')}</p>
       <Graphic>
         <CaratStrongDownIcon />

components/brave_new_tab_ui/components/default/clock/index.tsx

@@ -7,9 +7,13 @@ import { useNewTabPref } from '../../../hooks/usePref'
 
 import { StyledClock, StyledTime } from './style'
 
+interface Props {
+  color: string
+}
+
 // Tick once every two seconds.
 const TICK_RATE = 2000
-export function Clock () {
+export function Clock ({ color }: Props) {
   const [now, setNow] = React.useState<Date>()
   const [clockFormat, setClockFormat] = useNewTabPref('clockFormat')
   const toggleClockFormat = () => {
@@ -42,7 +46,7 @@ export function Clock () {
       ? null
       : t.value), [formatter, now])
 
-  return <StyledClock onDoubleClick={toggleClockFormat}>
+  return <StyledClock onDoubleClick={toggleClockFormat} color={color}>
     <StyledTime>{formattedTime}</StyledTime>
   </StyledClock>
 }

components/brave_new_tab_ui/components/default/clock/style.ts

@@ -5,8 +5,12 @@
 
 import styled from 'styled-components'
 
-export const StyledClock = styled('div')<{}>`
-  color: #FFFFFF;
+interface ClockProps {
+  color: string
+}
+
+export const StyledClock = styled('div')<ClockProps>`
+  color: ${p => p.color};
   box-sizing: border-box;
   line-height: 1;
   user-select: none;

components/brave_new_tab_ui/components/default/footer/braveTalkItem.tsx

@@ -39,7 +39,7 @@ function BraveTalkTooltipItem (props: Props) {
   }
   return (
     <BraveTalkTooltip ref={tooltipRef} onClose={handleClose}>
-      <IconLink title={getLocale('braveTalkPromptTitle')} href='https://talk.brave.com/widget'>
+      <IconLink title={getLocale('braveTalkPromptTitle')} href='https://talk.brave.com/widget' color={props.color}>
         <BraveTalkIcon />
       </IconLink>
     </BraveTalkTooltip>
@@ -51,7 +51,7 @@ export default function BraveTalkItem (props: Props) {
     return <BraveTalkTooltipItem {...props} />
   }
   return (
-    <IconLink title={getLocale('braveTalkPromptTitle')} href='https://talk.brave.com/widget'>
+    <IconLink title={getLocale('braveTalkPromptTitle')} href='https://talk.brave.com/widget' color={props.color}>
       <BraveTalkIcon />
     </IconLink>
   )

components/brave_new_tab_ui/components/default/footer/braveTalkTooltip/braveTalkIcon.tsx

@@ -9,7 +9,6 @@ export default function Icon () {
   return (
     <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
       <path
-        fill='#fff'
         fillRule='evenodd'
         d='M23.5 20.18a.95.95 0 01-.99-.05l-4.26-2.84v1.09c0 1.05-.86 1.91-1.92 1.91H2.92A1.92 1.92 0 011 18.38V5.92C1 4.86 1.86 4 2.92 4h13.41c1.06 0 1.92.86 1.92 1.92V7l4.26-2.84a.96.96 0 011.49.8v14.37c0 .36-.2.68-.5.85zM22.07 6.75l-4.26 2.84c-.02.02-.05.02-.08.03a.93.93 0 01-.36.11l-.09.02-.1-.02a.91.91 0 01-.64-.34c-.01-.03-.04-.04-.06-.07l-.03-.08a.92.92 0 01-.11-.37l-.02-.08V5.92H2.92v12.5h13.41V15.5l.02-.09a.9.9 0 01.04-.18.91.91 0 01.07-.18l.03-.08.07-.07a.93.93 0 01.64-.34l.1-.02.07.02a.93.93 0 01.37.11l.08.03 4.26 2.84V6.75z'
         clipRule='evenodd'

components/brave_new_tab_ui/components/default/footer/footer.tsx

@@ -39,6 +39,7 @@ export interface Props {
   showPhotoInfo: boolean
   onClickSettings: () => any
   onDismissBraveTalkPrompt: OnDismissBraveTalkPrompt
+  color: string
 }
 
 export default class FooterInfo extends React.PureComponent<Props, {}> {
@@ -48,7 +49,8 @@ export default class FooterInfo extends React.PureComponent<Props, {}> {
       supportsBraveTalk,
       backgroundImageInfo,
       showPhotoInfo,
-      onClickSettings
+      onClickSettings,
+      color
     } = this.props
 
     return (
@@ -68,21 +70,21 @@ export default class FooterInfo extends React.PureComponent<Props, {}> {
         }
         <S.GridItemNavigation>
           <Navigation>
-            <IconButtonContainer textDirection={textDirection}>
+            <IconButtonContainer textDirection={textDirection} color={color}>
               <IconButtonSideText textDirection={textDirection}>
-                <IconButton onClick={onClickSettings}>
+                <IconButton onClick={onClickSettings} color={color}>
                   <SettingsIcon />
                 </IconButton>
                 {getLocale('customize')}
               </IconButtonSideText>
             </IconButtonContainer>
-            <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
+            <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings' color={color}>
               <SettingsAdvancedIcon />
             </IconLink>
-            <IconLink title={getLocale('bookmarksPageTitle')} href='chrome://bookmarks'>
+            <IconLink title={getLocale('bookmarksPageTitle')} href='chrome://bookmarks' color={color}>
               <BookmarkBook />
             </IconLink>
-            <IconLink title={getLocale('historyPageTitle')} href='chrome://history'>
+            <IconLink title={getLocale('historyPageTitle')} href='chrome://history' color={color}>
               <HistoryIcon />
             </IconLink>
             {supportsBraveTalk &&

components/brave_new_tab_ui/components/default/page/index.tsx

@@ -382,18 +382,22 @@ export const Navigation = styled('nav')<{}>`
   align-items: center;
 `
 
+interface ColorButtonProps {
+  color: string
+}
+
 interface IconButtonProps {
   clickDisabled?: boolean
   isClickMenu?: boolean
 }
 
-export const IconLink = styled('a')<{}>`
+export const IconLink = styled('a')<ColorButtonProps>`
   display: block;
   width: 24px;
   height: 24px;
   margin: 8px;
   cursor: pointer;
-  color: #ffffff;
+  color: ${p => p.color};
   opacity: 0.7;
   transition: opacity 0.15s ease, filter 0.15s ease;
 
@@ -402,7 +406,7 @@ export const IconLink = styled('a')<{}>`
   }
 `
 
-export const IconButton = styled('button')<IconButtonProps>`
+export const IconButton = styled('button')<IconButtonProps & ColorButtonProps>`
   pointer-events: ${p => p.clickDisabled && 'none'};
   display: flex;
   width: 24px;
@@ -412,7 +416,7 @@ export const IconButton = styled('button')<IconButtonProps>`
   outline: none;
   margin: ${p => p.isClickMenu ? '7' : '0 12'}px;
   cursor: pointer;
-  color: #ffffff;
+  color: ${p => p.color};
   background-color: transparent;
   opacity: 0.7;
   transition: opacity 0.15s ease, filter 0.15s ease;
@@ -461,19 +465,20 @@ export const IconButtonSideText = styled('label')<IconButtonSideTextProps>`
 
 interface IconButtonContainerProps {
   textDirection: string
+  color: string
 }
 
 export const IconButtonContainer = styled('div')<IconButtonContainerProps>`
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 13px;
   font-weight: 600;
-  color: rgba(255,255,255,0.8);
+  color: ${p => p.color + 'CC' /* == 0.8 */};
   margin-right: ${p => p.textDirection === 'ltr' && '8px'};
   margin-left: ${p => p.textDirection === 'rtl' && '8px'};
-  border-right: ${p => p.textDirection === 'ltr' && '1px solid rgba(255, 255, 255, 0.6)'};
-  border-left: ${p => p.textDirection === 'rtl' && '1px solid rgba(255, 255, 255, 0.6)'};
+  border-right: ${p => p.textDirection === 'ltr' && `1px solid ${p.color + '99' /* == 0.6 */}`};
+  border-left: ${p => p.textDirection === 'rtl' && `1px solid ${p.color + '99' /* == 0.6 */}`};
 
   &:hover {
-    color: #ffffff;
+    color: ${p => p.color};
   }
 `

components/brave_new_tab_ui/components/default/stats/index.tsx

@@ -31,6 +31,7 @@ export interface StatsItemProps {
   counter: string | number
   text?: string
   description: string
+  overriddenTextColor?: string
 }
 
 /**
@@ -40,10 +41,10 @@ export interface StatsItemProps {
  * @prop {string} text - descriptive text that goes along the stat
  * @prop {string} description - describes what the counter is showing
  */
-export function StatsItem ({ testId, counter, text, description }: StatsItemProps) {
-    return <StyledStatsItem data-test-id={testId}>
+export function StatsItem ({ testId, counter, text, description, overriddenTextColor }: StatsItemProps) {
+    return <StyledStatsItem data-test-id={testId} overriddenTextColor={overriddenTextColor}>
         <StyledStatsItemCounter>{counter}</StyledStatsItemCounter>
           {text && <StyledStatsItemText>{text}</StyledStatsItemText>}
-        <StyledStatsItemDescription>{description}</StyledStatsItemDescription>
+        <StyledStatsItemDescription overriddenTextColor={overriddenTextColor}>{description}</StyledStatsItemDescription>
       </StyledStatsItem>
 }

components/brave_new_tab_ui/components/default/stats/style.ts

@@ -2,7 +2,7 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const StyledStatsItemContainer = styled('ul')<{}>`
   -webkit-font-smoothing: antialiased;
@@ -18,22 +18,18 @@ export const StyledStatsItemContainer = styled('ul')<{}>`
   font-family: inherit;
 `
 
-export const StyledStatsItem = styled('li')<{}>`
+export const StyledStatsItem = styled('li')<{overriddenTextColor?: string}>`
   list-style-type: none;
   font-size: inherit;
   font-family: inherit;
   margin: 10px 16px;
+  &:last-child { margin-right: 0; }
 
-  &:first-child {
-    color: #FB542B;
-  }
-  &:nth-child(2) {
-    color: #A0A5EB;
-  }
-  &:last-child {
-    color: #FFFFFF;
-    margin-right: 0;
-  }
+  ${p => p.overriddenTextColor
+    ? css`color: ${p.overriddenTextColor};`
+    : css`&:first-child { color: var(--interactive2); }
+          &:nth-child(2) { color: var(--interactive9); }
+          &:last-child { color: #FFFFFF; }`}
 `
 
 export const StyledStatsItemCounter = styled('span')<{}>`
@@ -56,10 +52,10 @@ export const StyledStatsItemText = styled('span')<{}>`
   letter-spacing: 0;
 `
 
-export const StyledStatsItemDescription = styled('div')<{}>`
+export const StyledStatsItemDescription = styled('div')<{overriddenTextColor?: string}>`
   font-size: 16px;
   font-weight: 500;
-  color: #FFFFFF;
+  ${p => !p.overriddenTextColor && css`color: #FFFFFF;`}
   margin-top: 8px;
   font-family: ${p => p.theme.fontFamily.heading};
 `

components/brave_new_tab_ui/components/default/widget/assets/ellipsis.ts

@@ -3,13 +3,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at http://mozilla.org/MPL/2.0/.
 
-import styled from 'styled-components'
 import EllipsisIcon from '../../../popupMenu/ellipsisIcon'
 
-interface Props {
-  lightWidget?: boolean
-}
-
-export default styled(EllipsisIcon)<Props>`
-  color: ${p => p.lightWidget ? '#495057' : '#ffffff'};
-`
+export default EllipsisIcon

components/brave_new_tab_ui/components/default/widget/index.tsx

@@ -18,8 +18,8 @@ export interface WidgetProps {
   widgetTitle?: string
   hideMenu?: boolean
   isForeground?: boolean
-  lightWidget?: boolean
   paddingType: 'none' | 'right' | 'default'
+  color?: string
   onLearnMore?: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
@@ -42,15 +42,15 @@ export function Widget ({
   widgetTitle,
   hideMenu,
   isForeground,
-  lightWidget,
   paddingType,
   onLearnMore,
   onDisconnect,
   onRefreshData,
   onAddSite,
   customLinksEnabled,
   onToggleCustomLinksEnabled,
-  children
+  children,
+  color
 }: WidgetProps & { children: React.ReactNode }) {
   const [widgetMenuPersist, setWidgetMenuPersist] = React.useState(!!isForeground)
   return <StyledWidgetContainer menuPosition={menuPosition} textDirection={textDirection}>
@@ -78,8 +78,8 @@ export function Widget ({
         hideWidget={hideWidget}
         persistWidget={() => setWidgetMenuPersist(true)}
         unpersistWidget={() => setWidgetMenuPersist(false)}
-        lightWidget={lightWidget}
-        paddingType={paddingType} />}
+        paddingType={paddingType}
+        color={color} />}
   </StyledWidgetContainer>
 }
 

components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx

@@ -32,8 +32,8 @@ interface Props {
   onAddSite?: () => void
   customLinksEnabled?: boolean
   onToggleCustomLinksEnabled?: () => void
-  lightWidget?: boolean
   paddingType: 'none' | 'right' | 'default'
+  color?: string
 }
 
 interface State {
@@ -100,23 +100,23 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
       widgetMenuPersist,
       widgetTitle,
       isForeground,
-      lightWidget,
       paddingType,
       onLearnMore,
       onDisconnect,
       onRefreshData,
       onAddSite,
       onToggleCustomLinksEnabled,
-      customLinksEnabled
+      customLinksEnabled,
+      color
     } = this.props
     const { showMenu } = this.state
     const hideString = widgetTitle ? `${getLocale('hide')} ${widgetTitle}` : getLocale('hide')
 
     return (
       <StyledWidgetMenuContainer ref={this.settingsMenuRef} paddingType={paddingType}>
         <StyledEllipsis widgetMenuPersist={widgetMenuPersist} isForeground={isForeground}>
-          <IconButton isClickMenu={true} onClick={this.toggleMenu}>
-            <EllipsisIcon lightWidget={lightWidget} />
+          <IconButton isClickMenu={true} onClick={this.toggleMenu} color={color ?? '#ffffff'}>
+            <EllipsisIcon />
           </IconButton>
         </StyledEllipsis>
         {showMenu && <StyledWidgetMenu