diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000000..85b8b839182 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/apps/browser/src/autofill/content/components/constants/styles.ts b/apps/browser/src/autofill/content/components/constants/styles.ts index 55130781808..c1d6228459a 100644 --- a/apps/browser/src/autofill/content/components/constants/styles.ts +++ b/apps/browser/src/autofill/content/components/constants/styles.ts @@ -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; `, }; diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts index 42d4907711d..9c55c1e7e2b 100644 --- a/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts +++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts @@ -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; `; diff --git a/apps/browser/src/autofill/content/components/notification/confirmation/message.ts b/apps/browser/src/autofill/content/components/notification/confirmation/message.ts index 7f15d882297..01a2b783eda 100644 --- a/apps/browser/src/autofill/content/components/notification/confirmation/message.ts +++ b/apps/browser/src/autofill/content/components/notification/confirmation/message.ts @@ -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; `; diff --git a/apps/browser/src/autofill/content/components/notification/header-message.ts b/apps/browser/src/autofill/content/components/notification/header-message.ts index 47fe8cd2828..4b6e4722a83 100644 --- a/apps/browser/src/autofill/content/components/notification/header-message.ts +++ b/apps/browser/src/autofill/content/components/notification/header-message.ts @@ -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; `; diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss index 1e804ed8fd2..f356eb86f3a 100644 --- a/apps/browser/src/autofill/shared/styles/variables.scss +++ b/apps/browser/src/autofill/shared/styles/variables.scss @@ -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; diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html index 0a52518b250..bce2b5033ae 100644 --- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html +++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html @@ -8,7 +8,7 @@
  • diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts index 38f85bd7b1e..2ba85e32772 100644 --- a/libs/components/src/avatar/avatar.component.ts +++ b/libs/components/src/avatar/avatar.component.ts @@ -41,7 +41,7 @@ const SizeClasses: Record = { [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() }} diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts index 6ef5309b018..0e50ccbe87a 100644 --- a/libs/components/src/button/button.component.ts +++ b/libs/components/src/button/button.component.ts @@ -69,7 +69,7 @@ const buttonStyles: Record = { export class ButtonComponent implements ButtonLikeAbstraction { @HostBinding("class") get classList() { return [ - "tw-font-semibold", + "tw-font-medium", "tw-rounded-full", "tw-transition", "tw-border-2", diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html index e0fe0a182ea..303d09dfcf3 100644 --- a/libs/components/src/callout/callout.component.html +++ b/libs/components/src/callout/callout.component.html @@ -15,7 +15,7 @@ }
    @if (title) { -
    +
    {{ title }}
    } diff --git a/libs/components/src/color-password/color-password.stories.ts b/libs/components/src/color-password/color-password.stories.ts index 5a544dcb22e..65b6a3c0f18 100644 --- a/libs/components/src/color-password/color-password.stories.ts +++ b/libs/components/src/color-password/color-password.stories.ts @@ -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", diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts index 9887c0bde8b..ca0e3fb1de5 100644 --- a/libs/components/src/icon-button/icon-button.component.ts +++ b/libs/components/src/icon-button/icon-button.component.ts @@ -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", diff --git a/libs/components/src/link/link.directive.ts b/libs/components/src/link/link.directive.ts index e6de8ac8402..df124a6811d 100644 --- a/libs/components/src/link/link.directive.ts +++ b/libs/components/src/link/link.directive.ts @@ -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", diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html index 37a5d82aa1b..10f68145a4d 100644 --- a/libs/components/src/navigation/nav-item.component.html +++ b/libs/components/src/navigation/nav-item.component.html @@ -17,7 +17,7 @@
    -

    +

    diff --git a/libs/components/src/popover/popover.component.html b/libs/components/src/popover/popover.component.html index 756ac27b749..7fd210fcb00 100644 --- a/libs/components/src/popover/popover.component.html +++ b/libs/components/src/popover/popover.component.html @@ -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" >

    -

    +

    {{ title() }}

    - Good (Tailwind) + Good (Tailwind) ```html
    ``` @@ -77,7 +77,7 @@ without this prefix, it probably shouldn't be there. **Exception:** Icon font classes, prefixed with `bwi`, are allowed.
    - Good (Icons) + Good (Icons) ```html ``` @@ -91,7 +91,7 @@ reactive forms to make use of these components. Review the [form component docs](?path=/docs/component-library-form--docs).
    - Bad + Bad ```html
    ... @@ -100,7 +100,7 @@ reactive forms to make use of these components. Review the
    - Good + Good ```html ... diff --git a/libs/components/src/table/sortable.component.ts b/libs/components/src/table/sortable.component.ts index b46c1ee9fbd..dfbaa0b00c3 100644 --- a/libs/components/src/table/sortable.component.ts +++ b/libs/components/src/table/sortable.component.ts @@ -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", diff --git a/libs/components/src/table/table-scroll.component.html b/libs/components/src/table/table-scroll.component.html index 99a5d200aca..2f9c0dcc533 100644 --- a/libs/components/src/table/table-scroll.component.html +++ b/libs/components/src/table/table-scroll.component.html @@ -5,7 +5,7 @@ > diff --git a/libs/components/src/table/table.component.html b/libs/components/src/table/table.component.html index 75d283e7bf3..e1a9d3311ab 100644 --- a/libs/components/src/table/table.component.html +++ b/libs/components/src/table/table.component.html @@ -1,6 +1,6 @@
    diff --git a/libs/components/src/tabs/shared/tab-list-item.directive.ts b/libs/components/src/tabs/shared/tab-list-item.directive.ts index bc70fdf6e4b..3a82c4083d9 100644 --- a/libs/components/src/tabs/shared/tab-list-item.directive.ts +++ b/libs/components/src/tabs/shared/tab-list-item.directive.ts @@ -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", diff --git a/libs/components/src/theme.css b/libs/components/src/theme.css index f9ccc774d43..2aefe37c020 100644 --- a/libs/components/src/theme.css +++ b/libs/components/src/theme.css @@ -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; diff --git a/libs/components/src/toast/toast.component.html b/libs/components/src/toast/toast.component.html index 36d58dcdda7..ec9ace01108 100644 --- a/libs/components/src/toast/toast.component.html +++ b/libs/components/src/toast/toast.component.html @@ -9,7 +9,7 @@
    {{ variant() | i18n }} @if (title(); as title) { -

    {{ title }}

    +

    {{ title }}

    } @for (m of messageArray; track m) {

    diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts index 62e886ca572..538b31f6a32 100644 --- a/libs/components/src/toggle-group/toggle.component.ts +++ b/libs/components/src/toggle-group/toggle.component.ts @@ -56,7 +56,7 @@ export class ToggleComponent 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", diff --git a/libs/components/src/tw-theme-preflight.css b/libs/components/src/tw-theme-preflight.css index 372c80e0881..52287611c37 100644 --- a/libs/components/src/tw-theme-preflight.css +++ b/libs/components/src/tw-theme-preflight.css @@ -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; + } } diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts index 3a507d3fc4b..b92e2e3cb4e 100644 --- a/libs/components/src/typography/typography.directive.ts +++ b/libs/components/src/typography/typography.directive.ts @@ -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 = { - 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"], diff --git a/libs/components/src/typography/typography.stories.ts b/libs/components/src/typography/typography.stories.ts index 10fef6bbe72..bb055be79a0 100644 --- a/libs/components/src/typography/typography.stories.ts +++ b/libs/components/src/typography/typography.stories.ts @@ -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 = { - 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.data = typographyProps; + +export const Default = { + render: (args: { text: string; dataSource: typeof typographyProps }) => ({ props: args, template: /*html*/ ` -

    h1 - {{ text }}
    -
    h2 - {{ text }}
    -
    h3 - {{ text }}
    -
    h4 - {{ text }}
    -
    h5 - {{ text }}
    -
    h6 - {{ text }}
    -
    body1 - {{ text }}
    -
    body2 - {{ text }}
    -
    helper - {{ text }}
    + + +
    + + + + + + + + + + @for (row of rows$ | async; track row.id) { + + + + + + + + + } + + `, }), args: { text: `Sphinx of black quartz, judge my vow.`, + dataSource: typographyData, }, }; diff --git a/libs/components/src/webfonts/inter.woff2 b/libs/components/src/webfonts/inter.woff2 new file mode 100644 index 00000000000..5a8d3e72ad7 Binary files /dev/null and b/libs/components/src/webfonts/inter.woff2 differ diff --git a/libs/components/src/webfonts/roboto.woff2 b/libs/components/src/webfonts/roboto.woff2 deleted file mode 100644 index af8d2343d9c..00000000000 Binary files a/libs/components/src/webfonts/roboto.woff2 and /dev/null differ diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index 06c325894df..ce399d860c1 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -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",
    Rendered TextbitTypography VariantAdditional ClassesWeightSizeLine Height
    {{text}}
    		{{row.typography}}{{row.classes}}{{row.weight}}{{row.size}}{{row.lineHeight}}