diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 51707e9a..b7cb3182 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -102,10 +102,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// FIXME: should be @use so that classes dont get imported twice 
-// needed for
-// - $card-shadow
-@import "bulma/sass/components/card.sass";
 .color-picker-container {
   display: flex;
   justify-content: center;
@@ -132,7 +128,7 @@ export default {
 		overflow: hidden;
 		border-radius: 100%;
 		border: $BORDER_WIDTH solid $grey-300;
-		box-shadow: $card-shadow;
+		box-shadow: $shadow;
 
 		& > * {
 			grid-row: 1;
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index aae78e2f..85ecd551 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -245,11 +245,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// FIXME: should be @use so that classes dont get imported twice 
-@import "bulma/sass/components/card.sass";
-// needed for
-// - $card-shadow
-
 .datepicker {
 	input.input {
 		display: none;
@@ -265,7 +260,7 @@ export default {
 		width: 320px;
 		background: $white;
 		border-radius: $radius;
-		box-shadow: $card-shadow;
+		box-shadow: $shadow;
 
 		@media screen and (max-width: ($tablet)) {
 			width: calc(100vw - 5rem);