[CL-238] update typography (#8997)

* update typography docs, story, color

* add SM Sans font, remove Open Sans

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

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

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

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

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<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: [],

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";
 
 <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} />

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<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.`,
   },
 };

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;