diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 0dbb44209a5..0e857bf9197 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,7 +7,6 @@ import 'emptykit.css' import * as React from 'react' import { withKnobs, boolean } from '@storybook/addon-knobs' import { setIconBasePath } from '@brave/leo/react/icon' -import '../components/web-components/app.global.scss' import { getString } from './locale' import ThemeProvider from '../components/common/BraveCoreThemeProvider' diff --git a/browser/resources/brave_new_tab_page_refresh/BUILD.gn b/browser/resources/brave_new_tab_page_refresh/BUILD.gn index 8d7d82065a2..ea4afa3a81e 100644 --- a/browser/resources/brave_new_tab_page_refresh/BUILD.gn +++ b/browser/resources/brave_new_tab_page_refresh/BUILD.gn @@ -17,8 +17,6 @@ transpile_web_ui("resources") { "//brave/browser/resources/brave_new_tab_page_refresh/", "//brave/components/brave_news/browser/resources/", "//brave/components/brave_rewards/resources/", - - "//brave/components/web-components/", ] deps = [ "//brave/browser/ui/webui/brave_new_tab_page_refresh:mojom_js", diff --git a/browser/resources/brave_welcome_page/BUILD.gn b/browser/resources/brave_welcome_page/BUILD.gn index 67e19eda8c3..7f60484b18a 100644 --- a/browser/resources/brave_welcome_page/BUILD.gn +++ b/browser/resources/brave_welcome_page/BUILD.gn @@ -11,10 +11,7 @@ transpile_web_ui("resources") { rebase_path("brave_welcome_page.tsx"), ] ] resource_name = "brave_welcome_page" - imports_from = [ - "//brave/browser/resources/brave_welcome_page/", - "//brave/components/web-components/", - ] + imports_from = [ "//brave/browser/resources/brave_welcome_page/" ] } pack_web_resources("generated_resources") { diff --git a/components/ai_chat/resources/BUILD.gn b/components/ai_chat/resources/BUILD.gn index 25de5e79f3b..eeec03de66e 100644 --- a/components/ai_chat/resources/BUILD.gn +++ b/components/ai_chat/resources/BUILD.gn @@ -24,10 +24,7 @@ transpile_web_ui("ai_chat_ui") { ], ] - imports_from = [ - "//brave/components/ai_chat/resources/", - "//brave/components/web-components", - ] + imports_from = [ "//brave/components/ai_chat/resources/" ] deps = [ "//brave/components/ai_chat/core/common/mojom:mojom_js", diff --git a/components/ai_chat/resources/page/chat_ui.tsx b/components/ai_chat/resources/page/chat_ui.tsx index 63fb1e7094c..6cc3d3cfd83 100644 --- a/components/ai_chat/resources/page/chat_ui.tsx +++ b/components/ai_chat/resources/page/chat_ui.tsx @@ -6,7 +6,6 @@ import * as React from 'react' import { createRoot } from 'react-dom/client' import { setIconBasePath } from '@brave/leo/react/icon' -import '$web-components/app.global.scss' import '$web-common/defaultTrustedTypesPolicy' import getAPI from './api' import { diff --git a/components/ai_chat/resources/page/stories/components_panel.tsx b/components/ai_chat/resources/page/stories/components_panel.tsx index 4c1a3f513b8..2077d7f5b87 100644 --- a/components/ai_chat/resources/page/stories/components_panel.tsx +++ b/components/ai_chat/resources/page/stories/components_panel.tsx @@ -9,7 +9,6 @@ import * as React from 'react' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' import '@brave/leo/tokens/css/variables.css' -import '$web-components/app.global.scss' import { getKeysForMojomEnum } from '$web-common/mojomUtils' import { Url } from 'gen/url/mojom/url.mojom.m.js' import { InferControlsFromArgs } from '../../../../../.storybook/utils' diff --git a/components/ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.tsx b/components/ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.tsx index 5d96af972c5..9d587734039 100644 --- a/components/ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.tsx +++ b/components/ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.tsx @@ -6,7 +6,6 @@ import * as React from 'react' import { createRoot } from 'react-dom/client' import { setIconBasePath } from '@brave/leo/react/icon' -import '$web-components/app.global.scss' import '$web-common/defaultTrustedTypesPolicy' import ConversationEntries from './components/conversation_entries' import { UntrustedConversationContextProvider } from './untrusted_conversation_context' diff --git a/components/brave_new_tab_ui/BUILD.gn b/components/brave_new_tab_ui/BUILD.gn index 50754d9c5ab..b2ae78a70d7 100644 --- a/components/brave_new_tab_ui/BUILD.gn +++ b/components/brave_new_tab_ui/BUILD.gn @@ -29,7 +29,6 @@ transpile_web_ui("brave_new_tab_ui") { "//brave/components/brave_new_tab_ui/", "//brave/components/brave_news/browser/resources/", "//brave/components/brave_rewards/resources/shared/", - "//brave/components/web-components/", ] } diff --git a/components/brave_new_tab_ui/components/default/stats/style.ts b/components/brave_new_tab_ui/components/default/stats/style.ts index 44dcb80eae9..d111b11c502 100644 --- a/components/brave_new_tab_ui/components/default/stats/style.ts +++ b/components/brave_new_tab_ui/components/default/stats/style.ts @@ -1,7 +1,9 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at https://mozilla.org/MPL/2.0/. */ +// Copyright (c) 2018 The Brave Authors. All rights reserved. +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this file, +// You can obtain one at https://mozilla.org/MPL/2.0/. +import { color } from '@brave/leo/tokens/css/variables' import styled from 'styled-components' export const StyledStatsItemContainer = styled('ul')<{}>` @@ -23,8 +25,8 @@ export const StyledStatsItem = styled('li')<{}>` font-size: inherit; font-family: inherit; margin: 10px 16px; - &:first-child { color: var(--override-readability-color, var(--interactive2)); } - &:nth-child(2) { color: var(--override-readability-color, var(--interactive9)); } + &:first-child { color: var(--override-readability-color, ${color.legacy.interactive1}); } + &:nth-child(2) { color: var(--override-readability-color, ${color.legacy.interactive8}); } &:last-child { color: var(--override-readability-color, #FFFFFF); margin-right: 0; diff --git a/components/brave_new_tab_ui/containers/app.tsx b/components/brave_new_tab_ui/containers/app.tsx index 66154851d15..2bf08241bae 100644 --- a/components/brave_new_tab_ui/containers/app.tsx +++ b/components/brave_new_tab_ui/containers/app.tsx @@ -7,8 +7,6 @@ import * as React from 'react' import { Dispatch } from 'redux' import { connect } from 'react-redux' -import '$web-components/app.global.scss' - // Components import NewTabPage from './newTab' diff --git a/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx b/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx index 62fa2574720..f2f06fc0c35 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx @@ -17,6 +17,7 @@ import Flex from '$web-common/Flex' // Utilities import { getLocale } from '../../../../common/locale' import { loadTimeData } from '$web-common/loadTimeData' +import { color } from '@brave/leo/tokens/css/variables' interface Props { onChange: () => void @@ -34,7 +35,7 @@ const ToggleRow = styled.div` align-items: center; justify-content: space-between; padding: 8px 0px; - background-color: var(--background1); + background-color: ${color.container.background}; ` const ControlsContainer = styled.span` @@ -45,7 +46,7 @@ const ControlsContainer = styled.span` ` const Container = styled.div` - background-color: var(--info-background); + background-color: ${color.systemfeedback.infoBackground}; border-radius: 8px; padding: 24px 24px; align-items: center; @@ -56,8 +57,7 @@ const Container = styled.div` const DescriptionRow = styled.div` width: 100%; - color: var(--text1); - font-family: var(--brave-font-family-non-serif); + color: ${color.text.primary}; letter-spacing: 0.01em; margin-bottom: 16px; ` @@ -77,13 +77,12 @@ const DescriptionBody = styled.div` const EnableRewardsButton = styled.button` height: 36px; - background: var(--interactive5); + background: ${color.button.background}; border-radius: 1000px; border-width: 0; color: white; cursor: pointer; padding: 10px 20px; - font-family: var(--brave-font-family-non-serif); font-weight: 600; font-size: 12px; line-height: 16px; diff --git a/components/brave_new_tab_ui/helpers/colorUtil.test.ts b/components/brave_new_tab_ui/helpers/colorUtil.test.ts index fe954752fd1..d175007072a 100644 --- a/components/brave_new_tab_ui/helpers/colorUtil.test.ts +++ b/components/brave_new_tab_ui/helpers/colorUtil.test.ts @@ -107,22 +107,22 @@ describe('getContrastRatio()', () => { describe('isReadable()', () => { describe('When background is black, stats are visible', () => { const background = new ColorUtil.ColorData('#000') - it('returns true for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* --interactive2 */))).toBeTruthy() }) - it('returns true for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* --interactive9 */))).toBeTruthy() }) + it('returns true for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* color.legacy.interactive1 */))).toBeTruthy() }) + it('returns true for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* color.legacy.interactive8 */))).toBeTruthy() }) it('returns true for time saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FFFFFF'))).toBeTruthy() }) }) describe('When background is #F0CB44, stats are not visible', () => { const background = new ColorUtil.ColorData('#F0CB44') - it('returns true for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* --interactive2 */))).toBeTruthy() }) - it('returns false for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* --interactive9 */))).toBeFalsy() }) + it('returns true for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* color.legacy.interactive1 */))).toBeTruthy() }) + it('returns false for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* color.legacy.interactive8 */))).toBeFalsy() }) it('returns true for time saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FFFFFF'))).toBeTruthy() }) }) describe('When background is #2197F9 stats are not visible', () => { const background = new ColorUtil.ColorData('#2197F9') - it('returns false for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* --interactive2 */))).toBeFalsy() }) - it('returns false for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* --interactive9 */))).toBeFalsy() }) + it('returns false for tracker stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FB542B'/* color.legacy.interactive1 */))).toBeFalsy() }) + it('returns false for bandwidth saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#A0A5EB'/* color.legacy.interactive8 */))).toBeFalsy() }) it('returns true for time saved stat color', () => { expect(ColorUtil.isReadable(background, new ColorUtil.ColorData('#FFFFFF'))).toBeTruthy() }) }) }) diff --git a/components/brave_new_tab_ui/helpers/colorUtil.ts b/components/brave_new_tab_ui/helpers/colorUtil.ts index cd483109ff7..a131959470d 100644 --- a/components/brave_new_tab_ui/helpers/colorUtil.ts +++ b/components/brave_new_tab_ui/helpers/colorUtil.ts @@ -168,6 +168,6 @@ export default function isReadableOnBackground (background: NewTab.BackgroundWal } return isReadable(backgroundData, new ColorData('#fff')) && - isReadable(backgroundData, new ColorData('#FB542B'/* --interactive2 */)) && - isReadable(backgroundData, new ColorData('#A0A5EB'/* --interactive9 */)) + isReadable(backgroundData, new ColorData('#FB542B'/* --color.legacy.interactive1 */)) && + isReadable(backgroundData, new ColorData('#A0A5EB'/* --color.legacy.interactive8 */)) } diff --git a/components/brave_news/browser/resources/customize/Carousel.tsx b/components/brave_news/browser/resources/customize/Carousel.tsx index 3426dc826a1..cc6fca98a76 100644 --- a/components/brave_news/browser/resources/customize/Carousel.tsx +++ b/components/brave_news/browser/resources/customize/Carousel.tsx @@ -8,6 +8,7 @@ import styled, { css } from 'styled-components' import Flex from '$web-common/Flex' import PublisherCard from '../shared/PublisherCard' import { ArrowRight } from '../shared/Icons' +import { color } from '@brave/leo/tokens/css/variables' const CARD_SIZE = 208 const CARD_SIZE_PX = `${CARD_SIZE}px` @@ -25,12 +26,12 @@ const ScrollButton = styled.button<{ hidden: boolean }>` display: flex; align-items: center; justify-content: center; - color: var(--text2); + color: ${color.text.secondary}; cursor: pointer; :hover { box-shadow: 0px 1px 4px rgba(63, 76, 99, 0.5); - color: var(--interactive4); + color: ${color.legacy.interactive4}; } ${p => p.hidden && css`opacity: 0;`} diff --git a/components/brave_news/browser/resources/customize/Configure.tsx b/components/brave_news/browser/resources/customize/Configure.tsx index c466d97938c..9cd7304be69 100644 --- a/components/brave_news/browser/resources/customize/Configure.tsx +++ b/components/brave_news/browser/resources/customize/Configure.tsx @@ -8,7 +8,7 @@ import { getLocale , formatLocale } from '$web-common/locale' import Button from '@brave/leo/react/button' import Icon from '@brave/leo/react/icon' import Toggle from '@brave/leo/react/toggle' -import { spacing } from '@brave/leo/tokens/css/variables' +import { color, spacing } from '@brave/leo/tokens/css/variables' import * as React from 'react' import styled from 'styled-components' import { useBraveNews } from '../shared/Context' @@ -66,7 +66,7 @@ const Hr = styled.hr` grid-area: separator; width: 100%; align-self: center; - background: var(--divider1); + background: ${color.divider.subtle}; height: 2px; border-width: 0; ` @@ -76,7 +76,7 @@ const Sidebar = styled.div` overflow: auto; grid-area: sidebar; padding: 28px 22px 28px 32px; - background: var(--background2); + background: ${color.page.background}; ` // Overlay on top of the sidebar, shown when it is disabled. @@ -86,7 +86,7 @@ const SidebarOverlay = styled.div` bottom: 0; left: 0; right: 0; - background: var(--background1); + background: ${color.container.background}; opacity: 0.7; ` diff --git a/components/brave_news/browser/resources/customize/CustomizeLink.tsx b/components/brave_news/browser/resources/customize/CustomizeLink.tsx index 57b49a115cd..7c0d053b947 100644 --- a/components/brave_news/browser/resources/customize/CustomizeLink.tsx +++ b/components/brave_news/browser/resources/customize/CustomizeLink.tsx @@ -4,13 +4,14 @@ // You can obtain one at https://mozilla.org/MPL/2.0/. import styled from 'styled-components' +import { color } from '@brave/leo/tokens/css/variables' const CustomizeLink = styled.button` all: unset; font-weight: 600; font-size: 12px; line-height: 18px; - color: var(--interactive5); + color: ${color.button.background}; cursor: pointer; ` diff --git a/components/brave_news/browser/resources/customize/DisabledPlaceholder.tsx b/components/brave_news/browser/resources/customize/DisabledPlaceholder.tsx index 1567816ebce..7f8213e6e70 100644 --- a/components/brave_news/browser/resources/customize/DisabledPlaceholder.tsx +++ b/components/brave_news/browser/resources/customize/DisabledPlaceholder.tsx @@ -8,6 +8,7 @@ import * as React from 'react' import styled from 'styled-components' import { getLocale, formatLocale } from '$web-common/locale' import Flex from '$web-common/Flex' +import { color } from '@brave/leo/tokens/css/variables' const TodayGraphic = @@ -30,7 +31,7 @@ const Header = styled.h3` font-size: 24px; font-weight: 500; line-height: 1.2; - color: var(--text2); + color: ${color.text.secondary}; ` const Subtitle = styled.p` @@ -40,7 +41,7 @@ const Subtitle = styled.p` text-align: center; font-size: 14px; font-weight: 500; - color: var(--text2); + color: ${color.text.secondary}; & + & { margin-top: 12px; diff --git a/components/brave_shields/resources/panel/BUILD.gn b/components/brave_shields/resources/panel/BUILD.gn index fc09754bbbf..15932076b83 100644 --- a/components/brave_shields/resources/panel/BUILD.gn +++ b/components/brave_shields/resources/panel/BUILD.gn @@ -13,10 +13,7 @@ transpile_web_ui("brave_shields_panel_ui") { rebase_path("shields_panel.tsx"), ] ] resource_name = "brave_shields_panel" - imports_from = [ - "//brave/components/brave_shields/resources/panel/", - "//brave/components/web-components/", - ] + imports_from = [ "//brave/components/brave_shields/resources/panel/" ] deps = [ "//brave/components/brave_shields/core/common:mojom_js" ] } diff --git a/components/brave_vpn/resources/panel/BUILD.gn b/components/brave_vpn/resources/panel/BUILD.gn index 65edc813c6c..aeb9f3f65cf 100644 --- a/components/brave_vpn/resources/panel/BUILD.gn +++ b/components/brave_vpn/resources/panel/BUILD.gn @@ -16,10 +16,7 @@ transpile_web_ui("brave_vpn_panel_ui") { ] ] resource_name = "brave_vpn_panel" - imports_from = [ - "//brave/components/brave_vpn/resources/panel/", - "//brave/components/web-components", - ] + imports_from = [ "//brave/components/brave_vpn/resources/panel/" ] deps = [ "//brave/components/brave_vpn/common/mojom:mojom_js", diff --git a/components/brave_vpn/resources/panel/vpn_panel.tsx b/components/brave_vpn/resources/panel/vpn_panel.tsx index d9aa66fbdc9..8bf6bf61f79 100644 --- a/components/brave_vpn/resources/panel/vpn_panel.tsx +++ b/components/brave_vpn/resources/panel/vpn_panel.tsx @@ -9,7 +9,6 @@ import { Provider } from 'react-redux' import { initLocale } from 'brave-ui' import { setIconBasePath } from '@brave/leo/react/icon' -import '$web-components/app.global.scss' import './strings' import { loadTimeData } from '../../../common/loadTimeData' diff --git a/components/web-components/app.global.scss b/components/web-components/app.global.scss deleted file mode 100644 index 13cf240e0b9..00000000000 --- a/components/web-components/app.global.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* Copyright (c) 2022 The Brave Authors. All rights reserved. - * This Source Code Form is subject to the terms of the Mozilla Public - * 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/. */ - -:root { - --brave-font-family-default: Poppins, sans-serif; - --brave-font-family-non-serif: Poppins, normal; - --background1: white; - --background2: #F8F9FA; - --info-background: rgba(93, 181, 252, 0.2); - --divider1: #E9E9F4; - --text1: #212529; - --text2: #495057; - --text3: #868E96; - --interactive2: #FB542B; - --interactive4: #353DAB; - --interactive5: #4C54D2; - --interactive6: #737ADE; - --interactive7: #212529; - --interactive8: #AEB1C2; - --interactive9: #A0A5EB; - --focus-border: #A0A5EB; - --disabled: #DADCE8; - --blurple300: #A0A5EB; - font-family: var(--brave-font-family-default); -} - -@media (prefers-color-scheme: dark) { - :root { - --background1: #1E2029; - --background2: #17171F; - --divider1: #3B3E4F; - --text1: #F0F2FF; - --text2: #C2C4CF; - --text3: #84889C; - --interactive7: #F0F2FF; - --interactive8: #5E6175; - --disabled: #343A40; - } -}