src/styles/common-imports.scss

@@ -13,9 +13,6 @@
 // the default values get overwritten by the definitions above
 @import "bulma-css-variables/sass/utilities/_all";
 
-// this is needed so that the shared form variables are globally defined aswell 
-@import "bulma-css-variables/sass/form/shared";
-
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
 

src/views/tasks/TaskDetailView.vue

@@ -848,6 +848,11 @@ $flash-background-duration: 750ms;
       }
 
       &:not(:disabled) {
+		// HACK: these styles are repeated from bulma-css-variables/sass/form/shared.sass
+		$input-background-color: var(--scheme-main, #{$scheme-main});
+		$input-border-color: var(--border, #{$border});
+		$input-focus-border-color: var(--link, #{$link});
+
         &:hover, &:active {
           background: $input-background-color;
           border-color: $input-border-color;

vite.config.js

@@ -29,7 +29,10 @@ if (isModernBuild) {
 export default defineConfig({
 	css: {
 		preprocessorOptions: {
-			scss: { additionalData: PREFIXED_SCSS_STYLES },
+			scss: {
+				additionalData: PREFIXED_SCSS_STYLES,
+				charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+			},
 		},
 	},
 	plugins: [