Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reland "[Nala]: Replace app.global.scss with Nala variables" (#33677)

Browse Source
This commit is contained in:
Jay Harris
2026-02-09 15:24:14 +13:00
committed by GitHub
parent 6260a14493
commit 0d01fb7bc3
21 changed files with 36 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/preview.tsx
-1
View File
@@ -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'
browser/resources/brave_new_tab_page_refresh/BUILD.gn
-2
View File
@@ -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",
browser/resources/brave_welcome_page/BUILD.gn
+1 -4
View File
@@ -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") {
components/ai_chat/resources/BUILD.gn
+1 -4
View File
@@ -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",
components/ai_chat/resources/page/chat_ui.tsx
-1
View File
@@ -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 {
components/ai_chat/resources/page/stories/components_panel.tsx
-1
View File
@@ -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'
components/ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.tsx
-1
View File
@@ -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'
components/brave_new_tab_ui/BUILD.gn
-1
View File
@@ -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/",
]
}
components/brave_new_tab_ui/components/default/stats/style.ts
+7 -5
View File
@@ -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;
components/brave_new_tab_ui/containers/app.tsx
-2
View File
@@ -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'
components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx
+5 -6
View File
@@ -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;
components/brave_new_tab_ui/helpers/colorUtil.test.ts
+6 -6
View File
@@ -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() })
})
})
components/brave_new_tab_ui/helpers/colorUtil.ts
+2 -2
View File
@@ -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 */))
}
components/brave_news/browser/resources/customize/Carousel.tsx
+3 -2
View File
@@ -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;`}
components/brave_news/browser/resources/customize/Configure.tsx
+4 -4
View File
@@ -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;
`
components/brave_news/browser/resources/customize/CustomizeLink.tsx
+2 -1
View File
@@ -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;
`
components/brave_news/browser/resources/customize/DisabledPlaceholder.tsx
+3 -2
View File
@@ -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 = <svg width="370" height="80" viewBox="0 0 370 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M244.071 3.51134C240.45 5.46094 239.075 10.0138 241 13.6805C242.926 17.3471 247.423 18.7391 251.044 16.7895C254.665 14.8399 256.04 10.287 254.115 6.62036C252.189 2.9537 247.692 1.56175 244.071 3.51134Z" fill="#D0D2F7" />
@@ -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;
components/brave_shields/resources/panel/BUILD.gn
+1 -4
View File
@@ -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" ]
}
components/brave_vpn/resources/panel/BUILD.gn
+1 -4
View File
@@ -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",
components/brave_vpn/resources/panel/vpn_panel.tsx
-1
View File
@@ -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'
components/web-components/app.global.scss
-41
View File
@@ -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;
}
}