refactor: use vendor css from npm package (@fehmer) (#6206)

This PR removes the remaining "vendor" css files copied into
`static/css` and pick them from npm packages instead.

For the slimselect the css should match the version of the js. Since we
use the slimselect `js` file from the npm package we should use the
`css` file from the package as well.

For the balloon.css the file was copied into the project. Adding it as a
dependency makes sure we know the version of it and we don't modify it
in the project leading to problems when we try to update it later.

Similar to the vendor `js` files (js dependencies from packages) extract
the vendor `css` files into a separate `css` file as well.

frontend/package.json

@@ -73,6 +73,7 @@
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/util": "workspace:*",
     "@ts-rest/core": "3.51.0",
+    "balloon-css": "1.2.0",
     "canvas-confetti": "1.5.1",
     "chart.js": "3.7.1",
     "chartjs-adapter-date-fns": "3.0.0",

frontend/src/html/head.html

@@ -89,5 +89,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
+  <link rel="preload" href="styles/vendor.scss" as="style" />
+  <link rel="stylesheet" href="styles/vendor.scss" />
   <link rel="stylesheet" href="styles/index.scss" />
 </head>

frontend/src/styles/core.scss

@@ -28,6 +28,9 @@
     var(--caret-color) 20%,
     transparent
   );
+
+  --balloon-font-size: 1rem;
+  --balloon-border-radius: calc(var(--roundness) / 2);
 }
 
 ::placeholder {
@@ -418,3 +421,10 @@ key {
     color: var(--error-color);
   }
 }
+
+// mouseover texts
+[aria-label][data-balloon-pos]:after {
+  font-family: var(--font);
+  font-size: var(--balloon-font-size);
+  line-height: var(--balloon-font-size);
+}

frontend/src/styles/vendor.scss

@@ -0,0 +1,2 @@
+@import "slim-select/styles";
+@import "balloon-css/src/balloon";

frontend/src/ts/ready.ts

@@ -12,9 +12,6 @@ import { loadPromise } from "./config";
 
 $(async (): Promise<void> => {
   await loadPromise;
-  Misc.loadCSS("/css/slimselect.min.css", true);
-  Misc.loadCSS("/css/balloon.min.css", true);
-
   CookiesModal.check();
 
   //this line goes back to pretty much the beginning of the project and im pretty sure its here

pnpm-lock.yaml

@@ -279,6 +279,9 @@ importers:
       '@ts-rest/core':
         specifier: 3.51.0
         version: 3.51.0(@types/node@20.14.11)(zod@3.23.8)
+      balloon-css:
+        specifier: 1.2.0
+        version: 1.2.0
       canvas-confetti:
         specifier: 1.5.1
         version: 1.5.1
@@ -3552,6 +3555,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balloon-css@1.2.0:
+    resolution: {integrity: sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==}
+
   bare-events@2.4.2:
     resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==}
 
@@ -13119,6 +13125,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balloon-css@1.2.0: {}
+
   bare-events@2.4.2:
     optional: true