diff --git a/.storybook/.babelrc b/.storybook/.babelrc deleted file mode 100644 index b32f0833383e..000000000000 --- a/.storybook/.babelrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": ["@babel/preset-react"], - "plugins": [ - "@babel/plugin-proposal-object-rest-spread", - "@babel/plugin-syntax-dynamic-import" - ] -} diff --git a/.storybook/chrome-resources-mock/js/cr.js b/.storybook/chrome-resources-mock/js/cr.js new file mode 100644 index 000000000000..f9fae7a47378 --- /dev/null +++ b/.storybook/chrome-resources-mock/js/cr.js @@ -0,0 +1,20 @@ +// 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 https://mozilla.org/MPL/2.0/. + +/** + * + * @param {string} eventName + * @param {Function} handler + */ +export function addWebUIListener(eventName, handler) {} + +/** + * + * @param {string} message + * @param {...any} args + */ +export function sendWithPromise(message, ...args) { + return new Promise(() => console.log('sendWithPromise', message, args)) +} diff --git a/.storybook/chrome-resources-mock/js/cr.m.ts b/.storybook/chrome-resources-mock/js/cr.m.ts deleted file mode 100644 index e22fa8efdcce..000000000000 --- a/.storybook/chrome-resources-mock/js/cr.m.ts +++ /dev/null @@ -1,4 +0,0 @@ -export function addWebUIListener(eventName: string, handler: Function) {} -export function sendWithPromise(message: string, ...args: any[]): Promise { - return new Promise((resolve) => console.log('sendWithPromise', message, args)) -} diff --git a/.storybook/chrome-resources-mock/js/plural_string_proxy.js.ts b/.storybook/chrome-resources-mock/js/plural_string_proxy.js similarity index 69% rename from .storybook/chrome-resources-mock/js/plural_string_proxy.js.ts rename to .storybook/chrome-resources-mock/js/plural_string_proxy.js index b966e0347614..877c103f41e8 100644 --- a/.storybook/chrome-resources-mock/js/plural_string_proxy.js.ts +++ b/.storybook/chrome-resources-mock/js/plural_string_proxy.js @@ -3,14 +3,21 @@ // 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/. -let instance: PluralStringProxyImpl | null = null +/** @type {PluralStringProxyImpl | null} */ +let instance = null export class PluralStringProxyImpl { static getInstance() { return instance || (instance = new PluralStringProxyImpl()) } - getPluralString(key: string, count: number): Promise { + /** + * + * @param {string} key + * @param {number} count + * @returns {Promise} + */ + getPluralString(key, count) { return Promise.resolve(`${key}(${count})`) } } diff --git a/.storybook/main.js b/.storybook/main.js index 2643ffc8320b..af85550b8a21 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,28 +2,29 @@ const path = require('path') const isCI = Boolean(process.env.JENKINS_URL && process.env.BUILD_ID) +/** @type {import('@storybook/react-webpack5').StorybookConfig} */ module.exports = { stories: ['../components/**/stories/*.tsx', '../components/**/*.stories.tsx'], typescript: { check: true, + reactDocgen: false, checkOptions: { - tsconfig: path.resolve(__dirname, '..', 'tsconfig-storybook.json'), - compilerOptions: { - 'react-docgen-typescript': false, - allowJs: true, - skipLibCheck: true, - noImplicitAny: true, - outDir: './storybook_dist' - }, - async: !isCI + async: !isCI, + typescript: { + configFile: path.resolve(__dirname, '..', 'tsconfig-storybook.json') + } } }, addons: ['@storybook/addon-knobs', '@storybook/addon-essentials'], + framework: "@storybook/react-webpack5", staticDirs: [ { from: '../node_modules/@brave/leo/icons', to: 'icons/' }, { from: '../components/playlist/browser/resources/stories/assets', to: 'playlist/' } - ] + ], + features: { + storyStoreV7: false + } } diff --git a/.storybook/preview.js b/.storybook/preview.js index 7f813507e610..693088ada6a5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,9 +1,7 @@ import 'emptykit.css' import * as React from 'react' import { withKnobs, boolean } from '@storybook/addon-knobs' -import { addParameters } from '@storybook/react' import {setIconBasePath} from '@brave/leo/shared/icon' -import { initLocale } from 'brave-ui/helpers' import '../components/web-components/app.global.scss' import { getString } from './locale' import ThemeProvider from '../components/common/BraveCoreThemeProvider' @@ -11,6 +9,7 @@ import ThemeProvider from '../components/common/BraveCoreThemeProvider' // Fonts import '../ui/webui/resources/fonts/poppins.css' import '../ui/webui/resources/fonts/manrope.css' +import '../ui/webui/resources/fonts/inter.css' // Icon path // The storybook might be hosted at the root, but it might also be hosted diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index fd5fe12cbd08..052466104e94 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,19 +1,16 @@ +// Copyright (c) 2019 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/. + const path = require('path') -const AliasPlugin = require('enhanced-resolve/lib/AliasPlugin') +const webpack = require('webpack') +const fs = require('fs') +const { fallback, provideNodeGlobals } = require('../components/webpack/polyfill') const buildConfigs = ['Component', 'Static', 'Debug', 'Release'] const extraArchitectures = ['arm64', 'x86'] -// OpenSSL 3 no longer supports the insecure md4 hash, but webpack < 5.54.0 -// hardcodes it. Work around by substituting a supported algorithm. -// https://github.com/webpack/webpack/issues/13572 -// https://github.com/webpack/webpack/issues/14532 -// TODO(petemill): Remove this patching when webpack > 5.54.0 is being used. -const crypto = require('crypto') -const crypto_orig_createHash = crypto.createHash -crypto.createHash = (algorithm) => - crypto_orig_createHash(algorithm == 'md4' ? 'sha256' : algorithm) - function getBuildOuptutPathList(buildOutputRelativePath) { return buildConfigs.flatMap((config) => [ path.resolve(__dirname, `../../out/${config}/${buildOutputRelativePath}`), @@ -26,6 +23,58 @@ function getBuildOuptutPathList(buildOutputRelativePath) { ]) } +const genFolder = getBuildOuptutPathList('gen') + .filter(a => fs.existsSync(a)) + .sort((a, b) => fs.statSync(b).mtime - fs.statSync(a).mtime)[0] +if (!genFolder) { + throw new Error("Failed to find build output folder!") +} + +const basePathMap = require('../components/webpack/path-map')(genFolder) + +// Override the path map we use in the browser with some additional mock +// directories, so that we can replace things in Storybook. +const pathMap = { + ...basePathMap, + 'chrome://resources': [ + // As we mock some chrome://resources, insert our mock directory as the first + // place to look. + path.resolve(__dirname, 'chrome-resources-mock'), + basePathMap['chrome://resources'] + ] +} + +/** + * Maps a prefix to a corresponding path. We need this as Webpack5 dropped + * support for scheme prefixes (like chrome://) + * + * Note: This prefixReplacer is slightly different from the one we use in proper + * builds, as it takes the first match from any build folder, rather than + * specifying one - we don't know what the user built last, so we just see what + * we can find. + * + * This isn't perfect, and in future it'd be good to pass the build folder in + * via an environment variable. For now though, this works well. + * @param {string} prefix The prefix + * @param {string[] | string} replacements The real path options + */ +const prefixReplacer = (prefix, replacements) => { + if (!Array.isArray(replacements)) replacements = [replacements] + + const regex = new RegExp(`^${prefix}/(.*)`) + return new webpack.NormalModuleReplacementPlugin(regex, resource => { + resource.request = resource.request.replace(regex, (_, subpath) => { + if (!subpath) { + throw new Error("Subpath is undefined") + } + + const match = replacements.find((dir) => fs.existsSync(path.join(dir, subpath))) ?? replacements[0] + const result = path.join(match, subpath) + return result + }) + }) +} + // Export a function. Accept the base config as the only param. module.exports = async ({ config, mode }) => { const isDevMode = mode === 'development' @@ -70,65 +119,20 @@ module.exports = async ({ config, mode }) => { '../components/webpack/webpack-ts-transformers.js' ) } + }, + { + test: /\.avif$/, + loader: 'file-loader' } ) - config.module.rules.push({ - test: /\.avif$/, - loader: 'file-loader' - }) - // Use webpack resolve.alias from v5 whilst still using webpack v4, - // so that we can use an array as value - config.resolve.plugins = [ - ...config.resolve.plugins, - new AliasPlugin( - 'described-resolve', - [ - { - name: 'brave-ui', - alias: path.resolve(__dirname, '../node_modules/@brave/brave-ui') - }, - { - // Force same styled-components module for brave-core and brave-ui - // which ensure both repos code use the same singletons, e.g. ThemeContext. - name: 'styled-components', - alias: path.resolve(__dirname, '../node_modules/styled-components') - }, - { - name: 'chrome://resources', - alias: [ - // Mock chromium code where possible - path.resolve(__dirname, 'chrome-resources-mock'), - // TODO(petemill): This is not ideal since if the dev is using a Static - // build, but has previously made a Component build, then an outdated - // version of a module will be used. Instead, accept a cli argument - // or environment variable containing which build target to use. - ...getBuildOuptutPathList('gen/ui/webui/resources/tsc') - ] - }, - { - name: 'gen', - alias: [ - // Mock chromium code where possible - path.resolve(__dirname, 'gen-mock'), - // TODO(petemill): This is not ideal since if the dev is using a Static - // build, but has previously made a Component build, then an outdated - // version of a module will be used. Instead, accept a cli argument - // or environment variable containing which build target to use. - ...getBuildOuptutPathList('gen') - ] - }, - { - name: '$web-common', - alias: [path.resolve(__dirname, '../components/common')] - }, - { - name: '$web-components', - alias: [path.resolve(__dirname, '../components/web-components')] - } - ], - 'resolve' - ) - ] + + config.resolve.alias = pathMap + config.resolve.fallback = fallback + + config.plugins.push(provideNodeGlobals, + ...Object.keys(pathMap) + .filter(prefix => prefix.startsWith('chrome://')) + .map(prefix => prefixReplacer(prefix, pathMap[prefix]))) config.resolve.extensions.push('.ts', '.tsx', '.scss') return config } diff --git a/browser/resources/settings/shortcuts_page/commands.tsx b/browser/resources/settings/shortcuts_page/commands.tsx index 6d6c7e302286..98c720b66c62 100644 --- a/browser/resources/settings/shortcuts_page/commands.tsx +++ b/browser/resources/settings/shortcuts_page/commands.tsx @@ -24,7 +24,7 @@ const Container = styled.div` const CommandsContainer = styled.div` display: flex; flex-direction: column; - font: ${font.primary.default.regular}; + font: ${font.default.regular}; margin-bottom: ${spacing['2Xl']}; border: 1px solid ${color.divider.subtle}; border-radius: ${radius.m}; diff --git a/browser/resources/settings/shortcuts_page/components/ConfigureShortcut.tsx b/browser/resources/settings/shortcuts_page/components/ConfigureShortcut.tsx index ea77a8c280fc..adcdce133316 100644 --- a/browser/resources/settings/shortcuts_page/components/ConfigureShortcut.tsx +++ b/browser/resources/settings/shortcuts_page/components/ConfigureShortcut.tsx @@ -37,7 +37,7 @@ const HintText = styled.div` text-align: center; margin: ${spacing['4Xl']}; color: ${color.text.tertiary}; - font: ${font.primary.default.regular}; + font: ${font.default.regular}; ` const InUseAlert = styled(Alert)` diff --git a/browser/resources/settings/shortcuts_page/components/Keys.tsx b/browser/resources/settings/shortcuts_page/components/Keys.tsx index a259e83e25d1..93a1a4ceb3de 100644 --- a/browser/resources/settings/shortcuts_page/components/Keys.tsx +++ b/browser/resources/settings/shortcuts_page/components/Keys.tsx @@ -39,7 +39,7 @@ const Kbd = styled.div<{ large?: boolean; square?: boolean }>` min-width: 32px; border-radius: ${radius.l}; padding: ${spacing.xl}; - font: ${font.primary.heading.h3}; + font: ${font.heading.h3}; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), inset 0px 1px 0px #ffffff; background: linear-gradient(180deg, #f4f6f8 0%, #ffffff 100%); `} diff --git a/browser/ui/webui/ethereum_remote_client/ethereum_remote_client_page.html b/browser/ui/webui/ethereum_remote_client/ethereum_remote_client_page.html index 6f636b766fc7..508b02cdbab9 100644 --- a/browser/ui/webui/ethereum_remote_client/ethereum_remote_client_page.html +++ b/browser/ui/webui/ethereum_remote_client/ethereum_remote_client_page.html @@ -7,6 +7,7 @@ + diff --git a/chromium_src/content/browser/webui/shared_resources_data_source.cc b/chromium_src/content/browser/webui/shared_resources_data_source.cc index bdcf2fa195f2..2ab12e7f99b9 100644 --- a/chromium_src/content/browser/webui/shared_resources_data_source.cc +++ b/chromium_src/content/browser/webui/shared_resources_data_source.cc @@ -30,7 +30,8 @@ namespace { bool ShouldHandleWebUIRequestCallback(const std::string& path) { - if (!base::EqualsCaseInsensitiveASCII(path, "fonts/poppins.css")) { + if (!base::EqualsCaseInsensitiveASCII(path, "fonts/poppins.css") && + !base::EqualsCaseInsensitiveASCII(path, "fonts/inter.css")) { return false; } diff --git a/components/ai_chat/resources/page/ai_chat_ui.html b/components/ai_chat/resources/page/ai_chat_ui.html index d0039a912604..3c5be94279db 100644 --- a/components/ai_chat/resources/page/ai_chat_ui.html +++ b/components/ai_chat/resources/page/ai_chat_ui.html @@ -8,6 +8,7 @@ + diff --git a/components/ai_chat/resources/page/components/conversation_list/style.module.scss b/components/ai_chat/resources/page/components/conversation_list/style.module.scss index 565e4e7eb37c..9f283dc59727 100644 --- a/components/ai_chat/resources/page/components/conversation_list/style.module.scss +++ b/components/ai_chat/resources/page/components/conversation_list/style.module.scss @@ -7,7 +7,7 @@ display: flex; align-items: flex-start; gap: 16px; - font: var(--leo-font-secondary-default-regular); + font: var(--leo-font-default-regular); color: var(--leo-color-text-primary); padding: 16px; background-color: var(--leo-color-page-background); @@ -42,7 +42,7 @@ .suggestedQuestionLabel { --leo-icon-size: 18px; - font: var(--leo-font-secondary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-text-tertiary); padding-bottom: 16px; } @@ -51,7 +51,7 @@ display: flex; align-items: flex-start; text-align: left; - font: var(--leo-font-secondary-default-regular); + font: var(--leo-font-default-regular); } .questionsList { diff --git a/components/ai_chat/resources/page/components/feature_button_menu/style.module.scss b/components/ai_chat/resources/page/components/feature_button_menu/style.module.scss index 00204437fa4b..a195e28ca62e 100644 --- a/components/ai_chat/resources/page/components/feature_button_menu/style.module.scss +++ b/components/ai_chat/resources/page/components/feature_button_menu/style.module.scss @@ -7,7 +7,7 @@ background-color: var(--leo-color-page-background); padding: var(--leo-menu-item-padding) calc(var(--leo-menu-item-margin) + var(--leo-menu-item-padding)); color: var(--leo-color-text-tertiary); - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); } @@ -16,7 +16,7 @@ margin: 14px calc(var(--leo-menu-item-margin) + var(--leo-menu-item-padding)); margin-bottom: 2px; color: var(--leo-color-text-tertiary); - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); display: flex; flex-direction: row; justify-content: start; @@ -53,7 +53,7 @@ } .modelSubtitle { - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); padding: 0; margin: 0; } diff --git a/components/ai_chat/resources/page/components/feedback_form/style.module.scss b/components/ai_chat/resources/page/components/feedback_form/style.module.scss index 2f5b1a6dba95..35d74d09b4f2 100644 --- a/components/ai_chat/resources/page/components/feedback_form/style.module.scss +++ b/components/ai_chat/resources/page/components/feedback_form/style.module.scss @@ -4,7 +4,7 @@ // you can obtain one at https://mozilla.org/MPL/2.0/. .form { - --leo-control-font: var(--leo-font-secondary-default-regular); + --leo-control-font: var(--leo-font-default-regular); margin-top: 16px; max-width: 500px; @@ -14,7 +14,7 @@ h4 { padding: 24px 16px; - font: var(--leo-font-secondary-heading-h4); + font: var(--leo-font-heading-h4); margin: 0; } diff --git a/components/ai_chat/resources/page/components/input_box/style.module.scss b/components/ai_chat/resources/page/components/input_box/style.module.scss index c092ea8b1f24..6f17102193ab 100644 --- a/components/ai_chat/resources/page/components/input_box/style.module.scss +++ b/components/ai_chat/resources/page/components/input_box/style.module.scss @@ -23,7 +23,7 @@ .textareaBox { width: 100%; - font: var(--leo-font-secondary-default-regular); + font: var(--leo-font-default-regular); color: var(--leo-color-text-primary); } @@ -80,7 +80,7 @@ } .counterText { - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-systemfeedback-warning-icon); padding: 3px 16px; visibility: hidden; diff --git a/components/ai_chat/resources/page/components/main/style.module.scss b/components/ai_chat/resources/page/components/main/style.module.scss index 9e4c74214982..0f25c9851937 100644 --- a/components/ai_chat/resources/page/components/main/style.module.scss +++ b/components/ai_chat/resources/page/components/main/style.module.scss @@ -56,7 +56,7 @@ display: flex; align-items: center; gap: 10px; - font: var(--leo-font-primary-large-regular); + font: var(--leo-font-large-regular); } .logoTitle { @@ -79,7 +79,7 @@ color: var(--leo-color-blue-50); user-select: none; padding: 3px 5px; - font: var(--leo-font-primary-x-small-semibold); + font: var(--leo-font-x-small-semibold); border-radius: 4px; font-size: 10px; letter-spacing: 0.5px; diff --git a/components/ai_chat/resources/page/components/model_intro/style.module.scss b/components/ai_chat/resources/page/components/model_intro/style.module.scss index 3bbbfc8ecc43..dfca5372290f 100644 --- a/components/ai_chat/resources/page/components/model_intro/style.module.scss +++ b/components/ai_chat/resources/page/components/model_intro/style.module.scss @@ -21,13 +21,13 @@ .category { margin: 0; - font: var(--leo-font-primary-heading-h4); + font: var(--leo-font-heading-h4); color: var(--leo-color-text-primary); } .name { margin: 0; - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-text-tertiary); .maker { @@ -37,7 +37,7 @@ .modelIntro { margin: 14px 0 0 0; - font: var(--leo-font-secondary-default-regular); + font: var(--leo-font-default-regular); color: var(--leo-color-text-primary); } } diff --git a/components/ai_chat/resources/page/components/page_context_toggle/style.module.scss b/components/ai_chat/resources/page/components/page_context_toggle/style.module.scss index 6636e420af9d..107e8f4c11a3 100644 --- a/components/ai_chat/resources/page/components/page_context_toggle/style.module.scss +++ b/components/ai_chat/resources/page/components/page_context_toggle/style.module.scss @@ -22,7 +22,7 @@ gap: 4px; width: 100%; - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-text-tertiary); h1 { @@ -32,7 +32,7 @@ } .tooltipContainer { - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-text-secondary); max-width: 280px; padding: 0; diff --git a/components/ai_chat/resources/page/components/premium_suggestion/style.module.scss b/components/ai_chat/resources/page/components/premium_suggestion/style.module.scss index 260379a83581..05d49e0588d8 100644 --- a/components/ai_chat/resources/page/components/premium_suggestion/style.module.scss +++ b/components/ai_chat/resources/page/components/premium_suggestion/style.module.scss @@ -19,17 +19,17 @@ h1 { margin: 0; padding: 0; - font: var(--leo-font-primary-default-semibold); + font: var(--leo-font-default-semibold); } h4 { - font: var(--leo-font-primary-heading-h4); + font: var(--leo-font-heading-h4); margin: 0 0 5px 0; } p { margin: 0 0 12px 0; - font: var(--leo-font-primary-default-regular); + font: var(--leo-font-default-regular); } } @@ -57,7 +57,7 @@ p { margin: 0; - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-blue-40); } } @@ -67,10 +67,10 @@ color: var(--leo-color-text-primary); padding: 20px 16px; justify-content: space-between; - font: var(--leo-font-primary-default-semibold); + font: var(--leo-font-default-semibold); data { - font: var(--leo-font-primary-heading-h3); + font: var(--leo-font-heading-h3); color: var(--leo-color-text-primary); margin: 0 5px; } diff --git a/components/ai_chat/resources/page/components/privacy_message/style.module.scss b/components/ai_chat/resources/page/components/privacy_message/style.module.scss index 2678bcbe833b..18b432e4048d 100644 --- a/components/ai_chat/resources/page/components/privacy_message/style.module.scss +++ b/components/ai_chat/resources/page/components/privacy_message/style.module.scss @@ -11,11 +11,11 @@ p { margin-top: 0; margin-bottom: 24px; - font: var(--leo-font-primary-default-regular); + font: var(--leo-font-default-regular); } a { - font: var(--leo-font-primary-default-semibold); + font: var(--leo-font-default-semibold); color: var(--leo-color-text-interactive); text-decoration: none; } diff --git a/components/ai_chat/resources/page/components/site_title/style.module.scss b/components/ai_chat/resources/page/components/site_title/style.module.scss index 1e9113874f0b..c5a9631d7486 100644 --- a/components/ai_chat/resources/page/components/site_title/style.module.scss +++ b/components/ai_chat/resources/page/components/site_title/style.module.scss @@ -12,7 +12,7 @@ padding: var(--leo-spacing-l); border: 1px solid var(--leo-color-divider-subtle); border-radius: var(--leo-radius-m); - font: var(--leo-font-primary-small-regular); + font: var(--leo-font-small-regular); color: var(--leo-color-text-secondary); max-width: 320px; } diff --git a/components/ai_chat/resources/page/components/welcome_guide/style.module.scss b/components/ai_chat/resources/page/components/welcome_guide/style.module.scss index 436f9c0c7e2b..857b877b5765 100644 --- a/components/ai_chat/resources/page/components/welcome_guide/style.module.scss +++ b/components/ai_chat/resources/page/components/welcome_guide/style.module.scss @@ -13,12 +13,12 @@ } .title { - font: var(--leo-font-primary-heading-h1); + font: var(--leo-font-heading-h1); margin: 0 var(--leo-spacing-2xl); } .subtitle { - font: var(--leo-font-primary-heading-h2); + font: var(--leo-font-heading-h2); color: var(--leo-color-text-tertiary); margin: var(--leo-spacing-2xl); } @@ -38,7 +38,7 @@ } .cardTitle { - font: var(--leo-font-primary-heading-h4); + font: var(--leo-font-heading-h4); color: var(--leo-color-text-primary); margin: 0 0 8px 0; } diff --git a/components/ai_chat/resources/page/styles.css b/components/ai_chat/resources/page/styles.css index 0727f4d182f0..cb3052c008fa 100644 --- a/components/ai_chat/resources/page/styles.css +++ b/components/ai_chat/resources/page/styles.css @@ -6,13 +6,13 @@ body { background-color: var(--leo-color-container-background); color: var(--leo-color-text-primary); - font: var(--leo-font-primary-default-regular); + font: var(--leo-font-default-regular); width: 100%; height: 100vh; } button { - font: var(--leo-font-primary-default-regular); + font: var(--leo-font-default-regular); } #mountPoint { diff --git a/components/brave_new_tab_ui/brave_new_tab.html b/components/brave_new_tab_ui/brave_new_tab.html index 09557df69fb6..4ab886f78bf1 100644 --- a/components/brave_new_tab_ui/brave_new_tab.html +++ b/components/brave_new_tab_ui/brave_new_tab.html @@ -7,6 +7,7 @@ + diff --git a/components/brave_news/browser/resources/FeedNavigation.tsx b/components/brave_news/browser/resources/FeedNavigation.tsx index 24985f639f0a..ca5d675f8e47 100644 --- a/components/brave_news/browser/resources/FeedNavigation.tsx +++ b/components/brave_news/browser/resources/FeedNavigation.tsx @@ -30,7 +30,7 @@ const Container = styled(Card)` ` const Heading = styled.h3` - font: ${font.primary.default.semibold}; + font: ${font.default.semibold}; color: var(--bn-glass-25); margin: 0; @@ -50,7 +50,7 @@ const CustomButton = styled.button <{ selected?: boolean, faint?: boolean, bold? width: 100%; color: ${p => p.faint ? `var(--bn-glass-25)` : `var(--bn-glass-70)`}; - font: ${p => font.primary.small[p.bold ? 'semibold' : 'regular']}; + font: ${p => font.small[p.bold ? 'semibold' : 'regular']}; cursor: pointer; &:hover { @@ -76,7 +76,7 @@ const Section = styled.details` align-items: center; gap: ${spacing.m}; list-style: none; - font: ${font.primary.small.semibold}; + font: ${font.small.semibold}; cursor: pointer; diff --git a/components/brave_news/browser/resources/SignalsPage.tsx b/components/brave_news/browser/resources/SignalsPage.tsx index e835aead520b..4c6b9cd9a5f9 100644 --- a/components/brave_news/browser/resources/SignalsPage.tsx +++ b/components/brave_news/browser/resources/SignalsPage.tsx @@ -88,7 +88,7 @@ export default function SignalsPage(props: Props) { setFilter(e.detail.value)}> Filter - setSort(e.detail.value)}> + setSort(e.detail.value as typeof sort)}>
Sort by
name subscribed diff --git a/components/brave_news/browser/resources/feed/Ad.tsx b/components/brave_news/browser/resources/feed/Ad.tsx index 296e099b215f..5839b642dbab 100644 --- a/components/brave_news/browser/resources/feed/Ad.tsx +++ b/components/brave_news/browser/resources/feed/Ad.tsx @@ -35,7 +35,7 @@ const BatAdLabel = styled.a` text-decoration: none; color: rgba(var(--bn-text-base, 0.7)); - font: ${font.primary.small.regular}; + font: ${font.small.regular}; ` const CtaButton = styled(Button)` diff --git a/components/brave_news/browser/resources/feed/ArticleMetaRow.tsx b/components/brave_news/browser/resources/feed/ArticleMetaRow.tsx index 293c103d2c99..038cb92fec94 100644 --- a/components/brave_news/browser/resources/feed/ArticleMetaRow.tsx +++ b/components/brave_news/browser/resources/feed/ArticleMetaRow.tsx @@ -26,7 +26,7 @@ export const MetaInfoContainer = styled.h4` margin: 0; - font: ${font.primary.xSmall.regular}; + font: ${font.xSmall.regular}; color: var(--bn-glass-50); display: flex; diff --git a/components/brave_news/browser/resources/feed/Card.tsx b/components/brave_news/browser/resources/feed/Card.tsx index 248f78525127..b8557e98638a 100644 --- a/components/brave_news/browser/resources/feed/Card.tsx +++ b/components/brave_news/browser/resources/feed/Card.tsx @@ -12,7 +12,7 @@ import { configurationCache, useBraveNews } from '../shared/Context'; export const Header = styled.h2` margin: 0; - font: ${font.primary.heading.h2}; + font: ${font.heading.h2}; color: var(--bn-glass-100); --leo-icon-size: 18px; @@ -27,7 +27,7 @@ export const Title = styled.h3` margin: 0; text-align: start; - font: ${font.primary.default.semibold}; + font: ${font.default.semibold}; color: var(--bn-glass-100); diff --git a/components/brave_news/browser/resources/internals.html b/components/brave_news/browser/resources/internals.html index b675fb428973..cfb28d8b3979 100644 --- a/components/brave_news/browser/resources/internals.html +++ b/components/brave_news/browser/resources/internals.html @@ -7,6 +7,7 @@ Brave News Internals + diff --git a/components/brave_player/browser/resources/player.html b/components/brave_player/browser/resources/player.html index 069c5fddf06f..623553305f12 100644 --- a/components/brave_player/browser/resources/player.html +++ b/components/brave_player/browser/resources/player.html @@ -5,6 +5,7 @@ Brave Player +