rgba() instead of rgb(). Fixes #647

Author: oyejorge

src/plugins/remove_button/plugin.scss

@@ -15,7 +15,7 @@
 	}
 
 	.item .remove:hover {
-		background: rgb(0, 0, 0, 5%);
+		background: rgba(0, 0, 0, 5%);
 	}
 
 	&.disabled .item .remove:hover {

src/scss/_dropdown.scss

@@ -9,7 +9,7 @@
 	margin: 0.25rem 0 0;
 	border-top: 0 none;
 	box-sizing: border-box;
-	box-shadow: 0 1px 3px rgb(0, 0, 0, 10%);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 10%);
 	border-radius: 0 0 $select-border-radius $select-border-radius;
 
 	[data-selectable] {

src/scss/tom-select.bootstrap4.scss

@@ -11,7 +11,7 @@ $select-font-size: inherit !default;
 $select-line-height: $input-btn-line-height !default; // formerly line-height-computed
 
 $select-color-text: gray("800") !default; // $gray-800
-$select-color-highlight: rgb(255, 237, 40, 40%) !default;
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
 $select-color-input: $input-bg !default;
 $select-color-input-full: $input-bg !default;
 $select-color-input-error: map-get($state-invalid,'color') !default;
@@ -21,7 +21,7 @@ $select-color-item: #efefef !default;
 $select-color-item-border: $border-color !default;
 $select-color-item-active: $component-active-bg !default;
 $select-color-item-active-text: #fff !default;
-$select-color-item-active-border: rgb(0, 0, 0, 0%) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
 $select-color-optgroup: $dropdown-bg !default;
 $select-color-optgroup-text: $dropdown-header-color !default;
 $select-color-optgroup-border: $dropdown-divider-bg !default;
@@ -62,7 +62,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	background: $select-color-dropdown;
 	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
 	border-radius: $border-radius;
-	box-shadow: 0 6px 12px rgb(0, 0, 0, 17.5%);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
 }
 
 .#{$select-ns}-dropdown {

src/scss/tom-select.bootstrap5.scss

@@ -11,15 +11,15 @@ $select-font-size: inherit !default;
 $select-line-height: $input-btn-line-height !default; // formerly line-height-computed
 
 $select-color-text: $gray-800 !default;
-$select-color-highlight: rgb(255, 237, 40, 40%) !default;
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
 $select-color-input: $input-bg !default;
 $select-color-input-full: $input-bg !default;
 $select-color-disabled: $input-disabled-bg !default;
 $select-color-item: #efefef !default;
 $select-color-item-border: $border-color !default;
 $select-color-item-active: $component-active-bg !default;
 $select-color-item-active-text: #fff !default;
-$select-color-item-active-border: rgb(0, 0, 0, 0%) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
 $select-color-optgroup: $dropdown-bg !default;
 $select-color-optgroup-text: $dropdown-header-color !default;
 $select-color-optgroup-border: $dropdown-divider-bg !default;
@@ -88,7 +88,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	background: $select-color-dropdown;
 	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
 	border-radius: $border-radius;
-	box-shadow: 0 6px 12px rgb(0, 0, 0, 17.5%);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
 }
 
 .#{$select-ns}-dropdown {

src/scss/tom-select.default.scss

@@ -5,8 +5,8 @@ $select-color-item-border:			#0073bb;
 $select-color-item-active:			#92c836;
 $select-color-item-active-border:	#00578d;
 $select-width-item-border:			1px;
-$select-shadow-input:				inset 0 1px 1px rgb(0, 0, 0, 10%) !default;
-$select-shadow-input-focus:			inset 0 1px 2px rgb(0, 0, 0, 15%) !default;
+$select-shadow-input:				inset 0 1px 1px rgba(0, 0, 0, 10%) !default;
+$select-shadow-input-focus:			inset 0 1px 2px rgba(0, 0, 0, 15%) !default;
 
 @import "tom-select";
 @include ts-caret;
@@ -26,11 +26,11 @@ $select-shadow-input-focus:			inset 0 1px 2px rgb(0, 0, 0, 15%) !default;
 
 		.#{$select-ns}-control {
 			[data-value] {
-				text-shadow: 0 1px 0 rgb(0, 51, 83, 30%);
+				text-shadow: 0 1px 0 rgba(0, 51, 83, 30%);
 				border-radius: 3px;
 				@include selectize-vertical-gradient(#1da7ee, #178ee9);
 
-				box-shadow: 0 1px 0 rgb(0, 0, 0, 20%),inset 0 1px rgb(255, 255, 255, 3%);
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 20%),inset 0 1px rgba(255, 255, 255, 3%);
 
 				&.active {
 					@include selectize-vertical-gradient(#008fd8, #0075cf);
@@ -56,7 +56,7 @@ $select-shadow-input-focus:			inset 0 1px 2px rgb(0, 0, 0, 15%) !default;
 
 	&.single {
 		.#{$select-ns}-control {
-			box-shadow: 0 1px 0 rgb(0, 0, 0, 5%), inset 0 1px 0 rgb(255, 255, 255, 80%);
+			box-shadow: 0 1px 0 rgba(0, 0, 0, 5%), inset 0 1px 0 rgba(255, 255, 255, 80%);
 			@include selectize-vertical-gradient(#fefefe, #f2f2f2);
 		}
 	}

src/scss/tom-select.scss

@@ -20,7 +20,7 @@ $select-font-size:								13px !default;
 $select-line-height:							18px !default;
 $select-color-text:								#303030 !default;
 $select-color-border:							#d0d0d0 !default;
-$select-color-highlight:						rgb(125, 168, 208, 20%) !default;
+$select-color-highlight:						rgba(125, 168, 208, 20%) !default;
 $select-color-input:							#fff !default;
 $select-color-input-full:						$select-color-input !default;
 $select-color-disabled:							#fafafa !default;