diff --git a/inst/lib/bsw4/dist/materia/_bootswatch.scss b/inst/lib/bsw4/dist/materia/_bootswatch.scss
index eaf2606..ff721aa 100644
--- a/inst/lib/bsw4/dist/materia/_bootswatch.scss
+++ b/inst/lib/bsw4/dist/materia/_bootswatch.scss
@@ -48,7 +48,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
   .btn-#{$class} {
     &:focus {
       background-color: $bg;
-      box-shadow: 0 0 0 2px rgba(204, 204, 204, .5);
+      box-shadow: $btn-focus-box-shadow;
     }
 
     &:hover,
@@ -57,7 +57,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
     }
 
     &:active {
-      box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+      box-shadow: $btn-active-box-shadow;
     }
 
     @include ripple($color);
@@ -79,7 +80,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
 
 .navbar {
   border: none;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+  box-shadow: 0 1px 2px rgba($black, .3);
 
   &-brand {
     font-size: 24px;
@@ -98,14 +99,14 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
     input[type="number"],
     input[type="tel"] {
       color: $white;
-      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5);
+      box-shadow: inset 0 -1px 0 rgba($white, .5);
 
       &:focus {
         box-shadow: inset 0 -2px 0 $white;
       }
 
       &::placeholder {
-        color: rgba(255, 255, 255, .5);
+        color: rgba($white, .5);
       }
     }
   }
@@ -125,7 +126,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
 .btn {
   text-transform: uppercase;
   border: none;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+  box-shadow: $btn-box-shadow;
   transition: color .4s, background-color .4s, border-color .4s, box-shadow .4s;
 
   &-link {
@@ -158,13 +159,13 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
     &.disabled,
     &[disabled],
     fieldset[disabled] & {
-      background-color: rgba(0, 0, 0, .1);
-      color: rgba(0, 0, 0, .4);
+      background-color: rgba($black, .1);
+      color: rgba($black, .4);
       opacity: 1;
 
       &:hover,
       &:focus {
-        background-color: rgba(0, 0, 0, .1);
+        background-color: rgba($black, .1);
       }
     }
   }
@@ -198,12 +199,12 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
 
   .btn + .btn,
   .btn + .btn-group > .dropdown-toggle {
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
+    box-shadow: 1px 1px 4px rgba($black, .4);
   }
 }
 
 .border-secondary {
-  border: 1px solid #dfdfdf !important;
+  border: 1px solid mix($white, $black, 86.7%) !important;
 }
 
 // Typography ==================================================================
