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

Update font to inter feature branch (#16782)

Browse Source
This commit is contained in:
Vicki League
2025-11-03 15:17:07 -05:00
committed by GitHub
parent 6265fc2d46
commit cba47e4abd
49 changed files with 318 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.storybook/preview-head.html Normal file
View File

@@ -0,0 +1,21 @@
<!-- preload the inter font to avoid a flash of fallback font when first loading storybook -->
<!-- href matches the inter build artifact from webpack -->
<link
rel="preload"
href="/inter.0336a89fb4e7fc1d.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<!-- load inter font from the source cdn so that chromatic snapshots render in the correct font -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<!-- manually specify inter as the font here for chromatic snapshots -->
<style>
:root {
font-family: Inter;
font-weight: 100 900;
}
</style>

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

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

2
apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts
View File

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

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

@@ -84,7 +84,7 @@ const baseTextStyles = css`
text-align: left;
text-overflow: ellipsis;
line-height: 24px;
font-family: Roboto, sans-serif;
font-family: Inter, sans-serif;
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;
white-space: nowrap;
color: ${themes[theme].text.main};
font-family: Roboto, sans-serif;
font-family: Inter, sans-serif;
font-size: 18px;
font-weight: 600;
`;

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

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

2
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
View File

@@ -8,7 +8,7 @@
<li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none tw-relative">
<button
class="tw-w-full tw-flex tw-flex-col tw-items-center tw-px-0.5 tw-py-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 tw-group/tab-nav-btn hover:tw-bg-hover-default tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
[ngClass]="rla.isActive ? 'tw-font-medium tw-text-primary-600' : 'tw-text-muted'"
title="{{ button.label | i18n }}"
[routerLink]="button.page"
[appA11yTitle]="buttonTitle(button)"

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

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

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

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

@@ -132,7 +132,7 @@ export class AvatarComponent implements OnChanges, OnInit {
textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
textTag.setAttribute(
"font-family",
'Roboto,"Helvetica Neue",Helvetica,Arial,' +
'Inter,"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="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
<text fill="%23333333" x="50%" y="50%" font-family="\'Inter\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</text>

4
apps/desktop/src/scss/left-nav.scss
View File

@@ -72,7 +72,7 @@
&.active {
.filter-button {
font-weight: bold;
font-weight: 500;
@include themify($themes) {
color: themed("primaryColor");
}
@@ -114,7 +114,7 @@
.filter-button {
@include themify($themes) {
color: themed("primaryColor");
font-weight: bold;
font-weight: 500;
}
max-width: 90%;
}

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

@@ -1,6 +1,6 @@
$dark-icon-themes: "theme_dark";
$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-sans-serif: Inter, "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/web/src/app/billing/services/stripe.service.ts
View File

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

2
apps/web/src/app/components/environment-selector/environment-selector.component.html
View File

@@ -18,7 +18,7 @@
<div bitTypography="body2">
{{ "accessing" | i18n }}:
<a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
<b class="tw-text-primary-600 tw-font-semibold">{{ currentRegion?.domain }}</b>
<b class="tw-text-primary-600 tw-font-medium">{{ currentRegion?.domain }}</b>
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
</div>

2
apps/web/src/app/layouts/header/web-header.component.html
View File

@@ -12,7 +12,7 @@
<h1
bitTypography="h1"
noMargin
class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1 tw-font-medium"
[title]="title || (routeData.titleId | i18n)"
>
<div class="tw-truncate">

4
apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
View File

@@ -29,7 +29,7 @@
[href]="more.marketingRoute.route"
target="_blank"
rel="noreferrer"
class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
>
<i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
<div>
@@ -47,7 +47,7 @@
*ngIf="!more.marketingRoute.external"
[routerLink]="more.marketingRoute.route"
rel="noreferrer"
class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
>
<i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
<div>

2
apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
View File

@@ -14,7 +14,7 @@
[routerLink]="product.appRoute"
[ngClass]="
product.isActive
? 'tw-bg-primary-600 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
? 'tw-bg-primary-600 tw-font-medium !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
: ''
"
class="tw-group/product-link tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-600 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"

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

6
apps/web/src/scss/tailwind.css
View File

@@ -86,11 +86,11 @@
*/
@layer components {
.tw-h1 {
@apply tw-text-3xl tw-font-semibold;
@apply tw-text-3xl tw-font-medium;
}
.tw-btn {
@apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
@apply tw-font-medium tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
}
.tw-btn-secondary {
@@ -100,7 +100,7 @@
}
.tw-link {
@apply tw-font-semibold hover:tw-underline hover:tw-decoration-1;
@apply tw-font-medium hover:tw-underline hover:tw-decoration-1;
@apply tw-text-primary-600 hover:tw-text-primary-700 focus-visible:before:tw-ring-primary-600;
}

4
apps/web/src/scss/vault-filters.scss
View File

@@ -30,7 +30,7 @@
color: rgb(var(--color-primary-600));
}
&.active {
font-weight: bold;
font-weight: 500;
}
}
}
@@ -59,7 +59,7 @@
> .filter-buttons {
.filter-button {
color: rgb(var(--color-primary-600));
font-weight: bold;
font-weight: 500;
}
.edit-button {

8
libs/components/src/anon-layout/anon-layout.stories.ts
View File

@@ -77,20 +77,20 @@ export default {
[hideBackgroundIllustration]="hideBackgroundIllustration"
>
<ng-container [ngSwitch]="contentLength">
<div *ngSwitchCase="'thin'" class="tw-text-center"> <div class="tw-font-bold">Thin Content</div></div>
<div *ngSwitchCase="'thin'" class="tw-text-center"> <div class="tw-font-medium">Thin Content</div></div>
<div *ngSwitchCase="'long'">
<div class="tw-font-bold">Long Content</div>
<div class="tw-font-medium">Long Content</div>
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div *ngSwitchDefault>
<div class="tw-font-bold">Normal Content</div>
<div class="tw-font-medium">Normal Content</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
</ng-container>
<div *ngIf="showSecondary" slot="secondary" class="tw-text-center">
<div class="tw-font-bold tw-mb-2">
<div class="tw-font-medium tw-mb-2">
Secondary Projected Content (optional)
</div>
<button type="button" bitButton>Perform Action</button>

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

@@ -41,7 +41,7 @@ const SizeClasses: Record<SizeTypes, string[]> = {
[attr.fill]="textColor()"
[style.fontWeight]="svgFontWeight"
[style.fontSize.px]="svgFontSize"
font-family='Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
font-family='Inter,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
>
{{ displayChars() }}
</text>

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

@@ -69,7 +69,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
export class ButtonComponent implements ButtonLikeAbstraction {
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-font-medium",
"tw-rounded-full",
"tw-transition",
"tw-border-2",

2
libs/components/src/callout/callout.component.html
View File

@@ -15,7 +15,7 @@
}
<div class="tw-flex tw-flex-col tw-gap-0.5">
@if (title) {
<header id="{{ titleId }}" class="tw-text-base tw-font-semibold">
<header id="{{ titleId }}" class="tw-text-base tw-font-medium">
{{ title }}
</header>
}

2
libs/components/src/color-password/color-password.stories.ts
View File

@@ -4,7 +4,7 @@ import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for
import { ColorPasswordComponent } from "./color-password.component";
const examplePassword = "Wq$Jk😀7j DX#rS5Sdi!z ";
const examplePassword = "Wq$Jk😀7jlI DX#rS5Sdi!z ";
export default {
title: "Component Library/Color Password",

2
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -126,7 +126,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-font-medium",
"tw-leading-[0px]",
"tw-border-none",
"tw-transition",

2
libs/components/src/link/link.directive.ts
View File

@@ -25,7 +25,7 @@ const commonStyles = [
"tw-leading-none",
"tw-px-0",
"tw-py-0.5",
"tw-font-semibold",
"tw-font-medium",
"tw-bg-transparent",
"tw-border-0",
"tw-border-none",

2
libs/components/src/navigation/nav-item.component.html
View File

@@ -17,7 +17,7 @@
<ng-template #anchorAndButtonContent>
<div
[title]="text()"
class="tw-gap-2 tw-flex tw-items-center tw-font-bold tw-h-full"
class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full"
[ngClass]="{ 'tw-justify-center': !open }"
>
<i

2
libs/components/src/no-items/no-items.component.html
View File

@@ -3,7 +3,7 @@
<div class="tw-size-24 tw-content-center">
<bit-icon [icon]="icon()" aria-hidden="true"></bit-icon>
</div>
<h3 class="tw-font-semibold tw-text-center tw-mt-4">
<h3 class="tw-font-medium tw-text-center tw-mt-4">
<ng-content select="[slot=title]"></ng-content>
</h3>
<p class="tw-text-center">

2
libs/components/src/popover/popover.component.html
View File

@@ -12,7 +12,7 @@
class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-primary-100 tw-pb-4 tw-pt-2 tw-text-main"
>
<div class="tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
<h2 bitTypography="h5" class="tw-font-semibold tw-mt-1">
<h2 bitTypography="h5" class="tw-font-medium tw-mt-1">
{{ title() }}
</h2>
<button

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

@@ -51,7 +51,7 @@ export class ProgressComponent {
"tw-items-center",
"tw-whitespace-nowrap",
"tw-text-xs",
"tw-font-semibold",
"tw-font-medium",
"tw-text-contrast",
"tw-transition-all",
]

2
libs/components/src/radio-button/radio-group.component.html
View File

@@ -1,6 +1,6 @@
@if (label()) {
<fieldset>
<legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
<legend class="tw-mb-1 tw-block tw-text-sm tw-font-medium tw-text-main">
<ng-content select="bit-label"></ng-content>
@if (required) {
<span class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>

8
libs/components/src/stepper/stepper.component.html
View File

@@ -18,13 +18,13 @@
>
@if (step.completed) {
<span
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-medium tw-leading-9 tw-text-contrast"
>
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
</span>
} @else {
<span
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-bold tw-leading-9"
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-medium tw-leading-9"
[ngClass]="{
'tw-bg-primary-600 tw-text-contrast': selectedIndex === $index,
'tw-bg-secondary-300 tw-text-main':
@@ -83,13 +83,13 @@
>
@if (step.completed) {
<span
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-medium tw-leading-9 tw-text-contrast"
>
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
</span>
} @else {
<span
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-bold tw-leading-9"
class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-medium tw-leading-9"
[ngClass]="{
'tw-bg-primary-600 tw-text-contrast': selectedIndex === $index,
'tw-bg-secondary-300 tw-text-main':

10
libs/components/src/stories/migration.mdx
View File

@@ -61,14 +61,14 @@ This is easy to verify. Bitwarden prefixes all Tailwind classes with `tw-`. If y
without this prefix, it probably shouldn't be there.
<div class="tw-bg-danger-600/10 tw-p-4">
<span class="tw-font-bold tw-text-danger">Bad (Bootstrap)</span>
<span class="tw-font-medium tw-text-danger">Bad (Bootstrap)</span>
```html
<div class="mb-2"></div>
```
</div>
<div class="tw-bg-success-600/10 tw-p-4">
<span class="tw-font-bold tw-text-success">Good (Tailwind)</span>
<span class="tw-font-medium tw-text-success">Good (Tailwind)</span>
```html
<div class="tw-mb-2"></div>
```
@@ -77,7 +77,7 @@ without this prefix, it probably shouldn't be there.
**Exception:** Icon font classes, prefixed with `bwi`, are allowed.
<div class="tw-bg-success-600/10 tw-p-4">
<span class="tw-font-bold tw-text-success">Good (Icons)</span>
<span class="tw-font-medium tw-text-success">Good (Icons)</span>
```html
<i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
```
@@ -91,7 +91,7 @@ reactive forms to make use of these components. Review the
[form component docs](?path=/docs/component-library-form--docs).
<div class="tw-bg-danger-600/10 tw-p-4">
<span class="tw-text-danger tw-font-bold">Bad</span>
<span class="tw-text-danger tw-font-medium">Bad</span>
```html
<form #form (ngSubmit)="submit()">
...
@@ -100,7 +100,7 @@ reactive forms to make use of these components. Review the
</div>
<div class="tw-bg-success-600/10 tw-p-4">
<span class="tw-text-success tw-font-bold">Good</span>
<span class="tw-text-success tw-font-medium">Good</span>
```html
<form [formGroup]="formGroup" [bitSubmit]="submit">
...

2
libs/components/src/table/sortable.component.ts
View File

@@ -106,7 +106,7 @@ export class SortableComponent implements OnInit {
get classList() {
return [
"tw-min-w-max",
"tw-font-bold",
"tw-font-medium",
// Below is copied from BitIconButtonComponent
"tw-border",

2
libs/components/src/table/table-scroll.component.html
View File

@@ -5,7 +5,7 @@
>
<table [ngClass]="tableClass">
<thead
class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-medium tw-text-muted"
>
<tr>
<ng-content select="[header]"></ng-content>

2
libs/components/src/table/table.component.html
View File

@@ -1,6 +1,6 @@
<table [ngClass]="tableClass">
<thead
class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-medium tw-text-muted"
>
<ng-content select="[header]"></ng-content>
</thead>

2
libs/components/src/tabs/shared/tab-list-item.directive.ts
View File

@@ -60,7 +60,7 @@ export class TabListItemDirective implements FocusableOption {
"tw-relative",
"tw-py-2",
"tw-px-4",
"tw-font-semibold",
"tw-font-medium",
"tw-transition",
"tw-rounded-t-lg",
"tw-border-0",

8
libs/components/src/theme.css
View File

@@ -7,10 +7,10 @@
* Font faces
*/
@font-face {
font-family: Roboto;
font-family: Inter;
src:
url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2 supports variations"),
url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2-variations");
url("~@bitwarden/components/src/webfonts/inter.woff2") format("woff2 supports variations"),
url("~@bitwarden/components/src/webfonts/inter.woff2") format("woff2-variations");
font-display: swap;
font-weight: 100 900;
}
@@ -20,7 +20,7 @@
*/
:root {
--font-sans:
Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
Inter, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: Menlo, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

2
libs/components/src/toast/toast.component.html
View File

@@ -9,7 +9,7 @@
<div>
<span class="tw-sr-only">{{ variant() | i18n }}</span>
@if (title(); as title) {
<p data-testid="toast-title" class="tw-font-semibold tw-mb-0">{{ title }}</p>
<p data-testid="toast-title" class="tw-font-medium tw-mb-0">{{ title }}</p>
}
@for (m of messageArray; track m) {
<p bitTypography="body2" data-testid="toast-message" class="tw-mb-2 last:tw-mb-0">

2
libs/components/src/toggle-group/toggle.component.ts
View File

@@ -56,7 +56,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
"tw-items-center",
"tw-justify-center",
"tw-gap-1.5",
"!tw-font-semibold",
"!tw-font-medium",
"tw-leading-5",
"tw-transition",
"tw-text-center",

18
libs/components/src/tw-theme-preflight.css
View File

@@ -14,22 +14,22 @@
}
h1 {
@apply tw-text-3xl tw-font-semibold tw-text-main tw-mb-2;
@apply tw-text-3xl tw-text-main tw-mb-2;
}
h2 {
@apply tw-text-2xl tw-font-semibold tw-text-main tw-mb-2;
@apply tw-text-2xl tw-text-main tw-mb-2;
}
h3 {
@apply tw-text-xl tw-font-semibold tw-text-main tw-mb-2;
@apply tw-text-xl tw-text-main tw-mb-2;
}
h4 {
@apply tw-text-lg tw-font-semibold tw-text-main tw-mb-2;
@apply tw-text-lg tw-text-main tw-mb-2;
}
h5 {
@apply tw-text-base tw-font-bold tw-text-main tw-mb-1.5;
@apply tw-text-base tw-text-main tw-mb-1.5;
}
h6 {
@apply tw-text-sm tw-font-bold tw-text-main tw-mb-1.5;
@apply tw-text-sm tw-text-main tw-mb-1.5;
}
code {
@@ -59,7 +59,7 @@
}
dt {
@apply tw-font-bold;
@apply tw-font-medium;
}
hr {
@@ -78,4 +78,8 @@
svg {
display: inline;
}
th {
@apply tw-font-medium;
}
}

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

@@ -3,12 +3,12 @@ import { booleanAttribute, 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", "tw-text-main"],
h2: ["!tw-text-2xl", "tw-font-semibold", "tw-text-main"],
h3: ["!tw-text-xl", "tw-font-semibold", "tw-text-main"],
h4: ["!tw-text-lg", "tw-font-semibold", "tw-text-main"],
h5: ["!tw-text-base", "tw-font-bold", "tw-text-main"],
h6: ["!tw-text-sm", "tw-font-bold", "tw-text-main"],
h1: ["!tw-text-3xl", "tw-text-main"],
h2: ["!tw-text-2xl", "tw-text-main"],
h3: ["!tw-text-xl", "tw-text-main"],
h4: ["!tw-text-lg", "tw-text-main"],
h5: ["!tw-text-base", "tw-text-main"],
h6: ["!tw-text-sm", "tw-text-main"],
body1: ["!tw-text-base"],
body2: ["!tw-text-sm"],
helper: ["!tw-text-xs"],

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

@@ -1,28 +1,226 @@
import { Meta, StoryObj } from "@storybook/angular";
import { Meta, moduleMetadata } from "@storybook/angular";
import { TableModule, TableDataSource } from "../table";
import { TypographyDirective } from "./typography.directive";
export default {
title: "Component Library/Typography",
component: TypographyDirective,
decorators: [
moduleMetadata({
imports: [TableModule],
}),
],
} as Meta;
export const Default: StoryObj<TypographyDirective & { text: string }> = {
render: (args) => ({
type TypographyData = {
id: string;
typography: string;
classes?: string;
weight: string;
size: number;
lineHeight: string;
};
const typographyProps: TypographyData[] = [
{
id: "h1",
typography: "h1",
weight: "Regular",
size: 30,
lineHeight: "150%",
},
{
id: "h2",
typography: "h2",
weight: "Regular",
size: 24,
lineHeight: "150%",
},
{
id: "h3",
typography: "h3",
weight: "Regular",
size: 20,
lineHeight: "150%",
},
{
id: "h4",
typography: "h4",
weight: "Regular",
size: 18,
lineHeight: "150%",
},
{
id: "h5",
typography: "h5",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "h6",
typography: "h6",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "body",
typography: "body1",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "body-med",
typography: "body1",
classes: "tw-font-medium",
weight: "Medium",
size: 16,
lineHeight: "150%",
},
{
id: "body-semi",
typography: "body1",
classes: "tw-font-semibold",
weight: "Semibold",
size: 16,
lineHeight: "150%",
},
{
id: "body-underline",
typography: "body1",
classes: "tw-underline",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "body-sm",
typography: "body2",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-med",
typography: "body2",
classes: "tw-font-medium",
weight: "Medium",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-semi",
typography: "body2",
classes: "tw-font-semibold",
weight: "Semibold",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-underline",
typography: "body2",
classes: "tw-underline",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "helper",
typography: "helper",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
{
id: "helper-med",
typography: "helper",
classes: "tw-font-medium",
weight: "Medium",
size: 12,
lineHeight: "150%",
},
{
id: "helper-semi",
typography: "helper",
classes: "tw-font-semibold",
weight: "Semibold",
size: 12,
lineHeight: "150%",
},
{
id: "helper-underline",
typography: "helper",
classes: "tw-underline",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
{
id: "code",
typography: "body1",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "code-sm",
typography: "body2",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "code-helper",
typography: "helper",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
];
const typographyData = new TableDataSource<TypographyData>();
typographyData.data = typographyProps;
export const Default = {
render: (args: { text: string; dataSource: typeof typographyProps }) => ({
props: args,
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>
<bit-table [dataSource]="dataSource">
<ng-container header>
<tr>
<th bitCell>Rendered Text</th>
<th bitCell>bitTypography Variant</th>
<th bitCell>Additional Classes</th>
<th bitCell>Weight</th>
<th bitCell>Size</th>
<th bitCell>Line Height</th>
</tr>
</ng-container>
<ng-template body let-rows$>
@for (row of rows$ | async; track row.id) {
<tr bitRow alignContent="middle">
<td bitCell><div [bitTypography]="row.typography" [ngClass]="row.classes">{{text}}</div></td>
<td bitCell bitTypography="body2">{{row.typography}}</td>
<td bitCell bitTypography="body2">{{row.classes}}</td>
<td bitCell bitTypography="body2">{{row.weight}}</td>
<td bitCell bitTypography="body2">{{row.size}}</td>
<td bitCell bitTypography="body2">{{row.lineHeight}}</td>
</tr>
}
</ng-template>
</bit-table>
`,
}),
args: {
text: `Sphinx of black quartz, judge my vow.`,
dataSource: typographyData,
},
};

BIN
libs/components/src/webfonts/inter.woff2 Normal file
View File

Binary file not shown.

BIN
libs/components/src/webfonts/roboto.woff2
View File

Binary file not shown.

10
libs/components/tailwind.config.base.js
View File

@@ -155,8 +155,14 @@ module.exports = {
"90vw": "90vw",
}),
fontSize: {
xs: [".8125rem", "1rem"],
"3xl": ["1.75rem", "2rem"],
"3xl": ["1.875rem", "150%"],
"2xl": ["1.5rem", "150%"],
xl: ["1.25rem", "150%"],
lg: ["1.125rem", "150%"],
md: ["1rem", "150%"],
base: ["1rem", "150%"],
sm: ["0.875rem", "150%"],
xs: [".75rem", "150%"],
},
container: {
"@5xl": "1100px",