diff --git a/.github/whitelist-capital-letters.txt b/.github/whitelist-capital-letters.txt index 99ce80376d3..cbd45e24dc5 100644 --- a/.github/whitelist-capital-letters.txt +++ b/.github/whitelist-capital-letters.txt @@ -5,16 +5,6 @@ ./apps/browser/store/windows/Assets ./bitwarden_license/README.md ./libs/angular/src/directives/cipherListVirtualScroll.directive.ts -./libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff ./libs/admin-console/README.md ./libs/auth/README.md ./libs/billing/README.md diff --git a/apps/browser/gulpfile.js b/apps/browser/gulpfile.js index 3fe2c44dd19..77396b9df1c 100644 --- a/apps/browser/gulpfile.js +++ b/apps/browser/gulpfile.js @@ -22,7 +22,7 @@ const paths = { const filters = { fonts: [ "!build/popup/fonts/*", - "build/popup/fonts/Open_Sans*.woff", + "build/popup/fonts/dm-sans[opsz,wght].woff2", "build/popup/fonts/bwi-font.woff2", "build/popup/fonts/bwi-font.woff", "build/popup/fonts/bwi-font.ttf", diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss index 40b0080bb02..41d38c0b666 100644 --- a/apps/browser/src/autofill/shared/styles/variables.scss +++ b/apps/browser/src/autofill/shared/styles/variables.scss @@ -2,7 +2,7 @@ $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord"; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-size-base: 14px; $text-color: #212529; $muted-text-color: #6c747c; diff --git a/apps/browser/src/popup/images/loading.svg b/apps/browser/src/popup/images/loading.svg index 70763105168..3f2033303db 100644 --- a/apps/browser/src/popup/images/loading.svg +++ b/apps/browser/src/popup/images/loading.svg @@ -1,5 +1,5 @@  - Loading... diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss index 3c651682c17..5eee00ccdc2 100644 --- a/apps/browser/src/popup/scss/pages.scss +++ b/apps/browser/src/popup/scss/pages.scss @@ -306,7 +306,7 @@ app-fido2 { margin-top: 32px; .subtitle { - font-family: Open Sans; + font-family: "DM Sans"; font-size: 24px; font-style: normal; font-weight: 600; diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss index d8891cf620b..db38a044610 100644 --- a/apps/browser/src/popup/scss/variables.scss +++ b/apps/browser/src/popup/scss/variables.scss @@ -2,7 +2,7 @@ $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord"; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-size-base: 14px; $font-size-large: 18px; diff --git a/apps/desktop/src/app/components/avatar.component.ts b/apps/desktop/src/app/components/avatar.component.ts index 10007340636..59005352d13 100644 --- a/apps/desktop/src/app/components/avatar.component.ts +++ b/apps/desktop/src/app/components/avatar.component.ts @@ -111,7 +111,7 @@ export class AvatarComponent implements OnChanges, OnInit { textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true)); textTag.setAttribute( "font-family", - '"Open Sans","Helvetica Neue",Helvetica,Arial,' + + '"DM Sans","Helvetica Neue",Helvetica,Arial,' + 'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', ); textTag.textContent = character; diff --git a/apps/desktop/src/images/loading.svg b/apps/desktop/src/images/loading.svg index 70763105168..3f2033303db 100644 --- a/apps/desktop/src/images/loading.svg +++ b/apps/desktop/src/images/loading.svg @@ -1,5 +1,5 @@  - Loading... diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss index e4a2f124768..338b30b3cbd 100644 --- a/apps/desktop/src/scss/variables.scss +++ b/apps/desktop/src/scss/variables.scss @@ -2,7 +2,7 @@ $dark-icon-themes: "theme_dark", "theme_nord"; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-size-base: 14px; $font-size-large: 18px; diff --git a/apps/web/src/404/styles.css b/apps/web/src/404/styles.css index 0ef36e5219a..0f9856d042c 100644 --- a/apps/web/src/404/styles.css +++ b/apps/web/src/404/styles.css @@ -1,85 +1,7 @@ -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 300; - src: url(../fonts/Open_Sans-italic-300.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 400; - src: url(../fonts/Open_Sans-italic-400.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 600; - src: url(../fonts/Open_Sans-italic-600.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 700; - src: url(../fonts/Open_Sans-italic-700.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 800; - src: url(../fonts/Open_Sans-italic-800.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 300; - src: url(../fonts/Open_Sans-normal-300.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - src: url(../fonts/Open_Sans-normal-400.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 600; - src: url(../fonts/Open_Sans-normal-600.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - src: url(../fonts/Open_Sans-normal-700.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 800; - src: url(../fonts/Open_Sans-normal-800.woff) format("woff"); - unicode-range: U+0-10FFFF; -} +/* The fonts on this page are broken on prod: https://bitwarden.atlassian.net/browse/PM-7863 */ body { - font-family: "Open Sans"; + font-family: "DM Sans"; } html, @@ -100,7 +22,7 @@ h2 { font-size: 23px; line-height: 25px; color: #fff; - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .banner { diff --git a/apps/web/src/app/billing/shared/payment.component.ts b/apps/web/src/app/billing/shared/payment.component.ts index 652bed7801d..d3b1dde2481 100644 --- a/apps/web/src/app/billing/shared/payment.component.ts +++ b/apps/web/src/app/billing/shared/payment.component.ts @@ -67,7 +67,7 @@ export class PaymentComponent implements OnInit, OnDestroy { base: { color: null, fontFamily: - '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' + + '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' + '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', fontSize: "14px", fontSmoothing: "antialiased", diff --git a/apps/web/src/images/loading-white.svg b/apps/web/src/images/loading-white.svg index 30239140069..2bebff7daba 100644 --- a/apps/web/src/images/loading-white.svg +++ b/apps/web/src/images/loading-white.svg @@ -1,5 +1,5 @@  - Loading... diff --git a/apps/web/src/images/loading.svg b/apps/web/src/images/loading.svg index 70763105168..3f2033303db 100644 --- a/apps/web/src/images/loading.svg +++ b/apps/web/src/images/loading.svg @@ -1,5 +1,5 @@  - Loading... diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss index 9d3d8d6ad49..b3a27a7824b 100644 --- a/apps/web/src/scss/variables.scss +++ b/apps/web/src/scss/variables.scss @@ -20,7 +20,7 @@ $theme-colors: ( $body-bg: $white; $body-color: #333333; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; $h1-font-size: 1.7rem; diff --git a/libs/angular/src/scss/webfonts.css b/libs/angular/src/scss/webfonts.css index fe9bb7e1671..71efc489976 100644 --- a/libs/angular/src/scss/webfonts.css +++ b/libs/angular/src/scss/webfonts.css @@ -1,89 +1,7 @@ @font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 300; - font-display: auto; - src: url(webfonts/Open_Sans-italic-300.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 400; - font-display: auto; - src: url(webfonts/Open_Sans-italic-400.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 600; - font-display: auto; - src: url(webfonts/Open_Sans-italic-600.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 700; - font-display: auto; - src: url(webfonts/Open_Sans-italic-700.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: italic; - font-weight: 800; - font-display: auto; - src: url(webfonts/Open_Sans-italic-800.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 300; - font-display: auto; - src: url(webfonts/Open_Sans-normal-300.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-display: auto; - src: url(webfonts/Open_Sans-normal-400.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 600; - font-display: auto; - src: url(webfonts/Open_Sans-normal-600.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-display: auto; - src: url(webfonts/Open_Sans-normal-700.woff) format("woff"); - unicode-range: U+0-10FFFF; -} - -@font-face { - font-family: "Open Sans"; - font-style: normal; - font-weight: 800; - font-display: auto; - src: url(webfonts/Open_Sans-normal-800.woff) format("woff"); - unicode-range: U+0-10FFFF; + font-family: "DM Sans"; + src: + url("webfonts/dm-sans[opsz,wght].woff2") format("woff2 supports variations"), + url("webfonts/dm-sans[opsz,wght].woff2") format("woff2-variations"); + font-display: swap; } diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff deleted file mode 100644 index 8f8e97cfe0f..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff deleted file mode 100644 index f90b9960868..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff deleted file mode 100644 index c262a9c88fc..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff deleted file mode 100644 index 8526ac3d144..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff deleted file mode 100644 index c389a1256c3..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff deleted file mode 100644 index 9f56d335b1e..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff deleted file mode 100644 index 153a1d63a46..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff deleted file mode 100644 index 8271bb4a7a4..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff deleted file mode 100644 index 101c0be6e4d..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff deleted file mode 100644 index 724c2e64bd0..00000000000 Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff and /dev/null differ diff --git a/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 b/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 new file mode 100644 index 00000000000..2375279dbf5 Binary files /dev/null and b/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 differ diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts index b19506952d9..74fc6bb57c7 100644 --- a/libs/components/src/avatar/avatar.component.ts +++ b/libs/components/src/avatar/avatar.component.ts @@ -116,7 +116,7 @@ export class AvatarComponent implements OnChanges { textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true)); textTag.setAttribute( "font-family", - '"Open Sans","Helvetica Neue",Helvetica,Arial,' + + '"DM Sans","Helvetica Neue",Helvetica,Arial,' + 'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', ); // Warning do not use innerHTML here, characters are user provided diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts index ae4448eb76c..687b8917381 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts +++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts @@ -64,26 +64,24 @@ class KitchenSinkDialog {
-

- Bitwarden -

+

Bitwarden

Learn more
-

About

+

About

 -

Companies using Bitwarden

+

Companies using Bitwarden

 -

Survey

+

Survey

 diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts index f8034fd98fb..548f61c1735 100644 --- a/libs/components/src/typography/typography.directive.ts +++ b/libs/components/src/typography/typography.directive.ts @@ -4,12 +4,12 @@ import { Directive, HostBinding, Input } from "@angular/core"; type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper"; const styles: Record = { - h1: ["tw-text-3xl", "tw-font-semibold"], - h2: ["tw-text-2xl", "tw-font-semibold"], - h3: ["tw-text-xl", "tw-font-semibold"], - h4: ["tw-text-lg", "tw-font-semibold"], - h5: ["tw-text-base", "tw-font-semibold"], - h6: ["tw-text-sm", "tw-font-semibold"], + h1: ["tw-text-3xl", "tw-font-semibold", "tw-text-headers"], + h2: ["tw-text-2xl", "tw-font-semibold", "tw-text-headers"], + h3: ["tw-text-xl", "tw-font-semibold", "tw-text-headers"], + h4: ["tw-text-lg", "tw-font-semibold", "tw-text-headers"], + h5: ["tw-text-base", "tw-font-bold", "tw-text-headers"], + h6: ["tw-text-sm", "tw-font-bold", "tw-text-headers"], body1: ["tw-text-base"], body2: ["tw-text-sm"], helper: ["tw-text-xs"], @@ -20,8 +20,8 @@ const margins: Record = { h2: ["tw-mb-2"], h3: ["tw-mb-2"], h4: ["tw-mb-2"], - h5: ["tw-mb-2"], - h6: ["tw-mb-2"], + h5: ["tw-mb-1.5"], + h6: ["tw-mb-1.5"], body1: [], body2: [], helper: [], diff --git a/libs/components/src/typography/typography.mdx b/libs/components/src/typography/typography.mdx index 6c463f7cae4..11b37bb53b4 100644 --- a/libs/components/src/typography/typography.mdx +++ b/libs/components/src/typography/typography.mdx @@ -1,67 +1,25 @@ -import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs"; +import { Meta, Story, Canvas } from "@storybook/addon-docs"; import * as stories from "./typography.stories"; +```ts +import { TypographyModule } from "@bitwarden/components"; +``` + # Typography - - - - -## Stories - - +The `bitTypography` directive applies text styles to its host element. ```html

H1

``` - +For headings, note that the semantic element and the text style may not always be in sync: ```html -

H2

+

Semantically, I am an h2, but I use h5 styles.

``` - - -```html -

H3

-``` - - - -```html -

H4

-``` - - - -```html -
H5
-``` - - - -```html -
H6
-``` - - - -```html -

Body 1

-``` - - - -```html -

Body 2 -``` - - - -```html -

Helper Text -``` + diff --git a/libs/components/src/typography/typography.stories.ts b/libs/components/src/typography/typography.stories.ts index 27fc0ca7b99..10fef6bbe72 100644 --- a/libs/components/src/typography/typography.stories.ts +++ b/libs/components/src/typography/typography.stories.ts @@ -5,86 +5,24 @@ import { TypographyDirective } from "./typography.directive"; export default { title: "Component Library/Typography", component: TypographyDirective, - args: { - bitTypography: "body1", - }, } as Meta; -type Story = StoryObj; - -export const H1: Story = { +export const Default: StoryObj = { render: (args) => ({ props: args, - template: `{{text}}`, + template: /*html*/ ` +

h1 - {{ text }}
+
h2 - {{ text }}
+
h3 - {{ text }}
+
h4 - {{ text }}
+
h5 - {{ text }}
+
h6 - {{ text }}
+
body1 - {{ text }}
+
body2 - {{ text }}
+
helper - {{ text }}
+ `, }), args: { - bitTypography: "h1", - text: "h1. Page Title", - }, -}; - -export const H2: Story = { - ...H1, - args: { - bitTypography: "h2", - text: "h2. Page Section", - }, -}; - -export const H3: Story = { - ...H1, - args: { - bitTypography: "h3", - text: "h3. Page Section", - }, -}; - -export const H4: Story = { - ...H1, - args: { - bitTypography: "h4", - text: "h4. Page Section", - }, -}; - -export const H5: Story = { - ...H1, - - args: { - bitTypography: "h5", - text: "h5. Page Section", - }, -}; - -export const H6: Story = { - ...H1, - - args: { - bitTypography: "h6", - text: "h6. Page Section", - }, -}; - -export const Body1: Story = { - ...H1, - args: { - bitTypography: "body1", - text: "Body 1", - }, -}; - -export const Body2: Story = { - ...H1, - args: { - bitTypography: "body2", - text: "Body 2", - }, -}; - -export const Helper: Story = { - ...H1, - args: { - bitTypography: "helper", - text: "Helper Text", + text: `Sphinx of black quartz, judge my vow.`, }, }; diff --git a/libs/components/src/variables.scss b/libs/components/src/variables.scss index 88e3cba5c3c..d278746bb2e 100644 --- a/libs/components/src/variables.scss +++ b/libs/components/src/variables.scss @@ -20,7 +20,7 @@ $theme-colors: ( $body-bg: $white; $body-color: #333333; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; $h1-font-size: 1.7rem;