diff --git a/.gitignore b/.gitignore
index fae8ff1..86b557f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ dist-ssr
 *.log
 .vscode
 .idea
+*.tgz
diff --git a/README.md b/README.md
index b9a613d..adb2655 100644
--- a/README.md
+++ b/README.md
@@ -48,65 +48,89 @@ Please note, this package can be used without importing any other Oruga styling
 
 Bulma is a highly customizable CSS framework. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user (see [Bulma Customization](https://bulma.io/documentation/customize/concepts/)).
 
-Using the following sample code you **don't need** `import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file to customize Bulma and the theme variables. 
-To overwrite Bulma’s Sass variables with your own values, you have to use `@use` and the `with` keyword, which takes a Sass map.
-You have two options for including the theme: include all the styling at once (including full bulma), or include the Oruga theme and Bulma separately.
+To use the examples below start by creating a custom sass/scss file like `main.scss` (you can call it anything) and import it instead of `bulma.css` like this:
 
-```scss
-// Option A: Include all styling (including bulma)
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import Oruga from '@oruga-ui/oruga-next'
+import { bulmaConfig } from '@oruga-ui/theme-bulma'
+
+import './main.scss'
+
+createApp(App)
+    .use(Oruga, bulmaConfig)
+    .mount('#app')
+```
+
+Inside `main.scss` you need to include Bulma styles and theme styles. You have two options for doing it: **combined** or **separated**. The theme features a combined entrypoint which includes Bulma styles and theme styles. This is best for most customization use cases as it handles some messy variable scope issues. The separated entrypoint only includes theme styles without Bulma. This gives you full control over how you import Bulma and how much of it you import, but you'll have to deal with the messy scope problems mentioned earlier. Unless it's critical you only include part of Bulma the separate method is best avoided.
 
+#### The Combined Method
+
+The combined method is fairly straitforward. Define custom variables and then pass them in using `with()` syntax. You can override any variable in Bulma or the theme which has a `!default` by passing it in this way. 
+
+If you need to add custom color variants with this method you must use the `$theme-bulma-custom-colors` variable.
+
+```scss
 // set your color overrides
 $primary: #8c67ef;
+$red: #f00;
 $link: $primary;
 
 // add new colors to the colors map
-$twitter: #4099FF;
-$custom-colors: ('twitter': $twitter);
+$theme-bulma-custom-colors: ('tertiary': $red);
 
-// Include the Oruga Bulma theme with Bulma included (you can only manipulate any derived variables here)
+// Include the Oruga Bulma theme with Bulma included
 @use '@oruga-ui/theme-bulma/dist/scss/bulma-build' with (
     $family-primary: '"Nunito", sans-serif',
     $primary: $primary,
     $link: $link,
-    $custom-colors: $custom-colors,
+    $theme-bulma-custom-colors: $custom-colors,
 );
 
 // Then add additional custom code here
 // ...
 ```
-**_NOTE:_** Note that only variables within Bulma's [derived-variables.scss](https://github.com/jgthms/bulma/blob/main/sass/utilities/derived-variables.scss) file can be overridden here.
 
-```scss
-// Option B: Include the Oruga theme and Bulma separately
+#### The Separated Method
+When using this method the main thing to be aware of is `$custom-colors`. In the combined method the theme will add Oruga's standard `secondary` color variant for you and you can add additional variants using `$theme-bulma-custom-colors`. Using the separate method you need to do this in your code instead using Bulma's `$custom-colors` var, which will be implicitly passed to the theme behind the scenes. 
 
-// set your color overrides
-$primary: #8c67ef;
-$link: $primary;
-
-// add new colors to the colors map
-$twitter: #4099FF;
-$custom-colors: ('twitter': $twitter);
+```scss
+// Assemble color variables
+$red: #f00;
+$green: #0f0;
+$blue: #00f;
+$black: #000;
+$dark-grey: #6c757d;
+$speed-slower: 1000ms;
+
+// Custom colors is required if you want the secondary variant. Nothing will break if you omit it though.
+$custom-colors: (
+    // Add the standard Oruga secondary variant
+    'secondary': $dark-grey,
+    // If you want to add additional custom colors add them here
+    'tertiary': $red
+);
 
-// 1. Include the Oruga theme first (you can only manipulate any derived variables here)
-@use '@oruga-ui/theme-bulma/dist/scss/bulma' with (
-    $family-primary: '"Nunito", sans-serif',
-    $primary: $primary,
-    $link: $link,
+// Pass any Bulma vars you'd like to override here
+@use "bulma/sass" with (
+    $red: $red,
+    $blue: $blue,
+    $green: $green,
+    $black: $black,
+    $primary: $green,
     $custom-colors: $custom-colors,
 );
 
-// 2. Include any other Bulma module with specific configuration here
-@use "bulma/sass/elements" with (
-    $button-weight: 800
+// Pass any theme vars you'd like to override here
+@use "@oruga-ui/theme-bulma/dist/scss/component-only-build.scss" with (
+    $speed-slower: $speed-slower,
 );
-
-// 3. Include the remaining parts or full Bulma
-@use "bulma/sass";
-
-// Then add additional custom code here
-// ...
 ```
 
+The other thing to be aware of is when you're importing Bulma. `@use "bulma/sass" with (...)` **MUST** come before all other Bulma usage. This is where the messy scope issues come in. If you reference Bulma beforehand, for example to use a Bulma mixin to create a color to pass into Bulma, you're going to get SASS errors.
+
 ### Override default config
 
 In case you want to replace the default style of a component you can override or add new classes changing ``bulmaConfig``; more details about components customization on https://oruga-ui.com/documentation/customisation.html
diff --git a/package.json b/package.json
index a2aea21..3307c32 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "build": "vue-tsc --noEmit && vite build",
     "lint": "eslint . --fix --quiet",
     "lint:style": "stylelint **/*.{css,scss} --fix --ignore-path .gitignore",
-    "update": "ncu -u"
+    "update": "ncu -u",
+    "pack:lib": "rm -rf dist && npm run build && echo \"$PWD/$(npm pack)\""
   },
   "peerDependencies": {
     "@oruga-ui/oruga-next": "^0.9.0"
diff --git a/src/assets/scss/_derived-defaults.scss b/src/assets/scss/_derived-defaults.scss
new file mode 100644
index 0000000..2f1dfd3
--- /dev/null
+++ b/src/assets/scss/_derived-defaults.scss
@@ -0,0 +1,11 @@
+// This file is home to defaulted variables which DO reference bulma but are not part of a particular component
+
+@use "bulma/sass/utilities/derived-variables" as dv;
+
+$sizes-map: (
+    "small": dv.$size-small,
+    "normal": dv.$size-normal,
+    "medium": dv.$size-medium,
+    "large": dv.$size-large,
+) !default;
+
diff --git a/src/assets/scss/_initial-defaults.scss b/src/assets/scss/_initial-defaults.scss
new file mode 100644
index 0000000..63c76b2
--- /dev/null
+++ b/src/assets/scss/_initial-defaults.scss
@@ -0,0 +1,23 @@
+// This file is home to defaulted variables which need to be passed to Bulma, or to general defaulted variables which are not part of a particular component
+
+@use "sass:map";
+
+$speed-slow: 150ms !default;
+$speed-slower: 250ms !default;
+
+// oruga defines an extra secondary color
+$secondary: #6c757d !default;
+
+// alternative to focus-shadow-size
+$active-shadow-size: 0 0 0.5em !default;
+
+// renamed with theme-bulma prefix to avoid namespace collision with the @forward below
+$theme-bulma-custom-colors: () !default;
+
+// Merge any user-defined custom colors with the custom colors defined by the theme. This will be passes to Bulma as $custom-colors
+// This is the one variable in this file which is not defaulted, but it collects defaulted values so it counts. It's going to be passed into bulma so it has to be here so it comes first
+$theme-bulma-custom-colors-merged: map.merge(
+    // merge our custom-colors with the overridable map
+    ("secondary": $secondary),
+    $theme-bulma-custom-colors
+);
diff --git a/src/assets/scss/bulma-build.scss b/src/assets/scss/bulma-build.scss
index 9844c7a..334ce5f 100644
--- a/src/assets/scss/bulma-build.scss
+++ b/src/assets/scss/bulma-build.scss
@@ -1,3 +1,17 @@
-@forward "components/utils/all";
-@forward "bulma/sass";
+// This file is the entrypoint for the main css build (bulma.css)
+// It is also the scss entrypoint for users who want to configure Bulma and the theme together
+
+// Theme defaults must be explictly forwarded here, otherwise confusing error messages result from the lack of defaults.
+@forward "initial-defaults";
+@use "initial-defaults" as td;
+
+// the primary bulma forward must come before all usage to prevent issues where usage appears before the with() statement
+@forward "bulma/sass" with (
+    $custom-colors: td.$theme-bulma-custom-colors-merged,
+);
+
+@forward "derived-defaults";
+@forward "component-defaults";
+
+// Theme component scss
 @forward "bulma";
diff --git a/src/assets/scss/component-defaults/_carousel.scss b/src/assets/scss/component-defaults/_carousel.scss
new file mode 100644
index 0000000..c773d50
--- /dev/null
+++ b/src/assets/scss/component-defaults/_carousel.scss
@@ -0,0 +1,14 @@
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$carousel-arrow-icon-spaced: 1.5rem !default;
+$carousel-arrow-top: 50% !default;
+$carousel-indicator-spaced: 0.5rem !default;
+$carousel-overlay-z: 40 !default;
+$carousel-arrow-background: css.getVar("scheme-main") !default;
+$carousel-arrow-color: css.getVar("primary") !default;
+$carousel-indicator-background: rgba(css.getVar("scheme-invert"), 0.5) !default;
+$carousel-indicator-border: css.getVar("scheme-main") !default;
+$carousel-indicator-color: css.getVar("primary") !default;
+$carousel-overlay-background: rgba(css.getVar("scheme-invert"), 0.86) !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_checkbox.scss b/src/assets/scss/component-defaults/_checkbox.scss
new file mode 100644
index 0000000..08576bc
--- /dev/null
+++ b/src/assets/scss/component-defaults/_checkbox.scss
@@ -0,0 +1,18 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$checkbox-size: 1.25em !default;
+$checkbox-background-color: transparent !default;
+$checkbox-border-width: 2px !default;
+$checkbox-colors: dv.$colors !default;
+$checkbox-border-color: css.getVar("grey") !default;
+$checkbox-border-radius: css.getVar("radius") !default;
+$checkbox-checkmark-color: css.getVar("primary-invert") !default;
+$checkbox-focus-color: hsl(from css.getVar("grey") h s l / 80%) !default;
+$checkbox-active-focus-color: hsl(
+        from css.getVar("checkbox-active-background-color") h s l / 80%
+) !default;
+$checkbox-active-background-color: css.getVar("primary") !default;
+$checkbox-shadow: css.getVar("shadow");
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_datepicker.scss b/src/assets/scss/component-defaults/_datepicker.scss
new file mode 100644
index 0000000..82414e3
--- /dev/null
+++ b/src/assets/scss/component-defaults/_datepicker.scss
@@ -0,0 +1,15 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$datepicker-colors: dv.$colors !default;
+$datepicker-header-color: css.getVar("grey") !default;
+$datepicker-today-border: solid 1px rgba(css.getVar("primary"), 0.5) !default;
+$datepicker-item-color: css.getVar("grey-dark") !default;
+$datepicker-item-disabled-color: css.getVar("grey-light") !default;
+$datepicker-item-hover-color: css.getVar("scheme-invert") !default;
+$datepicker-item-hover-background-color: css.getVar("background") !default;
+$datepicker-item-selected-color: css.getVar("primary-invert") !default;
+$datepicker-item-selected-background-color: css.getVar("primary") !default;
+$datepicker-event-background-color: css.getVar("grey-light") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_dropdown.scss b/src/assets/scss/component-defaults/_dropdown.scss
new file mode 100644
index 0000000..f1d5c5f
--- /dev/null
+++ b/src/assets/scss/component-defaults/_dropdown.scss
@@ -0,0 +1,16 @@
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$dropdown-content-max-height: 200px !default;
+$dropdown-disabled-opacity: 0.5 !default;
+$dropdown-gap: 0px !default;
+$dropdown-z: 40 !default;
+$dropdown-mobile-breakpoint: iv.$desktop !default;
+$dropdown-background-background-color: hsla(
+        #{css.getVar("scheme-h")},
+        #{css.getVar("scheme-s")},
+        #{css.getVar("scheme-invert-l")},
+        0.86
+) !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_field.scss b/src/assets/scss/component-defaults/_field.scss
new file mode 100644
index 0000000..fdb3140
--- /dev/null
+++ b/src/assets/scss/component-defaults/_field.scss
@@ -0,0 +1,3 @@
+/* @docs */
+$floating-in-height: 3.25em !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_icon.scss b/src/assets/scss/component-defaults/_icon.scss
new file mode 100644
index 0000000..1feafdc
--- /dev/null
+++ b/src/assets/scss/component-defaults/_icon.scss
@@ -0,0 +1,3 @@
+/* @docs */
+$icon-spin-duration: 2s !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_index.scss b/src/assets/scss/component-defaults/_index.scss
new file mode 100644
index 0000000..2b0644b
--- /dev/null
+++ b/src/assets/scss/component-defaults/_index.scss
@@ -0,0 +1,19 @@
+@forward "carousel";
+@forward "checkbox";
+@forward "datepicker";
+@forward "dropdown";
+@forward "field";
+@forward "icon";
+@forward "loading";
+@forward "notification";
+@forward "radio";
+@forward "sidebar";
+@forward "skeleton";
+@forward "slider";
+@forward "steps";
+@forward "switch";
+@forward "table";
+@forward "tabs";
+@forward "taginput";
+@forward "tooltip";
+@forward "upload";
diff --git a/src/assets/scss/component-defaults/_loading.scss b/src/assets/scss/component-defaults/_loading.scss
new file mode 100644
index 0000000..fb25365
--- /dev/null
+++ b/src/assets/scss/component-defaults/_loading.scss
@@ -0,0 +1,6 @@
+/* @docs */
+$loading-background-color: rgba(255, 255, 255, 0.5) !default;
+$loading-icon-size: 3em !default;
+$loading-icon-size-full-page: 5em !default;
+$loading-z: 29 !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_notification.scss b/src/assets/scss/component-defaults/_notification.scss
new file mode 100644
index 0000000..3dc6f0f
--- /dev/null
+++ b/src/assets/scss/component-defaults/_notification.scss
@@ -0,0 +1,5 @@
+/* @docs */
+$notification-margin-bottom: 1.5rem !default;
+$notification-notices-padding: 2em !default;
+$notification-notices-z: 1000 !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_radio.scss b/src/assets/scss/component-defaults/_radio.scss
new file mode 100644
index 0000000..a152663
--- /dev/null
+++ b/src/assets/scss/component-defaults/_radio.scss
@@ -0,0 +1,10 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$radio-size: 1.25em !default;
+$radio-colors: dv.$colors !default;
+$radio-active-background-color: css.getVar("primary") !default;
+$radio-border-color: css.getVar("grey") !default;
+$radio-shadow: css.getVar("shadow");
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_sidebar.scss b/src/assets/scss/component-defaults/_sidebar.scss
new file mode 100644
index 0000000..ece8142
--- /dev/null
+++ b/src/assets/scss/component-defaults/_sidebar.scss
@@ -0,0 +1,17 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$sidebar-z: 40;
+$sidebar-width: 260px !default;
+$sidebar-height: 260px !default;
+$sidebar-mobile-width: 80px !default;
+$sidebar-colors: dv.$colors !default;
+$sidebar-background-background-color: hsla(
+        #{css.getVar("scheme-h")},
+        #{css.getVar("scheme-s")},
+        #{css.getVar("scheme-invert-l")},
+        0.86
+) !default;
+$sidebar-shadow: css.getVar("shadow");
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_skeleton.scss b/src/assets/scss/component-defaults/_skeleton.scss
new file mode 100644
index 0000000..637bab0
--- /dev/null
+++ b/src/assets/scss/component-defaults/_skeleton.scss
@@ -0,0 +1,7 @@
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$skeleton-duration: 1.5s !default;
+$skeleton-margin-top: 0.5rem !default;
+$skeleton-border-radius: css.getVar("radius") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_slider.scss b/src/assets/scss/component-defaults/_slider.scss
new file mode 100644
index 0000000..ba0b03c
--- /dev/null
+++ b/src/assets/scss/component-defaults/_slider.scss
@@ -0,0 +1,21 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$slider-tick-label-size: 0.75rem !default;
+$slider-thumb-shadow: none !default;
+$slider-thumb-to-track-ratio: 2 !default;
+$slider-tick-to-track-ratio: 0.5 !default;
+$slider-tick-width: 3px !default;
+$slider-colors: dv.$colors !default;
+$slider-radius: css.getVar("radius") !default;
+$slider-background: css.getVar("grey-lighter") !default;
+$slider-color: css.getVar("primary") !default;
+$slider-track-border: 0px solid css.getVar("grey") !default;
+$slider-track-shadow: 0px 0px 0px css.getVar("grey") !default;
+$slider-thumb-background: css.getVar("scheme-main") !default;
+$slider-thumb-radius: css.getVar("radius") !default;
+$slider-thumb-border: 1px solid css.getVar("grey-light") !default;
+$slider-tick-radius: css.getVar("radius") !default;
+$slider-tick-background: css.getVar("grey-light") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_steps.scss b/src/assets/scss/component-defaults/_steps.scss
new file mode 100644
index 0000000..8e20a4d
--- /dev/null
+++ b/src/assets/scss/component-defaults/_steps.scss
@@ -0,0 +1,19 @@
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$steps-divider-height: 0.2em !default;
+$steps-vertical-padding: 1em 0 !default;
+$steps-colors: dv.$colors !default;
+$steps-mobile-breakpoint: iv.$tablet !default;
+$steps-marker-background: css.getVar("grey-light") !default;
+$steps-marker-color: css.getVar("scheme-main") !default;
+$steps-marker-border: 0.2em solid css.getVar("white") !default;
+$steps-default-color: css.getVar("grey-lighter") !default;
+$steps-previous-color: css.getVar("scheme-main") !default;
+$steps-previous-background: css.getVar("primary") !default;
+$steps-active-color: css.getVar("primary") !default;
+$steps-active-background: css.getVar("scheme-main") !default;
+$steps-details-background-color: css.getVar("body-background-color") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_switch.scss b/src/assets/scss/component-defaults/_switch.scss
new file mode 100644
index 0000000..d26e52b
--- /dev/null
+++ b/src/assets/scss/component-defaults/_switch.scss
@@ -0,0 +1,11 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$switch-width: 2.75em !default;
+$switch-padding: 0.2em !default;
+$switch-colors: dv.$colors !default;
+$switch-background-color: css.getVar("grey-light") !default;
+$switch-active-background-color: css.getVar("primary") !default;
+$switch-shadow: css.getVar("shadow");
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_table.scss b/src/assets/scss/component-defaults/_table.scss
new file mode 100644
index 0000000..16990ba
--- /dev/null
+++ b/src/assets/scss/component-defaults/_table.scss
@@ -0,0 +1,3 @@
+/* @docs */
+$table-sticky-header-height: 300px !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_tabs.scss b/src/assets/scss/component-defaults/_tabs.scss
new file mode 100644
index 0000000..a1f50c6
--- /dev/null
+++ b/src/assets/scss/component-defaults/_tabs.scss
@@ -0,0 +1,15 @@
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$tabs-focused-outline: none !default;
+$tabs-link-focus-border-bottom-color: css.getVar("tabs-link-hover-border-bottom-color") !default;
+$tabs-link-focus-active-border-bottom-color: css.getVar("tabs-link-active-border-bottom-color") !default;
+$tabs-boxed-link-focus-active-background-color: css.getVar("tabs-boxed-link-active-background-color") !default;
+$tabs-boxed-link-focus-background-color: css.getVar("tabs-boxed-link-hover-background-color") !default;
+$tabs-boxed-link-focus-active-border-bottom-color: css.getVar("tabs-boxed-link-active-border-bottom-color") !default;
+$tabs-boxed-link-focus-border-bottom-color: css.getVar("tabs-boxed-link-hover-border-bottom-color") !default;
+$tabs-toggle-link-focus-active-background-color: css.getVar("tabs-toggle-link-active-background-color") !default;
+$tabs-toggle-link-focus-background-color: css.getVar("tabs-toggle-link-hover-background-color") !default;
+$tabs-toggle-link-focus-active-border-color: css.getVar("tabs-toggle-link-active-border-color") !default;
+$tabs-toggle-link-focus-border-color: css.getVar("tabs-toggle-link-hover-border-color") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_taginput.scss b/src/assets/scss/component-defaults/_taginput.scss
new file mode 100644
index 0000000..17a03fe
--- /dev/null
+++ b/src/assets/scss/component-defaults/_taginput.scss
@@ -0,0 +1,4 @@
+/* @docs */
+$taginput-height: 2em !default;
+$taginput-tag-size: 0.9em !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_tooltip.scss b/src/assets/scss/component-defaults/_tooltip.scss
new file mode 100644
index 0000000..6043128
--- /dev/null
+++ b/src/assets/scss/component-defaults/_tooltip.scss
@@ -0,0 +1,14 @@
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/css-variables" as css;
+
+/* @docs */
+$tooltip-arrow-size: 5px !default;
+$tooltip-arrow-margin: 2px !default;
+$tooltip-content-multiline-width: 300px !default;
+$tooltip-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
+$tooltip-z: 38 !default;
+$tooltip-colors: dv.$colors !default;
+$tooltip-border-radius: css.getVar("radius") !default;
+$tooltip-bg: css.getVar("scheme-main-bis") !default;
+$tooltip-color: css.getVar("text-body") !default;
+/* @docs */
diff --git a/src/assets/scss/component-defaults/_upload.scss b/src/assets/scss/component-defaults/_upload.scss
new file mode 100644
index 0000000..0178b8a
--- /dev/null
+++ b/src/assets/scss/component-defaults/_upload.scss
@@ -0,0 +1,9 @@
+@use "bulma/sass/utilities/css-variables" as css;
+@use "bulma/sass/form/file" as file;
+
+/* @docs */
+$upload-bg: transparent !default;
+$upload-draggable-padding: 0.5rem !default;
+$upload-colors: file.$file-colors !default;
+$upload-border-color: css.getVar("grey-light") !default;
+/* @docs */
diff --git a/src/assets/scss/component-only-build.scss b/src/assets/scss/component-only-build.scss
new file mode 100644
index 0000000..65fb4f3
--- /dev/null
+++ b/src/assets/scss/component-only-build.scss
@@ -0,0 +1,5 @@
+// This file is the scss entrypoint for users who want to include only theme styles
+
+@forward "derived-defaults";
+@forward "component-defaults";
+@forward "bulma";
diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss
index d81d24e..67789cf 100644
--- a/src/assets/scss/components/_autocomplete.scss
+++ b/src/assets/scss/components/_autocomplete.scss
@@ -1,14 +1,11 @@
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
-
-/* @docs */
-$dropdown-content-max-height: 200px !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .autocomplete {
     @include css.register-vars(
         (
-            "dropdown-content-max-height": #{$dropdown-content-max-height},
+            "dropdown-content-max-height": #{vars.$dropdown-content-max-height},
         )
     );
 
diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
index 5399718..dd27dee 100644
--- a/src/assets/scss/components/_carousel.scss
+++ b/src/assets/scss/components/_carousel.scss
@@ -2,34 +2,19 @@
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-/* @docs */
-$carousel-arrow-background: css.getVar("scheme-main") !default;
-$carousel-arrow-color: css.getVar("primary") !default;
-$carousel-arrow-icon-spaced: 1.5rem !default;
-$carousel-arrow-top: 50% !default;
-
-$carousel-indicator-background: rgba(css.getVar("scheme-invert"), 0.5) !default;
-$carousel-indicator-border: css.getVar("scheme-main") !default;
-$carousel-indicator-color: css.getVar("primary") !default;
-$carousel-indicator-spaced: 0.5rem !default;
-
-$carousel-overlay-background: rgba(css.getVar("scheme-invert"), 0.86) !default;
-$carousel-overlay-z: 40 !default;
-/* @docs */
-
 .carousel {
     @include css.register-vars(
         (
-            "carousel-arrow-background": #{$carousel-arrow-background},
-            "carousel-arrow-color": #{$carousel-arrow-color},
-            "carousel-arrow-icon-spaced": #{$carousel-arrow-icon-spaced},
-            "carousel-arrow-top": #{$carousel-arrow-top},
-            "carousel-indicator-background": #{$carousel-indicator-background},
-            "carousel-indicator-border": #{$carousel-indicator-border},
-            "carousel-indicator-color": #{$carousel-indicator-color},
-            "carousel-indicator-spaced": #{$carousel-indicator-spaced},
-            "carousel-overlay-background": #{$carousel-overlay-background},
-            "carousel-overlay-z": #{$carousel-overlay-z},
+            "carousel-arrow-background": #{var.$carousel-arrow-background},
+            "carousel-arrow-color": #{var.$carousel-arrow-color},
+            "carousel-arrow-icon-spaced": #{var.$carousel-arrow-icon-spaced},
+            "carousel-arrow-top": #{var.$carousel-arrow-top},
+            "carousel-indicator-background": #{var.$carousel-indicator-background},
+            "carousel-indicator-border": #{var.$carousel-indicator-border},
+            "carousel-indicator-color": #{var.$carousel-indicator-color},
+            "carousel-indicator-spaced": #{var.$carousel-indicator-spaced},
+            "carousel-overlay-background": #{var.$carousel-overlay-background},
+            "carousel-overlay-z": #{var.$carousel-overlay-z},
         )
     );
 
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index dbc6c2e..e267c56 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -5,39 +5,23 @@
 @use "bulma/sass/utilities/controls" as controls;
 @use "bulma/sass/utilities/css-variables" as css;
 
-/* @docs */
-$checkbox-size: 1.25em !default;
-$checkbox-colors: var.$colors !default;
-$checkbox-background-color: transparent !default;
-$checkbox-border-color: css.getVar("grey") !default;
-$checkbox-border-radius: css.getVar("radius") !default;
-$checkbox-border-width: 2px !default;
-$checkbox-checkmark-color: css.getVar("primary-invert") !default;
-$checkbox-focus-color: hsl(from css.getVar("grey") h s l / 80%) !default;
-$checkbox-active-focus-color: hsl(
-    from css.getVar("checkbox-active-background-color") h s l / 80%
-) !default;
-$checkbox-active-background-color: css.getVar("primary") !default;
-$checkbox-shadow: css.getVar("shadow");
-/* @docs */
-
 .checkbox {
     @include css.register-vars(
         (
-            "checkbox-background-color": #{$checkbox-background-color},
-            "checkbox-border-color": #{$checkbox-border-color},
-            "checkbox-border-radius": #{$checkbox-border-radius},
-            "checkbox-border-width": #{$checkbox-border-width},
-            "checkbox-size": #{$checkbox-size},
-            "checkbox-checkmark-color": #{$checkbox-checkmark-color},
-            "checkbox-focus-color": $checkbox-focus-color,
-            "checkbox-active-focus-color": $checkbox-active-focus-color,
-            "checkbox-active-background-color": #{$checkbox-active-background-color},
+            "checkbox-background-color": #{var.$checkbox-background-color},
+            "checkbox-border-color": #{var.$checkbox-border-color},
+            "checkbox-border-radius": #{var.$checkbox-border-radius},
+            "checkbox-border-width": #{var.$checkbox-border-width},
+            "checkbox-size": #{var.$checkbox-size},
+            "checkbox-checkmark-color": #{var.$checkbox-checkmark-color},
+            "checkbox-focus-color": var.$checkbox-focus-color,
+            "checkbox-active-focus-color": var.$checkbox-active-focus-color,
+            "checkbox-active-background-color": #{var.$checkbox-active-background-color},
             "checkbox-checked-background":
-                url(fn.checkmark($checkbox-checkmark-color)),
+                url(fn.checkmark(var.$checkbox-checkmark-color)),
             "checkbox-indeterminate-background":
-                url(fn.indeterminate($checkbox-checkmark-color)),
-            "checkbox-shadow": #{$checkbox-shadow},
+                url(fn.indeterminate(var.$checkbox-checkmark-color)),
+            "checkbox-shadow": #{var.$checkbox-shadow},
         )
     );
 
@@ -53,8 +37,8 @@ $checkbox-shadow: css.getVar("shadow");
         outline: none;
         appearance: none;
         font-size: inherit;
-        width: $checkbox-size;
-        height: $checkbox-size;
+        width: var.$checkbox-size;
+        height: var.$checkbox-size;
         flex-shrink: 0;
         border-radius: css.getVar("checkbox-border-radius");
         border: css.getVar("checkbox-border-width") solid
@@ -124,7 +108,7 @@ $checkbox-shadow: css.getVar("shadow");
     }
 
     // variant colors
-    @each $name, $pair in $checkbox-colors {
+    @each $name, $pair in var.$checkbox-colors {
         $color: list.nth($pair, 1);
         $color-invert: if(list.length($pair) >= 2, list.nth($pair, 2), null);
 
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
index 2ee132a..496e9c1 100644
--- a/src/assets/scss/components/_datepicker.scss
+++ b/src/assets/scss/components/_datepicker.scss
@@ -5,31 +5,18 @@
 @use "bulma/sass/utilities/controls" as controls;
 @use "bulma/sass/utilities/css-variables" as css;
 
-/* @docs */
-$datepicker-colors: var.$colors !default;
-$datepicker-header-color: css.getVar("grey") !default;
-$datepicker-today-border: solid 1px rgba(css.getVar("primary"), 0.5) !default;
-$datepicker-item-color: css.getVar("grey-dark") !default;
-$datepicker-item-disabled-color: css.getVar("grey-light") !default;
-$datepicker-item-hover-color: css.getVar("scheme-invert") !default;
-$datepicker-item-hover-background-color: css.getVar("background") !default;
-$datepicker-item-selected-color: css.getVar("primary-invert") !default;
-$datepicker-item-selected-background-color: css.getVar("primary") !default;
-$datepicker-event-background-color: css.getVar("grey-light") !default;
-/* @docs */
-
 .datepicker {
     @include css.register-vars(
         (
-            "datepicker-header-color": #{$datepicker-header-color},
-            "datepicker-today-border": #{$datepicker-today-border},
-            "datepicker-item-color": #{$datepicker-item-color},
-            "datepicker-item-disabled-color": #{$datepicker-item-disabled-color},
-            "datepicker-item-hover-color": #{$datepicker-item-hover-color},
-            "datepicker-item-hover-background-color": #{$datepicker-item-hover-background-color},
-            "datepicker-item-selected-color": #{$datepicker-item-selected-color},
-            "datepicker-item-selected-background-color": #{$datepicker-item-selected-background-color},
-            "datepicker-event-background-color": #{$datepicker-event-background-color},
+            "datepicker-header-color": #{var.$datepicker-header-color},
+            "datepicker-today-border": #{var.$datepicker-today-border},
+            "datepicker-item-color": #{var.$datepicker-item-color},
+            "datepicker-item-disabled-color": #{var.$datepicker-item-disabled-color},
+            "datepicker-item-hover-color": #{var.$datepicker-item-hover-color},
+            "datepicker-item-hover-background-color": #{var.$datepicker-item-hover-background-color},
+            "datepicker-item-selected-color": #{var.$datepicker-item-selected-color},
+            "datepicker-item-selected-background-color": #{var.$datepicker-item-selected-background-color},
+            "datepicker-event-background-color": #{var.$datepicker-event-background-color},
         )
     );
 
@@ -250,7 +237,7 @@ $datepicker-event-background-color: css.getVar("grey-light") !default;
         .event {
             background-color: css.getVar("datepicker-event-background-color");
 
-            @each $name, $pair in $datepicker-colors {
+            @each $name, $pair in var.$datepicker-colors {
                 $color: list.nth($pair, 1);
 
                 &.is-#{$name} {
diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
index 80e1ff5..9c1b5e1 100644
--- a/src/assets/scss/components/_dropdown.scss
+++ b/src/assets/scss/components/_dropdown.scss
@@ -1,28 +1,15 @@
-@use "bulma/sass/utilities/initial-variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
-
-/* @docs */
-$dropdown-mobile-breakpoint: vars.$desktop !default;
-$dropdown-background-background-color: hsla(
-    #{css.getVar("scheme-h")},
-    #{css.getVar("scheme-s")},
-    #{css.getVar("scheme-invert-l")},
-    0.86
-) !default;
-$dropdown-disabled-opacity: 0.5 !default;
-$dropdown-gap: 0px !default;
-$dropdown-z: 40 !default;
-/* @docs */
+@use "utils/variables" as var;
 
 .dropdown {
     @include css.register-vars(
         (
-            "dropdown-background-background-color": #{$dropdown-background-background-color},
-            "dropdown-disabled-opacity": #{$dropdown-disabled-opacity},
-            "dropdown-gap": #{$dropdown-gap},
-            "dropdown-z": #{$dropdown-z},
-            "dropdown-content-z": #{$dropdown-z},
+            "dropdown-background-background-color": #{var.$dropdown-background-background-color},
+            "dropdown-disabled-opacity": #{var.$dropdown-disabled-opacity},
+            "dropdown-gap": #{var.$dropdown-gap},
+            "dropdown-z": #{var.$dropdown-z},
+            "dropdown-content-z": #{var.$dropdown-z},
         )
     );
 
@@ -38,7 +25,7 @@ $dropdown-z: 40 !default;
         z-index: css.getVar("dropdown-z");
         cursor: pointer;
 
-        @include mixins.from($dropdown-mobile-breakpoint) {
+        @include mixins.from(var.$dropdown-mobile-breakpoint) {
             display: none;
         }
     }
@@ -173,7 +160,7 @@ $dropdown-z: 40 !default;
         }
     }
 
-    @include mixins.until($dropdown-mobile-breakpoint) {
+    @include mixins.until(var.$dropdown-mobile-breakpoint) {
         &.is-mobile-modal {
             > .dropdown-menu {
                 position: fixed;
diff --git a/src/assets/scss/components/_field.scss b/src/assets/scss/components/_field.scss
index 0671d67..1ec5db2 100644
--- a/src/assets/scss/components/_field.scss
+++ b/src/assets/scss/components/_field.scss
@@ -1,10 +1,7 @@
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/form/shared" as form;
 @use "bulma/sass/utilities/mixins" as mixins;
-
-/* @docs */
-$floating-in-height: 3.25em !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .field {
     &.is-grouped {
@@ -240,12 +237,12 @@ $floating-in-height: 3.25em !default;
                 &.timepicker {
                     .input {
                         padding-top: calc(
-                            #{$floating-in-height} / 2 - (
+                            #{vars.$floating-in-height} / 2 - (
                                     css.getVar("size-large") * 3 / 4
                                 ) / 2
                         );
                         padding-bottom: 1px;
-                        height: $floating-in-height;
+                        height: vars.$floating-in-height;
                     }
                 }
 
@@ -254,21 +251,21 @@ $floating-in-height: 3.25em !default;
                     .textarea,
                     select {
                         padding-top: calc(
-                            #{$floating-in-height} / 2 - (
+                            #{vars.$floating-in-height} / 2 - (
                                     css.getVar("size-large") * 3 / 4
                                 ) / 2
                         );
                         padding-bottom: 1px;
-                        height: $floating-in-height;
+                        height: vars.$floating-in-height;
                     }
 
                     .select:not([multiple]) {
-                        height: $floating-in-height;
+                        height: vars.$floating-in-height;
 
                         &.is-loading {
                             &::after {
                                 margin-top: calc(
-                                    #{$floating-in-height} / 2 - (
+                                    #{vars.$floating-in-height} / 2 - (
                                             css.getVar("size-large") * 3 / 4
                                         ) / 2
                                 );
@@ -285,7 +282,7 @@ $floating-in-height: 3.25em !default;
                     .taginput-container {
                         // 0.275em - 1px _taginput.scss
                         padding-top: calc(
-                            #{$floating-in-height} / 2 - (
+                            #{vars.$floating-in-height} / 2 - (
                                     css.getVar("size-large") * 3 / 4
                                 ) / 2 + (0.275em - 1px)
                         );
@@ -295,12 +292,12 @@ $floating-in-height: 3.25em !default;
                 &:not(.taginput) {
                     .is-left.icon,
                     .is-right.icon {
-                        height: $floating-in-height;
+                        height: vars.$floating-in-height;
                     }
 
                     .is-left.icon {
                         padding-top: calc(
-                            #{$floating-in-height} / 2 - (
+                            #{vars.$floating-in-height} / 2 - (
                                     css.getVar("size-large") * 3 / 4
                                 ) / 2
                         );
@@ -309,7 +306,7 @@ $floating-in-height: 3.25em !default;
 
                 &.is-loading::after {
                     margin-top: calc(
-                        #{$floating-in-height} / 2 - (
+                        #{vars.$floating-in-height} / 2 - (
                                 css.getVar("size-large") * 3 / 4
                             ) / 2
                     );
@@ -325,7 +322,7 @@ $floating-in-height: 3.25em !default;
                         .textarea,
                         select {
                             padding-top: calc(
-                                #{$floating-in-height} / 2 - (
+                                #{vars.$floating-in-height} / 2 - (
                                         css.getVar("size-large") * 3 / 4
                                     ) / 2
                             );
@@ -336,7 +333,7 @@ $floating-in-height: 3.25em !default;
                         .textarea,
                         select,
                         .button {
-                            height: $floating-in-height;
+                            height: vars.$floating-in-height;
                         }
                     }
                 }
@@ -348,7 +345,7 @@ $floating-in-height: 3.25em !default;
                 .control {
                     .input,
                     .button {
-                        height: $floating-in-height;
+                        height: vars.$floating-in-height;
                     }
                 }
             }
diff --git a/src/assets/scss/components/_icon.scss b/src/assets/scss/components/_icon.scss
index 35829d9..b5654e3 100644
--- a/src/assets/scss/components/_icon.scss
+++ b/src/assets/scss/components/_icon.scss
@@ -1,8 +1,5 @@
 @use "bulma/sass/utilities/css-variables" as css;
-
-/* @docs */
-$icon-spin-duration: 2s !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 @keyframes icon-spin {
     0% {
@@ -19,7 +16,7 @@ $icon-spin-duration: 2s !default;
 .icon {
     @include css.register-vars(
         (
-            "icon-spin-duration": #{$icon-spin-duration},
+            "icon-spin-duration": #{vars.$icon-spin-duration},
         )
     );
 
diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss
index 16ab596..4c0898a 100644
--- a/src/assets/scss/components/_loading.scss
+++ b/src/assets/scss/components/_loading.scss
@@ -1,19 +1,13 @@
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
-
-/* @docs */
-$loading-background-color: rgba(255, 255, 255, 0.5) !default;
-$loading-icon-size: 3em !default;
-$loading-icon-size-full-page: 5em !default;
-$loading-z: 29 !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .loading {
     @include css.register-vars(
         (
-            "loading-background-color": #{$loading-background-color},
-            "loading-icon-size": #{$loading-icon-size},
-            "loading-z": #{$loading-z},
+            "loading-background-color": #{vars.$loading-background-color},
+            "loading-icon-size": #{vars.$loading-icon-size},
+            "loading-z": #{vars.$loading-z},
         )
     );
 
@@ -28,7 +22,7 @@ $loading-z: 29 !default;
     &.is-full-page {
         @include css.register-vars(
             (
-                "loading-icon-size": #{$loading-icon-size-full-page},
+                "loading-icon-size": #{vars.$loading-icon-size-full-page},
             )
         );
 
diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss
index 4081968..0b49ddb 100644
--- a/src/assets/scss/components/_notification.scss
+++ b/src/assets/scss/components/_notification.scss
@@ -1,16 +1,11 @@
 @use "bulma/sass/utilities/css-variables" as css;
-
-/* @docs */
-$notification-margin-bottom: 1.5rem !default;
-$notification-notices-padding: 2em !default;
-$notification-notices-z: 1000 !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .notices {
     @include css.register-vars(
         (
-            "notification-notices-padding": #{$notification-notices-padding},
-            "notification-notices-z": #{$notification-notices-z},
+            "notification-notices-padding": #{vars.$notification-notices-padding},
+            "notification-notices-z": #{vars.$notification-notices-z},
         )
     );
 
@@ -28,7 +23,7 @@ $notification-notices-z: 1000 !default;
     .notification {
         @include css.register-vars(
             (
-                "notification-margin-bottom": #{$notification-margin-bottom},
+                "notification-margin-bottom": #{vars.$notification-margin-bottom},
             )
         );
 
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index 93bd206..9576e9b 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -1,26 +1,18 @@
 @use "sass:list";
 
 @use "utils/functions" as fn;
-@use "utils/variables" as var;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/controls" as controls;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-/* @docs */
-$radio-colors: var.$colors !default;
-$radio-active-background-color: css.getVar("primary") !default;
-$radio-border-color: css.getVar("grey") !default;
-$radio-size: 1.25em !default;
-$radio-shadow: css.getVar("shadow");
-/* @docs */
-
 .radio {
     @include css.register-vars(
         (
-            "radio-active-background-color": #{$radio-active-background-color},
-            "radio-border-color": #{$radio-border-color},
-            "radio-size": #{$radio-size},
-            "radio-shadow": #{$radio-shadow},
+            "radio-active-background-color": #{vars.$radio-active-background-color},
+            "radio-border-color": #{vars.$radio-border-color},
+            "radio-size": #{vars.$radio-size},
+            "radio-shadow": #{vars.$radio-shadow},
         )
     );
 
@@ -36,7 +28,7 @@ $radio-shadow: css.getVar("shadow");
         flex-shrink: 0;
         border-radius: 50%;
         border: 2px solid css.getVar("radio-border-color");
-        transition: background var.$speed-slow css.getVar("easing");
+        transition: background vars.$speed-slow css.getVar("easing");
         box-shadow: css.getVar("radio-shadow");
 
         &:before {
@@ -47,7 +39,7 @@ $radio-shadow: css.getVar("shadow");
             width: css.getVar("radio-size");
             height: css.getVar("radio-size");
             border-radius: 50%;
-            transition: transform var.$speed-slow css.getVar("easing");
+            transition: transform vars.$speed-slow css.getVar("easing");
             transform: scale(0);
             background: css.getVar("radio-active-background-color");
         }
@@ -108,7 +100,7 @@ $radio-shadow: css.getVar("shadow");
     }
 
     // variant colors
-    @each $name, $pair in $radio-colors {
+    @each $name, $pair in vars.$radio-colors {
         $color: list.nth($pair, 1);
 
         &.is-#{$name} {
diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss
index badb6e1..40c0161 100644
--- a/src/assets/scss/components/_sidebar.scss
+++ b/src/assets/scss/components/_sidebar.scss
@@ -1,34 +1,18 @@
 @use "sass:list";
 
-@use "utils/variables" as var;
-@use "bulma/sass/utilities/initial-variables" as vars;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-/* @docs */
-$sidebar-colors: var.$colors !default;
-$sidebar-z: 40;
-$sidebar-background-background-color: hsla(
-    #{css.getVar("scheme-h")},
-    #{css.getVar("scheme-s")},
-    #{css.getVar("scheme-invert-l")},
-    0.86
-) !default;
-$sidebar-shadow: css.getVar("shadow");
-$sidebar-width: 260px !default;
-$sidebar-height: 260px !default;
-$sidebar-mobile-width: 80px !default;
-/* @docs */
-
 .sidebar {
     @include css.register-vars(
         (
-            "sidebar-z": #{$sidebar-z},
-            "sidebar-background-background-color": #{$sidebar-background-background-color},
-            "sidebar-shadow": #{$sidebar-shadow},
-            "sidebar-width": #{$sidebar-width},
-            "sidebar-height": #{$sidebar-height},
-            "sidebar-mobile-width": #{$sidebar-mobile-width},
+            "sidebar-z": #{vars.$sidebar-z},
+            "sidebar-background-background-color": #{vars.$sidebar-background-background-color},
+            "sidebar-shadow": #{vars.$sidebar-shadow},
+            "sidebar-width": #{vars.$sidebar-width},
+            "sidebar-height": #{vars.$sidebar-height},
+            "sidebar-mobile-width": #{vars.$sidebar-mobile-width},
         )
     );
 
@@ -38,10 +22,10 @@ $sidebar-mobile-width: 80px !default;
         width: css.getVar("sidebar-width");
         height: css.getVar("sidebar-height");
         position: fixed;
-        transition: width var.$speed-slow css.getVar("easing");
+        transition: width vars.$speed-slow css.getVar("easing");
         z-index: css.getVar("sidebar-z");
 
-        @each $name, $pair in $sidebar-colors {
+        @each $name, $pair in vars.$sidebar-colors {
             $color: list.nth($pair, 1);
 
             &.is-#{$name} {
diff --git a/src/assets/scss/components/_skeleton.scss b/src/assets/scss/components/_skeleton.scss
index a4ef55d..ef417f2 100644
--- a/src/assets/scss/components/_skeleton.scss
+++ b/src/assets/scss/components/_skeleton.scss
@@ -1,12 +1,6 @@
-@use "utils/variables" as var;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 
-/* @docs */
-$skeleton-border-radius: css.getVar("radius") !default;
-$skeleton-duration: 1.5s !default;
-$skeleton-margin-top: 0.5rem !default;
-/* @docs */
-
 /* @bulma docs */
 // --bulma-skeleton-background: var(--bulma-border);
 // --bulma-skeleton-radius: var(--bulma-radius-small);
@@ -18,9 +12,9 @@ $skeleton-margin-top: 0.5rem !default;
 .skeleton {
     @include css.register-vars(
         (
-            "skeleton-border-radius": #{$skeleton-border-radius},
-            "skeleton-duration": #{$skeleton-duration},
-            "skeleton-margin-top": #{$skeleton-margin-top},
+            "skeleton-border-radius": #{vars.$skeleton-border-radius},
+            "skeleton-duration": #{vars.$skeleton-duration},
+            "skeleton-margin-top": #{vars.$skeleton-margin-top},
         )
     );
 
@@ -56,7 +50,7 @@ $skeleton-margin-top: 0.5rem !default;
         }
 
         // sizes
-        @each $name, $value in var.$sizes-map {
+        @each $name, $value in vars.$sizes-map {
             &.is-#{$name} {
                 @include css.register-vars(
                     (
diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss
index 2883c9c..f556669 100644
--- a/src/assets/scss/components/_slider.scss
+++ b/src/assets/scss/components/_slider.scss
@@ -1,46 +1,27 @@
 @use "sass:list";
 
-@use "utils/variables" as var;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 
-/* @docs */
-$slider-colors: var.$colors !default;
-$slider-radius: css.getVar("radius") !default;
-$slider-background: css.getVar("grey-lighter") !default;
-$slider-color: css.getVar("primary") !default;
-$slider-track-border: 0px solid css.getVar("grey") !default;
-$slider-track-shadow: 0px 0px 0px css.getVar("grey") !default;
-$slider-thumb-background: css.getVar("scheme-main") !default;
-$slider-thumb-radius: css.getVar("radius") !default;
-$slider-thumb-border: 1px solid css.getVar("grey-light") !default;
-$slider-thumb-shadow: none !default;
-$slider-thumb-to-track-ratio: 2 !default;
-$slider-tick-to-track-ratio: 0.5 !default;
-$slider-tick-width: 3px !default;
-$slider-tick-radius: css.getVar("radius") !default;
-$slider-tick-background: css.getVar("grey-light") !default;
-$slider-tick-label-size: 0.75rem !default;
-/* @docs */
-
 .slider {
     @include css.register-vars(
         (
             "slider-size": 1rem,
-            "slider-color": #{$slider-color},
-            "slider-radius": #{$slider-radius},
-            "slider-background": #{$slider-background},
-            "slider-track-border": #{$slider-track-border},
-            "slider-track-shadow": #{$slider-track-shadow},
-            "slider-thumb-background": #{$slider-thumb-background},
-            "slider-thumb-radius": #{$slider-thumb-radius},
-            "slider-thumb-border": #{$slider-thumb-border},
-            "slider-thumb-shadow": #{$slider-thumb-shadow},
-            "slider-thumb-to-track-ratio": #{$slider-thumb-to-track-ratio},
-            "slider-tick-width": #{$slider-tick-width},
-            "slider-tick-radius": #{$slider-tick-radius},
-            "slider-tick-background": #{$slider-tick-background},
-            "slider-tick-to-track-ratio": #{$slider-tick-to-track-ratio},
-            "slider-tick-label-size": #{$slider-tick-label-size},
+            "slider-color": #{vars.$slider-color},
+            "slider-radius": #{vars.$slider-radius},
+            "slider-background": #{vars.$slider-background},
+            "slider-track-border": #{vars.$slider-track-border},
+            "slider-track-shadow": #{vars.$slider-track-shadow},
+            "slider-thumb-background": #{vars.$slider-thumb-background},
+            "slider-thumb-radius": #{vars.$slider-thumb-radius},
+            "slider-thumb-border": #{vars.$slider-thumb-border},
+            "slider-thumb-shadow": #{vars.$slider-thumb-shadow},
+            "slider-thumb-to-track-ratio": #{vars.$slider-thumb-to-track-ratio},
+            "slider-tick-width": #{vars.$slider-tick-width},
+            "slider-tick-radius": #{vars.$slider-tick-radius},
+            "slider-tick-background": #{vars.$slider-tick-background},
+            "slider-tick-to-track-ratio": #{vars.$slider-tick-to-track-ratio},
+            "slider-tick-label-size": #{vars.$slider-tick-label-size},
         )
     );
 
@@ -137,7 +118,7 @@ $slider-tick-label-size: 0.75rem !default;
     }
 
     // sizes
-    @each $name, $value in var.$sizes-map {
+    @each $name, $value in vars.$sizes-map {
         &.is-#{$name} {
             @include css.register-vars(
                 (
@@ -148,7 +129,7 @@ $slider-tick-label-size: 0.75rem !default;
     }
 
     // color variants
-    @each $name, $pair in $slider-colors {
+    @each $name, $pair in vars.$slider-colors {
         $color: list.nth($pair, 1);
 
         .is-#{$name} {
diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
index c0989c9..3100597 100644
--- a/src/assets/scss/components/_steps.scss
+++ b/src/assets/scss/components/_steps.scss
@@ -1,37 +1,20 @@
 @use "sass:list";
 
-@use "utils/variables" as var;
-@use "bulma/sass/utilities/initial-variables" as vars;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-/* @docs */
-$steps-colors: var.$colors !default;
-$steps-mobile-breakpoint: vars.$tablet !default;
-$steps-marker-background: css.getVar("grey-light") !default;
-$steps-marker-color: css.getVar("scheme-main") !default;
-$steps-marker-border: 0.2em solid css.getVar("white") !default;
-$steps-default-color: css.getVar("grey-lighter") !default;
-$steps-previous-color: css.getVar("scheme-main") !default;
-$steps-previous-background: css.getVar("primary") !default;
-$steps-active-color: css.getVar("primary") !default;
-$steps-active-background: css.getVar("scheme-main") !default;
-$steps-divider-height: 0.2em !default;
-$steps-details-background-color: css.getVar("body-background-color") !default;
-$steps-vertical-padding: 1em 0 !default;
-/* @docs */
-
 .steps-wrapper {
     @include css.register-vars(
         (
-            "steps-size": #{var.$size-normal},
-            "steps-divider-height": #{$steps-divider-height},
-            "steps-details-background-color": #{$steps-details-background-color},
+            "steps-size": #{vars.$size-normal},
+            "steps-divider-height": #{vars.$steps-divider-height},
+            "steps-details-background-color": #{vars.$steps-details-background-color},
         )
     );
 
     // sizes
-    @each $name, $value in var.$sizes-map {
+    @each $name, $value in vars.$sizes-map {
         &.is-#{$name} {
             @include css.register-vars(
                 (
@@ -53,7 +36,7 @@ $steps-vertical-padding: 1em 0 !default;
                 &:not(:first-child),
                 &:only-child {
                     &::before {
-                        transition: background var.$speed-slow
+                        transition: background vars.$speed-slow
                             css.getVar("easing");
                     }
                 }
@@ -84,14 +67,14 @@ $steps-vertical-padding: 1em 0 !default;
     .step {
         @include css.register-vars(
             (
-                "steps-default-color": #{$steps-default-color},
-                "steps-active-color": #{$steps-active-color},
-                "steps-active-background": #{$steps-active-background},
-                "steps-previous-color": #{$steps-previous-color},
-                "steps-previous-background": #{$steps-previous-background},
-                "steps-marker-background": #{$steps-marker-background},
-                "steps-marker-color": #{$steps-marker-color},
-                "steps-marker-border": #{$steps-marker-border},
+                "steps-default-color": #{vars.$steps-default-color},
+                "steps-active-color": #{vars.$steps-active-color},
+                "steps-active-background": #{vars.$steps-active-background},
+                "steps-previous-color": #{vars.$steps-previous-color},
+                "steps-previous-background": #{vars.$steps-previous-background},
+                "steps-marker-background": #{vars.$steps-marker-background},
+                "steps-marker-color": #{vars.$steps-marker-color},
+                "steps-marker-border": #{vars.$steps-marker-border},
                 "steps-marker-border-color": #fff,
             )
         );
@@ -199,7 +182,7 @@ $steps-vertical-padding: 1em 0 !default;
         }
 
         // Override marker color per step
-        @each $name, $pair in $steps-colors {
+        @each $name, $pair in vars.$steps-colors {
             $color: list.nth($pair, 1);
             $color-invert: if(
                 list.length($pair) >= 2,
@@ -285,7 +268,7 @@ $steps-vertical-padding: 1em 0 !default;
     &.is-vertical {
         @include css.register-vars(
             (
-                "steps-vertical-padding": #{$steps-vertical-padding},
+                "steps-vertical-padding": #{vars.$steps-vertical-padding},
             )
         );
 
@@ -306,8 +289,7 @@ $steps-vertical-padding: 1em 0 !default;
                         &::before,
                         &::after {
                             left: calc(
-                                css.getVar("steps-size") -
-                                    (css.getVar("steps-divider-height") * 0.5)
+                                css.getVar("steps-size") - (css.getVar("steps-divider-height") * 0.5)
                             );
                         }
                     }
@@ -406,7 +388,7 @@ $steps-vertical-padding: 1em 0 !default;
         }
     }
 
-    @include mixins.until($steps-mobile-breakpoint) {
+    @include mixins.until(vars.$steps-mobile-breakpoint) {
         &:not(.is-vertical) {
             .step {
                 &:not(.is-active) {
diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss
index 6809bb7..4045ed5 100644
--- a/src/assets/scss/components/_switch.scss
+++ b/src/assets/scss/components/_switch.scss
@@ -1,28 +1,19 @@
 @use "sass:list";
 
 @use "utils/functions" as fn;
-@use "utils/variables" as var;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/controls" as controls;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-/* @docs */
-$switch-colors: var.$colors !default;
-$switch-width: 2.75em !default;
-$switch-padding: 0.2em !default;
-$switch-background-color: css.getVar("grey-light") !default;
-$switch-active-background-color: css.getVar("primary") !default;
-$switch-shadow: css.getVar("shadow");
-/* @docs */
-
 .switch {
     @include css.register-vars(
         (
-            "switch-width": #{$switch-width},
-            "switch-padding": #{$switch-padding},
-            "switch-active-background-color": #{$switch-active-background-color},
-            "switch-background-color": #{$switch-background-color},
-            "switch-shadow": #{$switch-shadow},
+            "switch-width": #{vars.$switch-width},
+            "switch-padding": #{vars.$switch-padding},
+            "switch-active-background-color": #{vars.$switch-active-background-color},
+            "switch-background-color": #{vars.$switch-background-color},
+            "switch-shadow": #{vars.$switch-shadow},
         )
     );
 
@@ -42,8 +33,8 @@ $switch-shadow: css.getVar("shadow");
         background: css.getVar("switch-background-color");
         border-radius: css.getVar("radius");
         transition:
-            background var.$speed-slow css.getVar("easing"),
-            box-shadow var.$speed-slow css.getVar("easing");
+            background vars.$speed-slow css.getVar("easing"),
+            box-shadow vars.$speed-slow css.getVar("easing");
         box-shadow: css.getVar("switch-shadow");
 
         &:before {
@@ -71,7 +62,7 @@ $switch-shadow: css.getVar("shadow");
                 0 3px 1px 0 rgba(0, 0, 0, 0.05),
                 0 2px 2px 0 rgba(0, 0, 0, 0.1),
                 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-            transition: transform var.$speed-slow css.getVar("easing");
+            transition: transform vars.$speed-slow css.getVar("easing");
             will-change: transform;
             transform-origin: left;
         }
@@ -175,7 +166,7 @@ $switch-shadow: css.getVar("shadow");
     }
 
     // variant colors
-    @each $name, $pair in $switch-colors {
+    @each $name, $pair in vars.$switch-colors {
         $color: list.nth($pair, 1);
 
         &.is-#{$name}-passive {
diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss
index efb1ab1..3d2c315 100644
--- a/src/assets/scss/components/_table.scss
+++ b/src/assets/scss/components/_table.scss
@@ -1,13 +1,7 @@
-@use "utils/variables" as var;
 @use "utils/functions" as fn;
-@use "bulma/sass/utilities/initial-variables" as vars;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
-@use "bulma/sass/elements/table" as table;
-
-/* @docs */
-$table-sticky-header-height: 300px !default;
-/* @docs */
 
 @mixin table-cards {
     .table {
@@ -96,7 +90,7 @@ $table-sticky-header-height: 300px !default;
 .table-wrapper {
     @include css.register-vars(
         (
-            "table-sticky-header-height": #{$table-sticky-header-height},
+            "table-sticky-header-height": #{vars.$table-sticky-header-height},
         )
     );
     transition: opacity vars.$speed css.getVar("easing");
@@ -163,7 +157,7 @@ $table-sticky-header-height: 300px !default;
 
     .icon {
         transition:
-            transform var.$speed-slow css.getVar("easing"),
+            transform vars.$speed-slow css.getVar("easing"),
             opacity vars.$speed css.getVar("easing");
 
         &.is-desc {
@@ -263,7 +257,7 @@ $table-sticky-header-height: 300px !default;
 
                     &:checked {
                         background: css.getVar("table-row-active-color")
-                            url(fn.checkmark(var.$primary)) no-repeat center
+                            url(fn.checkmark(vars.$primary)) no-repeat center
                             center;
                     }
                 }
diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss
index 1eec117..c7236f0 100644
--- a/src/assets/scss/components/_tabs.scss
+++ b/src/assets/scss/components/_tabs.scss
@@ -1,56 +1,23 @@
 @use "bulma/sass/components/tabs"; // include tabs component to extend from
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
-
-/* @docs */
-$tabs-focused-outline: none !default;
-$tabs-link-focus-border-bottom-color: css.getVar(
-    "tabs-link-hover-border-bottom-color"
-) !default;
-$tabs-link-focus-active-border-bottom-color: css.getVar(
-    "tabs-link-active-border-bottom-color"
-) !default;
-$tabs-boxed-link-focus-active-background-color: css.getVar(
-    "tabs-boxed-link-active-background-color"
-) !default;
-$tabs-boxed-link-focus-background-color: css.getVar(
-    "tabs-boxed-link-hover-background-color"
-) !default;
-$tabs-boxed-link-focus-active-border-bottom-color: css.getVar(
-    "tabs-boxed-link-active-border-bottom-color"
-) !default;
-$tabs-boxed-link-focus-border-bottom-color: css.getVar(
-    "tabs-boxed-link-hover-border-bottom-color"
-) !default;
-$tabs-toggle-link-focus-active-background-color: css.getVar(
-    "tabs-toggle-link-active-background-color"
-) !default;
-$tabs-toggle-link-focus-background-color: css.getVar(
-    "tabs-toggle-link-hover-background-color"
-) !default;
-$tabs-toggle-link-focus-active-border-color: css.getVar(
-    "tabs-toggle-link-active-border-color"
-) !default;
-$tabs-toggle-link-focus-border-color: css.getVar(
-    "tabs-toggle-link-hover-border-color"
-) !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .tabs-wrapper {
     .tabs {
         @include css.register-vars(
             (
-                "tabs-focused-outline": #{$tabs-focused-outline},
-                "tabs-link-focus-border-bottom-color": #{$tabs-link-focus-border-bottom-color},
-                "tabs-link-focus-active-border-bottom-color": #{$tabs-link-focus-active-border-bottom-color},
-                "tabs-boxed-link-focus-border-bottom-color": #{$tabs-boxed-link-focus-border-bottom-color},
-                "tabs-boxed-link-focus-background-color": #{$tabs-boxed-link-focus-background-color},
-                "tabs-boxed-link-focus-active-background-color": #{$tabs-boxed-link-focus-active-background-color},
-                "tabs-boxed-link-focus-active-border-bottom-color": #{$tabs-boxed-link-focus-active-border-bottom-color},
-                "tabs-toggle-link-focus-background-color": #{$tabs-toggle-link-focus-background-color},
-                "tabs-toggle-link-focus-border-color": #{$tabs-toggle-link-focus-border-color},
-                "tabs-toggle-link-focus-active-background-color": #{$tabs-toggle-link-focus-active-background-color},
-                "tabs-toggle-link-focus-active-border-color": #{$tabs-toggle-link-focus-active-border-color},
+                "tabs-focused-outline": #{vars.$tabs-focused-outline},
+                "tabs-link-focus-border-bottom-color": #{vars.$tabs-link-focus-border-bottom-color},
+                "tabs-link-focus-active-border-bottom-color": #{vars.$tabs-link-focus-active-border-bottom-color},
+                "tabs-boxed-link-focus-border-bottom-color": #{vars.$tabs-boxed-link-focus-border-bottom-color},
+                "tabs-boxed-link-focus-background-color": #{vars.$tabs-boxed-link-focus-background-color},
+                "tabs-boxed-link-focus-active-background-color": #{vars.$tabs-boxed-link-focus-active-background-color},
+                "tabs-boxed-link-focus-active-border-bottom-color": #{vars.$tabs-boxed-link-focus-active-border-bottom-color},
+                "tabs-toggle-link-focus-background-color": #{vars.$tabs-toggle-link-focus-background-color},
+                "tabs-toggle-link-focus-border-color": #{vars.$tabs-toggle-link-focus-border-color},
+                "tabs-toggle-link-focus-active-background-color": #{vars.$tabs-toggle-link-focus-active-background-color},
+                "tabs-toggle-link-focus-active-border-color": #{vars.$tabs-toggle-link-focus-active-border-color},
             )
         );
 
@@ -157,8 +124,8 @@ $tabs-toggle-link-focus-border-color: css.getVar(
         &.is-toggle-rounded {
             .tab-link {
                 &:focus {
-                    background-color: $tabs-toggle-link-focus-background-color;
-                    border-color: $tabs-toggle-link-focus-border-color;
+                    background-color: vars.$tabs-toggle-link-focus-background-color;
+                    border-color: vars.$tabs-toggle-link-focus-border-color;
                 }
 
                 &.is-active {
@@ -172,8 +139,8 @@ $tabs-toggle-link-focus-border-color: css.getVar(
                     z-index: 1;
 
                     &:focus {
-                        background-color: $tabs-toggle-link-focus-active-background-color;
-                        border-color: $tabs-toggle-link-focus-active-border-color;
+                        background-color: vars.$tabs-toggle-link-focus-active-background-color;
+                        border-color: vars.$tabs-toggle-link-focus-active-border-color;
                     }
                 }
             }
diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss
index 5c681a8..0ba616a 100644
--- a/src/assets/scss/components/_taginput.scss
+++ b/src/assets/scss/components/_taginput.scss
@@ -1,17 +1,13 @@
 @use "bulma/sass/form/input-textarea";
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/controls" as controls;
-
-/* @docs */
-$taginput-height: 2em !default;
-$taginput-tag-size: 0.9em !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .taginput {
     @include css.register-vars(
         (
-            "taginput-height": #{$taginput-height},
-            "taginput-tag-size": #{$taginput-tag-size},
+            "taginput-height": #{vars.$taginput-height},
+            "taginput-tag-size": #{vars.$taginput-tag-size},
         )
     );
 
diff --git a/src/assets/scss/components/_tooltip.scss b/src/assets/scss/components/_tooltip.scss
index 93f3e9d..738f718 100644
--- a/src/assets/scss/components/_tooltip.scss
+++ b/src/assets/scss/components/_tooltip.scss
@@ -1,31 +1,19 @@
 @use "sass:list";
 
-@use "utils/variables" as var;
+@use "utils/variables" as vars;
 @use "bulma/sass/utilities/css-variables" as css;
 
-/* @docs */
-$tooltip-colors: var.$colors !default;
-$tooltip-arrow-size: 5px !default;
-$tooltip-arrow-margin: 2px !default;
-$tooltip-content-multiline-width: 300px !default;
-$tooltip-border-radius: css.getVar("radius") !default;
-$tooltip-bg: css.getVar("scheme-main-bis") !default;
-$tooltip-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
-$tooltip-color: css.getVar("text-body") !default;
-$tooltip-z: 38 !default;
-/* @docs */
-
 .tooltip {
     @include css.register-vars(
         (
-            "tooltip-arrow-size": #{$tooltip-arrow-size},
-            "tooltip-arrow-margin": #{$tooltip-arrow-margin},
-            "tooltip-color": #{$tooltip-color},
-            "tooltip-bg": #{$tooltip-bg},
-            "tooltip-border-radius": #{$tooltip-border-radius},
-            "tooltip-shadow": #{$tooltip-shadow},
-            "tooltip-content-multiline-width": #{$tooltip-content-multiline-width},
-            "tooltip-z": #{$tooltip-z},
+            "tooltip-arrow-size": #{vars.$tooltip-arrow-size},
+            "tooltip-arrow-margin": #{vars.$tooltip-arrow-margin},
+            "tooltip-color": #{vars.$tooltip-color},
+            "tooltip-bg": #{vars.$tooltip-bg},
+            "tooltip-border-radius": #{vars.$tooltip-border-radius},
+            "tooltip-shadow": #{vars.$tooltip-shadow},
+            "tooltip-content-multiline-width": #{vars.$tooltip-content-multiline-width},
+            "tooltip-z": #{vars.$tooltip-z},
         )
     );
 
@@ -168,7 +156,7 @@ $tooltip-z: 38 !default;
     }
 
     // Modifiers
-    @each $name, $pair in $tooltip-colors {
+    @each $name, $pair in vars.$tooltip-colors {
         $color: list.nth($pair, 1);
         $color-invert: if(list.length($pair) >= 2, list.nth($pair, 2), null);
 
diff --git a/src/assets/scss/components/_upload.scss b/src/assets/scss/components/_upload.scss
index 752dfbd..fa96f41 100644
--- a/src/assets/scss/components/_upload.scss
+++ b/src/assets/scss/components/_upload.scss
@@ -1,23 +1,16 @@
 @use "sass:list";
 
 @use "bulma/sass/utilities/css-variables" as css;
-@use "bulma/sass/form/file" as file;
-
-/* @docs */
-$upload-colors: file.$file-colors !default;
-$upload-bg: transparent !default;
-$upload-draggable-padding: 0.5rem !default;
-$upload-border-color: css.getVar("grey-light") !default;
-/* @docs */
+@use "utils/variables" as vars;
 
 .upload {
     position: relative;
 
     @include css.register-vars(
         (
-            "upload-draggable-padding": #{$upload-draggable-padding},
-            "upload-bg": #{$upload-bg},
-            "upload-border-color": #{$upload-border-color},
+            "upload-draggable-padding": #{vars.$upload-draggable-padding},
+            "upload-bg": #{vars.$upload-bg},
+            "upload-border-color": #{vars.$upload-border-color},
         )
     );
 
@@ -40,7 +33,7 @@ $upload-border-color: css.getVar("grey-light") !default;
         border: 1px dashed css.getVar("upload-border-color");
         border-radius: css.getVar("radius-large");
 
-        @each $name, $pair in $upload-colors {
+        @each $name, $pair in vars.$upload-colors {
             $color: list.nth($pair, 1);
 
             &.is-#{$name} {
diff --git a/src/assets/scss/components/utils/_variables.scss b/src/assets/scss/components/utils/_variables.scss
index 2f60e37..b56a1c7 100644
--- a/src/assets/scss/components/utils/_variables.scss
+++ b/src/assets/scss/components/utils/_variables.scss
@@ -1,35 +1,9 @@
 /********************************************
 *   Variable overrides and theme variables
 *********************************************/
-@use "sass:map";
 
-$speed-slow: 150ms !default;
-$speed-slower: 250ms !default;
-
-// oruga defines an extra secondary color
-$secondary: #6c757d !default;
-
-// alternative to focus-shadow-size
-$active-shadow-size: 0 0 0.5em !default;
-
-// make the custom colors extandable by providing a new variable to override
-$custom-colors: () !default;
-
-@forward "bulma/sass/utilities/derived-variables" with (
-    // adding aditional colors to colors map
-    $custom-colors:
-        map.merge(
-            // merge our custom-colors with the overridable map
-            ("secondary": $secondary),
-            $custom-colors
-        )
-);
-
-@use "bulma/sass/utilities/derived-variables" as vars;
-
-$sizes-map: (
-    "small": vars.$size-small,
-    "normal": vars.$size-normal,
-    "medium": vars.$size-medium,
-    "large": vars.$size-large,
-) !default;
+@forward "../../initial-defaults";
+@forward "bulma/sass/utilities/initial-variables";
+@forward "bulma/sass/utilities/derived-variables";
+@forward "../../derived-defaults";
+@forward "../../component-defaults";
diff --git a/src/build.ts b/src/build.ts
new file mode 100644
index 0000000..bd34499
--- /dev/null
+++ b/src/build.ts
@@ -0,0 +1,4 @@
+// This file is intended to the be the main entrypoint for the theme's rollup build. Separating this out from theme.ts allows us to include the styles in the build without creating duplicate styles in the test app
+
+import "./assets/scss/bulma-build.scss";
+export * from "./plugins/theme.ts";
diff --git a/src/main-combined.scss b/src/main-combined.scss
new file mode 100644
index 0000000..9bab246
--- /dev/null
+++ b/src/main-combined.scss
@@ -0,0 +1,13 @@
+// This file tests configuring Bulma and the theme from the theme
+@use "assets/scss/bulma-build.scss" with (
+    $primary: #0f0,
+    $secondary: #00f,
+    $theme-bulma-custom-colors: ("fooooo": #f00),
+    $black: #000,
+    $speed-slower: 1ms,
+    $dropdown-content-max-height: 300px,
+    // breaks
+    //$carousel-arrow-color: #f00,
+    $checkbox-size: 2em,
+    $checkbox-border-radius: 0,
+);
diff --git a/src/main-separated.scss b/src/main-separated.scss
new file mode 100644
index 0000000..52bc75e
--- /dev/null
+++ b/src/main-separated.scss
@@ -0,0 +1,34 @@
+// This file tests configuring Bulma and the theme separately.
+// A real world version would likely be much more elaborate, but this should capture the basic idea enough to test the use case
+
+// Set up your own variables to pass in. This can be as eloborate as you'd like but you MUST NOT reference Bulma directly. Mixins etc are fair game but they have to be standalone code.
+$red: #f00;
+$green: #0f0;
+$blue: #00f;
+$black: #000;
+$dark-grey: #6c757d;
+$speed-slower: 1000ms;
+
+// The theme adds a secondary color variant and should allow the user to add additional color variants if they desire
+// In the full bulma build this can happen internally, but if the user wants separated styles they need to handle this themselves
+$custom-colors: (
+    // If you want to use secondary you must include this line
+    // When you pass secondary here you don't need to pass $secondary to the theme styles
+    'secondary': $blue,
+    // If you want to add additional custom colors do it like this
+    'foo': $red
+);
+
+// Pass any Bulma values you're like to override here
+@forward "bulma/sass" with (
+    $primary: $green,
+    $black: $black,
+    $custom-colors: $custom-colors,
+);
+
+// Pass any theme values you'd like to override here. Bulma values like $primary will be passed implicitly into the theme build and do not need to be passed.
+@forward "assets/scss/component-only-build.scss" with (
+    $speed-slower: $speed-slower,
+    $dropdown-content-max-height: 300px,
+);
+
diff --git a/src/main.ts b/src/main.ts
index 2741285..6fac59d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,6 +8,11 @@ import Examples from "@oruga-ui/examples";
 
 // add examples styles
 import "@oruga-ui/examples/dist/examples.css";
+// import main bundle, either separated or combined
+// these imports are for testing different ways of including theme/bulma styles
+// use one or the other. do not use both.
+//import "./main-combined.scss";
+import "./main-separated.scss";
 
 // add theme config
 import { bulmaConfig } from "./plugins/theme";
diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts
index 1fc3533..a008ea4 100644
--- a/src/plugins/theme.ts
+++ b/src/plugins/theme.ts
@@ -1,9 +1,6 @@
 import type { OrugaOptions, ComponentProps } from "@oruga-ui/oruga-next";
 import { isTrueish } from "@oruga-ui/oruga-next";
 
-// import theme style
-import "../assets/scss/bulma-build.scss";
-
 const bulmaConfig: OrugaOptions = {
     field: {
         override: true,
diff --git a/vite.config.ts b/vite.config.ts
index fccfaf8..55d0f6e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -38,7 +38,7 @@ export default defineConfig(({ mode }) => {
                 copyPublicDir: false,
                 minify: "terser",
                 lib: {
-                    entry: resolve(__dirname, "src/plugins/theme.ts"),
+                    entry: resolve(__dirname, "src/build.ts"),
                     name: "OrugaThemeBulma",
                     fileName: "bulma",
                     formats: ["es", "cjs", "umd"],