diff --git a/.storybook/preview.js b/.storybook/preview.js index 16f769d2cc1e..693088ada6a5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -9,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/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/feed/Ad.tsx b/components/brave_news/browser/resources/feed/Ad.tsx index d48e560a90cd..b1f3a8f68233 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 181c81b1bb47..5fa8279012ac 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 8c6d497cf6d3..9c01cd6a6329 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.regular}; + font: ${font.default.semibold}; color: var(--bn-glass-100); diff --git a/components/brave_news/browser/resources/feed/Discover.tsx b/components/brave_news/browser/resources/feed/Discover.tsx index 6932ea6a946b..a048f6ee7f6e 100644 --- a/components/brave_news/browser/resources/feed/Discover.tsx +++ b/components/brave_news/browser/resources/feed/Discover.tsx @@ -48,7 +48,7 @@ const FollowButtonIcon = styled(Icon)` ` const PublisherTitle = styled.span` - font: ${font.primary.default.regular}; + font: ${font.default.regular}; ` const TitleIcon = styled(Icon)` 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 +