diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_mixins.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_mixins.import.less
new file mode 100644
index 00000000000..86ba3ad09cb
--- /dev/null
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_mixins.import.less
@@ -0,0 +1,98 @@
+ .custom-scroll(@background, @thumb, @width: 8px, @height: 8px) {
+	-webkit-overflow-scrolling: touch;
+	&::-webkit-scrollbar {
+		height: @height;
+		width: @width;
+		background: @background;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-color: @thumb;
+		-webkit-border-radius: 50px;
+	}
+	&::-webkit-scrollbar-corner {
+		background-color: @background;
+	}
+}
+
+.gradient(@startColor: #eee, @endColor: white) {
+	background-color: @startColor;
+	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
+	background: -webkit-linear-gradient(top, @startColor, @endColor);
+	background: -moz-linear-gradient(top, @startColor, @endColor);
+	background: -ms-linear-gradient(top, @startColor, @endColor);
+	background: -o-linear-gradient(top, @startColor, @endColor);
+}
+
+.input-shade(@color, @bg) {
+	input,
+	select,
+	textarea {
+		color: @color;
+		background-color: transparent;
+		border-color: mix(contrast(@bg), @bg, 10%);
+		border-style: solid;
+		&::placeholder {
+			color: mix(@color, @bg, 75%);
+		}
+		&[disabled] {
+			background-color: mix(contrast(@bg), @bg, 10%);
+		}
+	}
+	.diabled label,
+	[disabled] label {
+		color: mix(@color, @bg, 75%);
+	}
+	.-autocomplete-container {
+		background-color: mix(contrast(@bg), @bg, 10%);
+	}
+	.-autocomplete-item.selected {
+		background-color: mix(contrast(@bg), @bg, 20%);
+	}
+	input[type="button"],
+	input[type="submit"] {
+		color: @color;
+		background: mix(contrast(@bg), @bg, 10%);
+		border-color: mix(contrast(@bg), @bg, 10%);
+	}
+}
+
+.blink(@color) {
+	animation-duration: 1000ms;
+	animation-name: blink;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	@keyframes blink {
+		from {
+			color: @color;
+		}
+		to {
+			opacity: inherit;
+		}
+	}
+	@-webkit-keyframes blink {
+		from {
+			color: @color;
+		}
+		to {
+			color: inherit;
+		}
+	}
+}
+
+.linkColors(@color, @hover) {
+	transition: color 0.2s ease-out;
+	color: @color;
+	&:hover {
+		color: @hover;
+	}
+}
+
+.buttonColors(@color, @bg) {
+	transition: color 0.2s ease-out, background-color 0.2s ease-out;
+	color: @color;
+	background-color: @bg;
+	&:hover {
+		color: lighten(@color, 10%);
+		background-color: darken(@bg, 5%);
+	}
+}
diff --git a/packages/rocketchat-theme/package.js b/packages/rocketchat-theme/package.js
index 012f88e111b..b1df8c6af0d 100644
--- a/packages/rocketchat-theme/package.js
+++ b/packages/rocketchat-theme/package.js
@@ -25,6 +25,7 @@ Package.onUse(function(api) {
 
 
 	api.addAssets('assets/stylesheets/global/_variables.less', 'server');
+	api.addAssets('assets/stylesheets/utils/_mixins.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_colors.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_keyframes.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_lesshat.import.less', 'server');