bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 15:03:26 +00:00
Code Issues Releases Wiki Activity

[CL-238] update typography (#8997)

Browse Source 
* update typography docs, story, color

* add SM Sans font, remove Open Sans

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
Will Martin
2024-05-06 16:21:53 -04:00
committed by GitHub
parent 8693418d3b
commit c6fb12ad1f
32 changed files with 56 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.github/whitelist-capital-letters.txt vendored
View File

@@ -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

2
apps/browser/gulpfile.js
View File

@@ -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",

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

@@ -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;

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%">
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</text>

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

@@ -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;

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

@@ -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;

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

@@ -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;

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%">
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</text>

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

@@ -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;

84
apps/web/src/404/styles.css
View File

@@ -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 {

2
apps/web/src/app/billing/shared/payment.component.ts
View File

@@ -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",

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%">
<text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
<text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</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%">
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</text>

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

@@ -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;

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

@@ -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;
}

BIN
libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff
View File

Binary file not shown.

BIN
libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 Normal file
View File

Binary file not shown.

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

@@ -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

10
libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
View File

@@ -64,26 +64,24 @@ class KitchenSinkDialog {
</bit-callout>
<div class="tw-mb-6 tw-mt-6">
<h1 bitTypography="h1" class="tw-text-main">
Bitwarden <bit-avatar text="Bit Warden"></bit-avatar>
</h1>
<h1 bitTypography="h1">Bitwarden <bit-avatar text="Bit Warden"></bit-avatar></h1>
<a bitLink linkType="primary" href="#">Learn more</a>
</div>
<bit-tab-group label="Main content tabs" class="tw-text-main">
<bit-tab label="Evaluation">
<bit-section>
<h2 bitTypography="h2" class="tw-text-main tw-mb-6">About</h2>
<h2 bitTypography="h2" class="tw-mb-6">About</h2>
<bit-kitchen-sink-table></bit-kitchen-sink-table>
<button bitButton (click)="openDefaultDialog()">Open Dialog</button>
</bit-section>
<bit-section>
<h2 bitTypography="h2" class="tw-text-main tw-mb-6">Companies using Bitwarden</h2>
<h2 bitTypography="h2" class="tw-mb-6">Companies using Bitwarden</h2>
<bit-kitchen-sink-toggle-list></bit-kitchen-sink-toggle-list>
</bit-section>
<bit-section>
<h2 bitTypography="h2" class="tw-text-main tw-mb-6">Survey</h2>
<h2 bitTypography="h2" class="tw-mb-6">Survey</h2>
<bit-kitchen-sink-form></bit-kitchen-sink-form>
</bit-section>
</bit-tab>

16
libs/components/src/typography/typography.directive.ts
View File

@@ -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<TypographyType, string[]> = {
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<TypographyType, string[]> = {
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: [],

60
libs/components/src/typography/typography.mdx
View File

@@ -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";
<Meta of={stories} />
```ts
import { TypographyModule } from "@bitwarden/components";
```
# Typography
<Primary />
<Controls />
## Stories
<Story of={stories.H1} />
The `bitTypography` directive applies text styles to its host element.
```html
<h1 bitTypography="h1">H1</h1>
```
<Story of={stories.H2} />
For headings, note that the semantic element and the text style may not always be in sync:
```html
<h2 bitTypography="h2">H2</h2>
<h2 bitTypography="h5">Semantically, I am an h2, but I use h5 styles.</h2>
```
<Story of={stories.H3} />
```html
<h3 bitTypography="h3">H3</h3>
```
<Story of={stories.H4} />
```html
<h4 bitTypography="h4">H4</h4>
```
<Story of={stories.H5} />
```html
<h5 bitTypography="h5">H5</h5>
```
<Story of={stories.H6} />
```html
<h6 bitTypography="h6">H6</h6>
```
<Story of={stories.Body1} />
```html
<p bitTypography="body1">Body 1</p>
```
<Story of={stories.Body2} />
```html
<p bitTypography="body2">Body 2</h1>
```
<Story of={stories.Helper} />
```html
<p bitTypography="helper">Helper Text</h1>
```
<Canvas story={stories.Default} />

88
libs/components/src/typography/typography.stories.ts
View File

@@ -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<TypographyDirective & { text: string }>;
export const H1: Story = {
export const Default: StoryObj<TypographyDirective & { text: string }> = {
render: (args) => ({
props: args,
template: `<span [bitTypography]="bitTypography" class="tw-text-main">{{text}}</span>`,
template: /*html*/ `
<div bitTypography="h1">h1 - {{ text }}</div>
<div bitTypography="h2">h2 - {{ text }}</div>
<div bitTypography="h3">h3 - {{ text }}</div>
<div bitTypography="h4">h4 - {{ text }}</div>
<div bitTypography="h5">h5 - {{ text }}</div>
<div bitTypography="h6">h6 - {{ text }}</div>
<div bitTypography="body1" class="tw-text-main">body1 - {{ text }}</div>
<div bitTypography="body2" class="tw-text-main">body2 - {{ text }}</div>
<div bitTypography="helper" class="tw-text-main">helper - {{ text }}</div>
`,
}),
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.`,
},
};

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

@@ -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;