Unified Box Shadows with Bootstrap Compatibility (#1586)

.changeset/orange-donuts-cough.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unified Box Shadows with Bootstrap Compatibility

src/scss/_variables.scss

@@ -13,7 +13,6 @@ $enable-cssgrid: true !default;
 
 // DARK MODE
 $color-mode-type: data !default;
-
 // ASSETS BASE
 $assets-base: ".." !default;
 
@@ -435,24 +434,20 @@ $aspect-ratios: (
 ) !default;
 
 // Shadows
-$shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
-$shadow-inset: inset var(--#{$prefix}border-color-translucent) 0 0 0 1px !default;
+$box-shadow-transparent: 0 0 0 0 transparent !default;
-$shadow-transparent: 0 0 0 0 transparent !default;
+$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
-$shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
+$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
-$shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), 0.2) !default;
+$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
-$shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
+$box-shadow-dropdown: 0 16px 24px 2px rgb(0, 0, 0, 0.07), 0 6px 30px 5px rgb(0, 0, 0, 0.06), 0 8px 10px -5px rgb(0, 0, 0, 0.1) !default;
-$shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
-$shadow-dropdown: 0px 16px 24px 2px rgb(0, 0, 0, 0.07),
-  0px 6px 30px 5px rgb(0, 0, 0, 0.06), 0px 8px 10px -5px rgb(0, 0, 0, 0.1) !default;
 
-$shadows: (
+$box-shadows: (
-  shadow: $shadow,
+  box-shadow: $box-shadow,
-  shadow-transparent: $shadow-transparent,
+  box-shadow-transparent: $box-shadow-transparent,
-  shadow-button: $shadow-button,
+  box-shadow-input: $box-shadow-input,
-  shadow-button-inset: $shadow-button-inset,
+  box-shadow-card: $box-shadow-card,
-  shadow-card: $shadow-card,
+  box-shadow-card-hover: $box-shadow-card-hover,
-  shadow-card-hover: $shadow-card-hover,
+  box-shadow-dropdown: $box-shadow-dropdown,
-  shadow-dropdown: $shadow-dropdown,
 ) !default;
 
 $box-shadow-inset: 0 0 transparent !default;
@@ -539,6 +534,7 @@ $input-height-lg: null !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: var(--#{$prefix}body-color) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
+$input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Buttons
 $btn-disabled-opacity: 0.4 !default;
@@ -546,6 +542,7 @@ $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
+$btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
@@ -838,13 +835,14 @@ $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Forms
 $form-check-margin-bottom: 0.5rem !default;
-$form-check-input-width: 1rem !default;
+$form-check-padding-start: 1.5rem !default;
-$form-check-padding-start: $form-check-input-width + 0.5rem !default;
 
+$form-check-input-width: 1rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
 $form-check-input-border: var(--#{$prefix}border-width)
   var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
+$form-check-input-box-shadow: $input-box-shadow !default;
 
 $form-check-input-checked-bg-size: 1rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
@@ -860,6 +858,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-label-disabled-opacity: $text-muted-opacity;
 
 $form-select-indicator-color: $text-muted-light !default;
+$form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.125rem !default;

src/scss/demo.scss

@@ -104,7 +104,7 @@ $demo-icon-size: 4rem;
 
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  box-shadow: $shadow;
+  box-shadow: $box-shadow;
 }
 
 .settings-scheme {
@@ -115,7 +115,7 @@ $demo-icon-size: 4rem;
   position: relative;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
     var(--#{$prefix}border-color);
-  box-shadow: $shadow;
+  box-shadow: $box-shadow;
 
   &-light {
     background: linear-gradient(135deg, $white 50%, $light 50%);

src/scss/layout/_root.scss

@@ -62,7 +62,7 @@
     --#{$prefix}line-height-#{$name}: #{$value};
   }
 
-  @each $name, $value in $shadows {
+  @each $name, $value in $box-shadows {
     --#{$prefix}#{$name}: #{$value};
   }
 }

src/scss/ui/_avatars.scss

@@ -1,7 +1,7 @@
 .avatar {
   --#{$prefix}avatar-size: #{$avatar-size};
   --#{$prefix}avatar-bg: #{$avatar-bg};
-  --#{$prefix}avatar-shadow: #{$shadow-inset};
+  --#{$prefix}avatar-shadow: #{$box-shadow-inset};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);

src/scss/ui/_button-group.scss

@@ -1,5 +1,7 @@
 .btn-group,
 .btn-group-vertical {
+  box-shadow: $input-box-shadow;
+
   > .btn-check:checked + .btn,
   > .btn:active,
   > .btn.active {

src/scss/ui/_buttons.scss

@@ -2,15 +2,13 @@
 // Button
 //
 .btn {
-  --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-icon-size: #{$icon-size};
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: #{$btn-border-color};
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
-  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-bg};
   --#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -90,7 +88,7 @@
     --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
   }
 
   .btn-outline-#{$color} {

src/scss/ui/_cards.scss

@@ -11,7 +11,7 @@
 
     &:hover {
       text-decoration: none;
-      box-shadow: $shadow-card-hover;
+      box-shadow: $box-shadow-card-hover;
     }
   }
 

src/scss/ui/_carousel.scss

@@ -35,7 +35,7 @@
     background: no-repeat center/cover;
     border: 0;
     border-radius: var(--#{$prefix}border-radius);
-    box-shadow: $shadow;
+    box-shadow: $box-shadow;
     margin: 0 $carousel-indicator-spacer;
     opacity: $carousel-indicator-thumb-opacity;
 

src/scss/ui/_forms.scss

@@ -161,6 +161,16 @@ Form help
 /**
 Input group
  */
+.input-group {
+  box-shadow: $input-box-shadow;
+  border-radius: $input-border-radius;
+
+  .form-control,
+  .btn {
+    box-shadow: none;
+  }
+}
+
 .input-group-link {
   font-size: $h5-font-size;
 }

src/scss/ui/forms/_form-check.scss

@@ -24,6 +24,7 @@ Form check
 .form-check-input {
   background-size: $form-check-input-width;
   margin-top: ($form-check-min-height - $form-check-input-width) * .5;
+  box-shadow: $form-check-input-box-shadow;
   
   .form-switch & {
     @include transition(background-color$transition-time, background-position $transition-time);

src/scss/ui/forms/_form-selectgroup.scss

@@ -43,6 +43,7 @@ Select group
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
   border-radius: 3px;
+  box-shadow: $input-box-shadow;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
@@ -60,6 +61,7 @@ Select group
   height: $form-check-input-width;
   border: $form-check-input-border;
   vertical-align: middle;
+  box-shadow: $form-check-input-box-shadow;
 
   .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label & {
     border-radius: $form-check-input-border-radius;

src/scss/vendor/_litepicker.scss

@@ -50,9 +50,13 @@
     }
   }
 
-  .datepicker-inline & .container__months {
+  .datepicker-inline & {
-    box-shadow: none;
+    box-shadow: $input-box-shadow;
-    background-color: var(--#{$prefix}bg-forms);
+    
+    .container__months {
+      box-shadow: none;
+      background-color: var(--#{$prefix}bg-forms);
+    }
   }
 }
 

src/scss/vendor/_tom-select.scss

@@ -23,6 +23,13 @@ $input-border-width: 1px;
 }
 
 .ts-wrapper {
+  .form-control, 
+  .form-select,
+  &.form-control, 
+  &.form-select {
+    box-shadow: $input-box-shadow; 
+  }
+
   &.is-invalid,
   &.is-valid {
     .ts-control {