feat: rework style imports

src/App.vue

@@ -117,3 +117,7 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style lang="scss">
+@import '@/styles/global.scss';
+</style>

src/main.ts

@@ -23,8 +23,6 @@ import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/he
 // @ts-ignore
 import {VERSION} from './version.json'
 
-// Add CSS
-import './styles/vikunja.scss'
 // Notifications
 import Notifications from '@kyvg/vue3-notification'
 

src/styles/components/_all.scss

@@ -1,25 +0,0 @@
-@import 'base/all';
-
-@import 'attachments';
-@import 'gantt';
-@import 'labels';
-@import 'list';
-@import 'reminders';
-@import 'switch-view';
-@import 'task';
-@import 'taskRelations';
-@import 'tasks';
-@import 'teams';
-@import 'migrator';
-@import 'comments';
-@import 'table-view';
-@import 'kanban';
-@import 'list-backgrounds';
-@import 'color-picker';
-@import 'namespaces';
-@import 'legal';
-@import 'keyboard-shortcuts';
-@import 'api-config';
-@import 'datepicker';
-@import 'notifications';
-@import 'quick-actions';

src/styles/components/_index.scss

@@ -0,0 +1,26 @@
+@import "base";
+
+@import "attachments";
+@import "gantt";
+@import "tooltip";
+@import "labels";
+@import "list";
+@import "reminders";
+@import "switch-view";
+@import "task";
+@import "taskRelations";
+@import "tasks";
+@import "teams";
+@import "migrator";
+@import "comments";
+@import "table-view";
+@import "kanban";
+@import "list-backgrounds";
+@import "color-picker";
+@import "namespaces";
+@import "legal";
+@import "keyboard-shortcuts";
+@import "api-config";
+@import "datepicker";
+@import "notifications";
+@import "quick-actions";

src/styles/components/base/_index.scss

@@ -1,5 +1,4 @@
 @import 'card';
 @import 'fancycheckbox';
 @import 'multiselect';
-@import 'scrollbars';
+@import 'scrollbars';
-@import 'tooltip';

src/styles/global.scss

@@ -0,0 +1,18 @@
+@import "fonts";
+
+@import "transitions";
+@import "animations";
+
+// This imports are the same as in "bulma/bulma.sass"
+// with the expeption of the bulma utilities.
+// They are imported globally in variables.scss
+@import "bulma/sass/base/_all";
+@import "bulma/sass/elements/_all";
+@import "bulma/sass/form/_all";
+@import "bulma/sass/components/_all";
+@import "bulma/sass/grid/_all";
+@import "bulma/sass/helpers/_all";
+@import "bulma/sass/layout/_all";
+
+@import "theme";
+@import "components";

src/styles/theme/_all.scss

@@ -1,11 +0,0 @@
-@import 'theme';
-
-@import 'content';
-@import 'form';
-@import 'link-share';
-@import 'loading';
-@import 'navigation';
-@import 'notification';
-@import 'offline';
-@import 'update-notification';
-@import 'background';

src/styles/theme/_index.scss

@@ -0,0 +1,11 @@
+@import "theme";
+
+@import "content";
+@import "form";
+@import "link-share";
+@import "loading";
+@import "navigation";
+@import "notification";
+@import "offline";
+@import "update-notification";
+@import "background";

src/styles/theme/theme.scss

@@ -1,18 +1,3 @@
-// bulma utilities are imported in variables.scss
-@import "bulma/sass/utilities/_all";
-@import "bulma/sass/base/_all";
-@import "bulma/sass/elements/_all";
-@import "bulma/sass/form/_all";
-@import "bulma/sass/components/_all";
-@import "bulma/sass/grid/_all";
-@import "bulma/sass/helpers/_all";
-@import "bulma/sass/layout/_all";
-
-
-@import "fonts";
-
-@import "variables-derived";
-
 *,
 *:hover,
 *:active,

src/styles/theme/variables-derived.scss

@@ -1,2 +0,0 @@
-// Variables that are derived from bulma variables need to be included after them
-$mobile: math.div($tablet, 2);

src/styles/utilities/_all.scss

@@ -1,2 +0,0 @@
-@import 'animations';
-@import 'transitions';

src/styles/variables/_index.scss

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

src/styles/variables/variables.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 $white: #fff;
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;

src/styles/vikunja.scss

@@ -1,3 +0,0 @@
-@import 'theme/all';
-@import 'utilities/all';
-@import 'components/all';