chore(frontend): tailwind-variants, theme tokens, global styles in css

frontend/.storybook/preview.tsx

@@ -3,7 +3,6 @@ import type { Decorator, Preview } from "@storybook/react";
 
 import { theme } from "../src/app-theme";
 import DndProvider from "../src/js/app/DndProvider";
-import GlobalStyles from "../src/js/GlobalStyles";
 import i18next from "../src/js/localization/i18next";
 import translationsDe from "../src/localization/de.json";
 
@@ -13,7 +12,6 @@ i18next.changeLanguage("de");
 const withProviders: Decorator = (Story) => (
   <ThemeProvider theme={theme}>
     <DndProvider>
-      <GlobalStyles />
       <Story />
     </DndProvider>
   </ThemeProvider>

frontend/package.json

@@ -72,7 +72,7 @@
     "remark-flexible-markers": "^1.3.6",
     "remark-gfm": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "tailwind-styled-components": "^2.2.0",
+    "tailwind-variants": "^3.3.1",
     "tippy.js": "^6.3.7",
     "typesafe-actions": "^5.1.0"
   },

frontend/src/index.css

@@ -14,6 +14,109 @@
 
   --color-bg-50: #fafafa;
   --color-bg-100: #f4f6f5;
+
+  --color-red: #b22125;
+  --color-green: #36971c;
+  --color-orange: #e9711c;
+
+  --color-filetype-csv: #007bff;
+  --color-filetype-pdf: #d73a49;
+  --color-filetype-zip: #6f42c1;
+  --color-filetype-xlsx: #28a745;
+  --color-filetype-json: #1f5f30;
+
+  /* `text-tiny`; the other sizes map onto tailwind defaults:
+     xs 12px, sm 14px, base 16px, xl 20px, 2xl 24px */
+  --text-tiny: 11px;
+
+  /* bare `rounded` */
+  --radius: 3px;
+}
+
+@layer base {
+  body {
+    font-family: "Roboto", "Arial", sans-serif;
+    font-weight: 300;
+    background: var(--color-bg-50);
+    color: var(--color-gray-800);
+    min-height: 100vh;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  button,
+  select,
+  input,
+  textarea {
+    font-family: "Roboto", "Arial", sans-serif;
+  }
+
+  a,
+  a:visited,
+  a:active {
+    color: var(--color-gray-800);
+    text-decoration: none;
+  }
+
+  button {
+    outline: none;
+    cursor: pointer;
+  }
+  button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  input::-ms-clear {
+    display: none;
+  }
+
+  select {
+    outline: 0;
+    border-radius: var(--radius);
+    padding: 8px 30px 8px 8px;
+    border: 1px solid var(--color-gray-500);
+    appearance: none;
+    font-size: var(--text-sm);
+    cursor: pointer;
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:hover {
+      background-color: var(--color-gray-50);
+    }
+  }
+
+  h3 {
+    font-size: var(--text-sm);
+    margin: 0 0 10px 0;
+    color: var(--color-primary-500);
+    line-height: 25px;
+  }
+}
+
+/* @tippyjs/react sets inline styles, hence the specificity */
+div[data-tippy-root] {
+  max-width: 700px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
+  border-radius: var(--radius);
+
+  > div {
+    box-shadow: none;
+    /* biome-ignore lint/complexity/noImportantStyles: beats the inline style tippy sets */
+    max-width: inherit !important;
+    width: 100%;
+    padding: 0;
+  }
+
+  .tippy-content {
+    padding: 0px;
+    box-shadow: none;
+  }
 }
 
 /*