bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 13:53:34 +00:00
Code Issues Releases Wiki Activity

[PM-16057] use Roboto as primary font (#14553)

Browse Source 
* swap to using roboto variable font
This commit is contained in:
Bryan Cunningham
2025-05-12 09:00:01 -04:00
committed by GitHub
parent fcaf5e63c5
commit 4d15f2d43c
18 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/autofill/content/components/constants/styles.ts
View File

@@ -144,17 +144,17 @@ export const border = {
export const typography = { export const typography = {
body1: ` body1: `
line-height: 24px; line-height: 24px;
font-family: "DM Sans", sans-serif; font-family: Roboto, sans-serif;
font-size: 16px; font-size: 16px;
`, `,
body2: ` body2: `
line-height: 20px; line-height: 20px;
font-family: "DM Sans", sans-serif; font-family: Roboto, sans-serif;
font-size: 14px; font-size: 14px;
`, `,
helperMedium: ` helperMedium: `
line-height: 16px; line-height: 16px;
font-family: "DM Sans", sans-serif; font-family: Roboto, sans-serif;
font-size: 12px; font-size: 12px;
`, `,
}; };

2
apps/browser/src/autofill/content/components/notification/confirmation/message.ts
View File

@@ -72,7 +72,7 @@ const baseTextStyles = css`
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 24px; line-height: 24px;
font-family: "DM Sans", sans-serif; font-family: Roboto, sans-serif;
font-size: 16px; font-size: 16px;
`; `;

2
apps/browser/src/autofill/content/components/notification/header-message.ts
View File

@@ -19,7 +19,7 @@ const notificationHeaderMessageStyles = (theme: Theme) => css`
line-height: 28px; line-height: 28px;
white-space: nowrap; white-space: nowrap;
color: ${themes[theme].text.main}; color: ${themes[theme].text.main};
font-family: "DM Sans", sans-serif; font-family: Roboto, sans-serif;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
`; `;

2
apps/browser/src/autofill/shared/styles/variables.scss
View File

@@ -1,6 +1,6 @@
$dark-icon-themes: "theme_dark"; $dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-source-code-pro: "Source Code Pro", monospace; $font-family-source-code-pro: "Source Code Pro", monospace;
$font-size-base: 14px; $font-size-base: 14px;

2
apps/browser/src/popup/images/loading.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif" <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle"> font-size="18" text-anchor="middle">
Loading... Loading...
</text> </text>

2
apps/browser/src/popup/scss/variables.scss
View File

@@ -1,6 +1,6 @@
$dark-icon-themes: "theme_dark"; $dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 16px; $font-size-base: 16px;
$font-size-large: 18px; $font-size-large: 18px;

2
apps/desktop/src/app/components/avatar.component.ts
View File

@@ -113,7 +113,7 @@ export class AvatarComponent implements OnChanges, OnInit {
textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true)); textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
textTag.setAttribute( textTag.setAttribute(
"font-family", "font-family",
'"DM Sans","Helvetica Neue",Helvetica,Arial,' + 'Roboto,"Helvetica Neue",Helvetica,Arial,' +
'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', 'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
); );
textTag.textContent = character; textTag.textContent = character;

2
apps/desktop/src/images/loading.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif" <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle"> font-size="18" text-anchor="middle">
Loading... Loading...
</text> </text>

2
apps/desktop/src/scss/variables.scss
View File

@@ -1,6 +1,6 @@
$dark-icon-themes: "theme_dark"; $dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px; $font-size-base: 14px;
$font-size-large: 18px; $font-size-large: 18px;

2
apps/web/src/app/billing/services/stripe.service.ts
View File

@@ -148,7 +148,7 @@ export class StripeService {
base: { base: {
color: null, color: null,
fontFamily: fontFamily:
'"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' + 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: "16px", fontSize: "16px",
fontSmoothing: "antialiased", fontSmoothing: "antialiased",

2
apps/web/src/images/loading-white.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif" <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle"> font-size="18" text-anchor="middle">
Loading... Loading...
</text> </text>

2
apps/web/src/images/loading.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif" <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle"> font-size="18" text-anchor="middle">
Loading... Loading...
</text> </text>

2
apps/web/src/scss/variables.scss
View File

@@ -21,7 +21,7 @@ $body-bg: $white;
$body-color: #333333; $body-color: #333333;
$font-family-sans-serif: $font-family-sans-serif:
"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol"; "Segoe UI Symbol";
$h1-font-size: 1.7rem; $h1-font-size: 1.7rem;

6
libs/angular/src/scss/webfonts.css
View File

@@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "DM Sans"; font-family: Roboto;
src: src:
url("webfonts/dm-sans.woff2") format("woff2 supports variations"), url("webfonts/roboto.woff2") format("woff2 supports variations"),
url("webfonts/dm-sans.woff2") format("woff2-variations"); url("webfonts/roboto.woff2") format("woff2-variations");
font-display: swap; font-display: swap;
font-weight: 100 900; font-weight: 100 900;
} }

BIN
libs/angular/src/scss/webfonts/dm-sans.woff2
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/roboto.woff2 Normal file
View File

Binary file not shown.

2
libs/components/src/avatar/avatar.component.ts
View File

@@ -123,7 +123,7 @@ export class AvatarComponent implements OnChanges {
textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true)); textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
textTag.setAttribute( textTag.setAttribute(
"font-family", "font-family",
'"DM Sans","Helvetica Neue",Helvetica,Arial,' + 'Roboto,"Helvetica Neue",Helvetica,Arial,' +
'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', 'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
); );
// Warning do not use innerHTML here, characters are user provided // Warning do not use innerHTML here, characters are user provided

2
libs/components/src/variables.scss
View File

@@ -21,7 +21,7 @@ $body-bg: $white;
$body-color: #333333; $body-color: #333333;
$font-family-sans-serif: $font-family-sans-serif:
"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol"; "Segoe UI Symbol";
$h1-font-size: 1.7rem; $h1-font-size: 1.7rem;