feat(typography): update typography to match designs (#160)

* feat(typography): update typography to match designs

added display2 and button + buttonLink 1 to 3

* change button 3 to bold

.storybook/blocks/Changelog/Changelog.module.css

@@ -14,21 +14,21 @@
   }
 
   & h1:global(.sbdocs) {
-    @mixin button_medium__bold;
+    @mixin typography-button-2;
 
     margin: var(--gap-2xl) 0 var(--gap-m);
     color: var(--color-light-text-primary);
     border-bottom: 1px solid var(--color-light-border-secondary);
 
     & a {
-      @mixin button_small__medium;
+      @mixin typography-button-3;
 
       border: none;
     }
   }
 
   & h2:global(.sbdocs) {
-    @mixin button_small__medium;
+    @mixin typography-button-3;
 
     border: 0;
     box-shadow: none;
@@ -43,7 +43,7 @@
     }
 
     & a {
-      @mixin button_small__medium;
+      @mixin typography-button-3;
 
       border: none;
     }

packages/typography/src/Typography.constants.ts

@@ -1,5 +1,6 @@
 export const defaultVariantMapping = {
   display1: 'p',
+  display2: 'p',
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
@@ -21,4 +22,10 @@ export const defaultVariantMapping = {
   caption5: 'caption',
   overline1: 'span',
   overline2: 'span',
+  button1: 'span',
+  button2: 'span',
+  button3: 'span',
+  buttonLink1: 'span',
+  buttonLink2: 'span',
+  buttonLink3: 'span',
 } as const;

packages/typography/src/docs/Description.mdx

@@ -25,12 +25,13 @@ In case you want to change the HTML tag the text should be wrapped, you can set
 
 Several typography elements are available in the library. They are listed below.
 
-- Display (`variant="display1"`)
+- Display (`variant="display1|display2"`)
 - Heading (`variant="h1|h2|h3|h4|h5|h6"`)
 - Sub heading (`variant="subheading1|subheading2|subheading3|subheading4"`)
 - Body (`variant="body1|body2|body3|body4"`)
 - Caption (`variant="caption1|caption2|caption3|caption4|caption5"`)
 - Overline (`variant="overline1|overline2"`)
+- Button (`variant="button1|button2|button3|buttonLink1|buttonLink2|buttonLink3"`)
 
 If this prop is not set, the default is `variant="body3"`. You can try the different variants in the playground below.
 

packages/typography/src/styles/variant.module.css

@@ -9,6 +9,10 @@
   @mixin typography-display;
 }
 
+.display2 {
+  @mixin typography-display-2;
+}
+
 /*
   Heading
 */
@@ -54,14 +58,40 @@
   }
 }
 
+/*
+  Button
+*/
+.button1 {
+  @mixin typography-button-1;
+}
+
+.button2 {
+  @mixin typography-button-2;
+}
+
+.button3 {
+  @mixin typography-button-3;
+}
+
+.buttonLink1 {
+  @mixin typography-button-1;
+  text-decoration: underline;
+}
+
+.buttonLink2 {
+  @mixin typography-button-2;
+  text-decoration: underline;
+}
+
+.buttonLink3 {
+  @mixin typography-button-3;
+  text-decoration: underline;
+}
+
 /*
   Mobile
 */
 @media screen and (max-width: 768px) {
-  .display1 {
-    @mixin typography-display_mobile;
-  }
-
   /* @for $i from 1 to 5 {
     .h1$(i) {
       @mixin typography-heading-$(i) _mobile;

packages/vars/src/typography.css

@@ -13,18 +13,31 @@
   Heading
 */
 @define-mixin typography-display {
-  font-size: 60px;
-  line-height: 68px;
-  letter-spacing: -2.5px;
+  font-size: 48px;
+  line-height: 56px;
+  letter-spacing: -2px;
   font-family: var(--font-family-system);
   font-weight: var(--font-weight-xbold);
+
+  @media (--tablet) {
+    font-size: 60px;
+    line-height: 68px;
+    letter-spacing: -2.5px;
+  }
 }
 
-@define-mixin typography-display_mobile {
-  @mixin typography-display;
+@define-mixin typography-display-2 {
   font-size: 48px;
   line-height: 56px;
   letter-spacing: -2px;
+  font-family: var(--font-family-system);
+  font-weight: var(--font-weight-bold);
+
+  @media (--tablet) {
+    font-size: 60px;
+    line-height: 68px;
+    letter-spacing: -2.5px;
+  }
 }
 
 @define-mixin typography-heading-1 {
@@ -209,6 +222,30 @@
 /*
   Button
 */
+@define-mixin typography-button-1 {
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.2px;
+  font-family: var(--font-family-system);
+}
+
+@define-mixin typography-button-2 {
+  font-size: 14px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.2px;
+  font-family: var(--font-family-system);
+}
+
+@define-mixin typography-button-3 {
+  font-size: 12px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.2px;
+  font-family: var(--font-family-system);
+}
+
+/*
+  Button Old - DO NOT USE
+*/
 @define-mixin button_large__bold {
   font-size: 16px;
   font-weight: 700;