diff --git a/less/_typography.less b/less/_typography.less
new file mode 100644
index 00000000..50802997
--- /dev/null
+++ b/less/_typography.less
@@ -0,0 +1,15 @@
+.text-warning {
+  color: @btn-warning;
+}
+.text-primary {
+  color: @btn-primary;
+}
+.text-danger {
+  color: @btn-danger;
+}
+.text-success {
+  color: @btn-success;
+}
+.text-info {
+  color: @btn-info;
+}
diff --git a/less/material.less b/less/material.less
index 0fb14fe2..50fb5869 100644
--- a/less/material.less
+++ b/less/material.less
@@ -89,21 +89,7 @@ legend {
 @import "_progress.less";
 
 // Typography
-.text-warning {
-  color: @btn-warning;
-}
-.text-primary {
-  color: @btn-primary;
-}
-.text-danger {
-  color: @btn-danger;
-}
-.text-success {
-  color: @btn-success;
-}
-.text-info {
-  color: @btn-info;
-}
+@import "_typography.less";
 
 @import "_tabs.less";
 
diff --git a/sass/_typography.scss b/sass/_typography.scss
new file mode 100644
index 00000000..bb421b8b
--- /dev/null
+++ b/sass/_typography.scss
@@ -0,0 +1,15 @@
+.text-warning {
+    color: $btn-warning;
+}
+.text-primary {
+    color: $btn-primary;
+}
+.text-danger {
+    color: $btn-danger;
+}
+.text-success {
+    color: $btn-success;
+}
+.text-info {
+    color: $btn-info;
+}
diff --git a/sass/material.scss b/sass/material.scss
index 2561401c..3a0c2360 100644
--- a/sass/material.scss
+++ b/sass/material.scss
@@ -85,21 +85,7 @@ legend {
 @import "_cards.scss";
 
 // Typography
-.text-warning {
-    color: $btn-warning;
-}
-.text-primary {
-    color: $btn-primary;
-}
-.text-danger {
-    color: $btn-danger;
-}
-.text-success {
-    color: $btn-success;
-}
-.text-info {
-    color: $btn-info;
-}
+@import "_typography.scss";
 
 @import "_tabs.scss";