adding

dist/plain-ui.css

@@ -4740,38 +4740,6 @@ h6, .h6 {
  *
  *
  */
-.text-color-primary {
-  color: #3e3e3e !important;
-}
-
-.text-color-white {
-  color: #fff !important;
-}
-
-.fill-primary {
-  fill: #3e3e3e !important;
-}
-
-.fill-white {
-  fill: #fff !important;
-}
-
-.border-color-primary {
-  border-color: #3e3e3e !important;
-}
-
-.border-color-white {
-  border-color: #fff !important;
-}
-
-.background-color-primary {
-  background-color: #3e3e3e !important;
-}
-
-.background-color-white {
-  background-color: #fff !important;
-}
-
 /**
  *  floating
  *
@@ -4839,10 +4807,6 @@ h6, .h6 {
   margin: 0 !important;
 }
 
-.h-100 {
-  height: 100% !important;
-}
-
 /**
  *
  *

src/scss/helpers/_colors.scss

@@ -0,0 +1,23 @@
+@each $name, $color in $plain-ui__colors {
+    .text-color-#{$name} {
+        color: var(#{$color});
+    }
+}
+
+@each $name, $color in $plain-ui__colors {
+    .fill-#{$name} {
+        fill: var(#{$color});
+    }
+}
+
+@each $name, $color in $plain-ui__colors {
+    .border-color-#{$name} {
+        border-color: var(#{$color});
+    }
+}
+
+@each $name, $color in $plain-ui__colors {
+    .background-color-#{$name} {
+        background-color: var(#{$color});
+    }
+}

src/scss/helpers/_core.scss

@@ -127,29 +127,7 @@
      *
      */
 
-    @each $name, $color in $plain-ui__colors {
-        .text-color-#{$name} {
-            color: $color !important;
-        }
-    }
-
-    @each $name, $color in $plain-ui__colors {
-        .fill-#{$name} {
-            fill: $color !important;
-        }
-    }
-
-    @each $name, $color in $plain-ui__colors {
-        .border-color-#{$name} {
-            border-color: $color !important;
-        }
-    }
 
-    @each $name, $color in $plain-ui__colors {
-        .background-color-#{$name} {
-            background-color: $color !important;
-        }
-    }
 
     /**
      *  floating
@@ -217,10 +195,6 @@
         margin: 0 !important;
     }
 
-    .h-100 {
-        height: 100% !important;
-    }
-
     /**
      *
      *