@@ -264,22 +265,22 @@ input[type="number"],
 [type="email"].form-control,
 [type="tel"].form-control,
 [contenteditable].form-control {
-  box-shadow: inset 0 -1px 0 #ddd;
+  box-shadow: $input-box-shadow;
   transition: box-shadow .2s;
 
   &:focus {
-    box-shadow: inset 0 -2px 0 $primary;
+    box-shadow: $input-focus-box-shadow;
   }
 
   &[disabled],
   &[readonly] {
     box-shadow: none;
-    border-bottom: 1px dotted #ddd;
+    border-bottom: 1px dotted mix($white, $black, 86.7%);
   }
 
   &[disabled],
   &[disabled]::placeholder {
-    color: #ddd;
+    color: mix($white, $black, 86.7%);
   }
 
   &::-ms-clear {
@@ -299,7 +300,7 @@ select.form-control {
   background-size: 8px 4px;
   background-repeat: no-repeat;
   background-position: right center;
-  box-shadow: inset 0 -1px 0 #ddd;
+  box-shadow: $input-box-shadow;
 
   &::-ms-expand {
     display: none;
@@ -316,7 +316,7 @@ select.form-control {
   }
 
   &:focus {
-    box-shadow: inset 0 -2px 0 $primary;
+    box-shadow: $input-focus-box-shadow;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23212121' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
   }
 
@@ -389,7 +390,7 @@ select.form-control {
 
   .custom-control-label::after {
     background-color: $white;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+    box-shadow: 0 1px 4px rgba($black, .3);
   }
 
   .custom-control-input:checked ~ .custom-control-label::before {
@@ -401,27 +402,28 @@ select.form-control {
   }
 
   .custom-control-input:hover:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(0, 0, 0, .05);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba($black, .05);
   }
 
   .custom-control-input:focus:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(0, 0, 0, .09);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba($black, .09);
   }
 
   .custom-control-input:active:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(0, 0, 0, .16);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba($black, .16);
   }
 
+  // TODO: variablize colors
   .custom-control-input:hover:checked:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(33, 150, 243, .05);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba(33, 150, 243, .05);
   }
 
   .custom-control-input:focus:checked:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(33, 150, 243, .09);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba(33, 150, 243, .09);
   }
 
   .custom-control-input:active:checked:not(:disabled) ~ .custom-control-label::after {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 9px rgba(33, 150, 243, .16);
+    box-shadow: 0 1px 4px rgba($black, .3), 0 0 0 9px rgba(33, 150, 243, .16);
   }
 
   .custom-control-input:active:not(:checked) ~ .custom-control-label::before {
@@ -501,11 +503,11 @@ select.form-control {
   }
 
   > .input-group-prepend > .input-group-text {
-    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm $input-btn-padding-y-sm 0;
+    padding: 0 $input-btn-padding-x-sm $input-btn-padding-y-sm $input-btn-padding-x-sm;
   }
 
   > .input-group-append > .input-group-text {
-    padding: $input-btn-padding-y-sm 0 $input-btn-padding-y-sm $input-btn-padding-x-sm;
+    padding: 0 $input-btn-padding-x-sm $input-btn-padding-y-sm $input-btn-padding-x-sm;
   }
 
   > .input-group-prepend > .btn {
@@ -554,18 +556,19 @@ select.form-control {
 
 // Navs ========================================================================
 
+// TODO: bs3compat?
 .nav-tabs {
   .nav-item + .nav-item {
     margin-left: 0;
   }
 
-  .nav-link,
-  .nav-link:focus {
+  .nav-link, li>a,
+  .nav-link:focus, li>a:focus {
     margin-right: 0;
     background-color: transparent;
     border: none;
     color: $body-color;
-    box-shadow: inset 0 -1px 0 #ddd;
+    box-shadow: inset 0 -1px 0 mix($white, $black, 86.7%);
     transition: color .2s, box-shadow .2s;
 
     &:hover {
@@ -575,8 +578,8 @@ select.form-control {
     }
   }
 
-  .nav-link.active,
-  .nav-link.active:focus {
+  .nav-link.active, li.active>a
+  .nav-link.active:focus, li.active>a:focus {
     border: none;
     box-shadow: inset 0 -2px 0 $primary;
     color: $primary;
@@ -587,8 +590,8 @@ select.form-control {
     }
   }
 
-  .nav-link.disabled {
-    box-shadow: inset 0 -1px 0 #ddd;
+  .nav-link.disabled, li>a.disabled {
+    box-shadow: inset 0 -1px 0 mix($white, $black, 86.7%);
   }
 
   &.nav-justified {
@@ -610,7 +613,7 @@ select.form-control {
 .dropdown-menu {
   margin-top: 0;
   border: none;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  box-shadow: 0 1px 4px rgba($black, .3);
 }
 
 // Indicators ==================================================================
@@ -691,7 +694,7 @@ select.form-control {
 }
 
 .card {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+  box-shadow: 0 1px 4px rgba($black, .4);
 
   &.border-primary,
   &.border-secondary,
@@ -726,12 +729,12 @@ select.form-control {
 
 .modal-content {
   border-radius: .2rem;
-  box-shadow: 0 6px 36px rgba(0, 0, 0, .3);
+  box-shadow: 0 6px 36px rgba($black, .3);
 }
 
 .popover {
   border: none;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  box-shadow: 0 1px 4px rgba($black, .3);
 }
 
 .carousel {
diff --git a/inst/lib/bsw4/dist/materia/_variables.scss b/inst/lib/bsw4/dist/materia/_variables.scss
index 54b8bcc..eef1d59 100755
--- a/inst/lib/bsw4/dist/materia/_variables.scss
+++ b/inst/lib/bsw4/dist/materia/_variables.scss
@@ -116,3 +116,12 @@ $progress-border-radius:        0 !default;
 
 $close-font-size:             2.125rem !default;
 $close-font-weight:           300 !default;
+
+
+// Box shadows
+$enable-shadows: true !default;
+$btn-box-shadow:         0 1px 4px mix($white, $black, 60%) !default;
+$btn-active-box-shadow:  2px 2px 4px mix($white, $black, 60%) !default;
+$btn-focus-box-shadow:   0 0 0 2px mix($white, $black, 40%) !default;
+$input-box-shadow:       inset 0 -1px 0 mix($white, $black, 86.7%) !default;
+$input-focus-box-shadow: inset 0 -2px 0 $primary !default;
\ No newline at end of file