feat: introduce font picker (#8012)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/css/styles.scss

@@ -152,7 +152,7 @@ body.excalidraw-cursor-resize * {
       margin-bottom: 0.25rem;
       font-size: 0.75rem;
       color: var(--text-primary-color);
-      font-weight: normal;
+      font-weight: 400;
       display: block;
     }
 
@@ -227,14 +227,7 @@ body.excalidraw-cursor-resize * {
     label,
     button,
     .zIndexButton {
-      @include outlineButtonStyles;
-
-      padding: 0;
-
-      svg {
-        width: var(--default-icon-size);
-        height: var(--default-icon-size);
-      }
+      @include outlineButtonIconStyles;
     }
   }
 
@@ -394,7 +387,7 @@ body.excalidraw-cursor-resize * {
   .App-menu__left {
     overflow-y: auto;
     padding: 0.75rem;
-    width: 202px;
+    width: 200px;
     box-sizing: border-box;
     position: absolute;
   }
@@ -585,7 +578,7 @@ body.excalidraw-cursor-resize * {
   // use custom, minimalistic scrollbar
   // (doesn't work in Firefox)
   ::-webkit-scrollbar {
-    width: 3px;
+    width: 4px;
     height: 3px;
   }
 
@@ -664,6 +657,10 @@ body.excalidraw-cursor-resize * {
       --button-hover-bg: #363541;
       --button-bg: var(--color-surface-high);
     }
+
+    .buttonList {
+      padding: 0.25rem 0;
+    }
   }
 
   .excalidraw__paragraph {
@@ -757,7 +754,7 @@ body.excalidraw-cursor-resize * {
     padding: 1rem 1.6rem;
     border-radius: 12px;
     color: #fff;
-    font-weight: bold;
+    font-weight: 700;
     letter-spacing: 0.6px;
     font-family: "Assistant";
   }

packages/excalidraw/css/theme.scss

@@ -151,6 +151,9 @@
   --color-border-outline-variant: #c5c5d0;
   --color-surface-primary-container: #e0dfff;
 
+  --color-badge: #0b6513;
+  --background-color-badge: #d3ffd2;
+
   &.theme--dark {
     &.theme--dark-background-none {
       background: none;

packages/excalidraw/css/variables.module.scss

@@ -124,6 +124,16 @@
   }
 }
 
+@mixin outlineButtonIconStyles {
+  @include outlineButtonStyles;
+  padding: 0;
+
+  svg {
+    width: var(--default-icon-size);
+    height: var(--default-icon-size);
+  }
+}
+
 @mixin avatarStyles {
   width: var(--avatar-size, 1.5rem);
   height: var(--avatar-size, 1.5rem);
@@ -135,7 +145,7 @@
   align-items: center;
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 800;
+  font-weight: 700;
   line-height: 1;
   color: var(--color-gray-90);
   flex: 0 0 auto;