[Nala]: Bump to new tokens (#21204)

brave · Dec 14, 2023 · ba8e771 · ba8e771
1 parent dd0b019
commit ba8e771
Show file tree

Hide file tree

Showing 120 changed files with 780 additions and 60 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -7,6 +7,7 @@
 
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <link rel="stylesheet" href="chrome://resources/brave/fonts/poppins.css">
+  <link rel="stylesheet" href="chrome://resources/brave/fonts/inter.css">
   <script src="chrome://resources/js/load_time_data_deprecated.js"></script>
   <script src="/strings.js"></script>
   <script src="/ethereum_remote_client_page.bundle.js"></script>

diff --git 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
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="chrome-untrusted://resources/css/text_defaults.css">
     <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/manrope.css">
     <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/poppins.css">
+    <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/inter.css">
     <script src="chrome-untrusted://resources/js/load_time_data_deprecated.js"></script>
     <script src="/strings.js"></script>
     <link rel="stylesheet" href="./styles.css">

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="chrome://resources/brave/css/reset.css">
 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
 <link rel="stylesheet" href="chrome://resources/brave/fonts/poppins.css">
+<link rel="stylesheet" href="chrome://resources/brave/fonts/inter.css">
 <link rel="stylesheet" href="chrome://resources/brave/fonts/crypto_fonts.css">
 <link rel="stylesheet" href="chrome://resources/brave/leo/css/variables.css">
 <script src="chrome://resources/js/load_time_data_deprecated.js"></script>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)`