From 47978aee1c6ca551a0bf020cae7792c9bf0713e1 Mon Sep 17 00:00:00 2001
From: Robert Jaros <rjaros@finn.pl>
Date: Sun, 1 Dec 2024 12:17:30 +0100
Subject: [PATCH] Add "kv-" prefix to internal CSS classes with !important flag
 (#545)

---
 kvision-assets/src/css/style.css              | 26 ++++++++++++-------
 .../io/kvision/form/upload/BootstrapUpload.kt |  2 +-
 .../kotlin/io/kvision/form/time/DateTime.kt   |  2 +-
 .../test/io/kvision/form/time/DateTimeSpec.kt |  2 +-
 .../io/kvision/form/number/ImaskNumeric.kt    |  2 +-
 .../io/kvision/onsenui/form/OnsCheckBox.kt    |  2 +-
 .../io/kvision/onsenui/form/OnsDateTime.kt    |  2 +-
 .../io/kvision/onsenui/form/OnsNumber.kt      |  2 +-
 .../io/kvision/onsenui/form/OnsRadio.kt       |  2 +-
 .../io/kvision/onsenui/form/OnsRadioGroup.kt  |  2 +-
 .../io/kvision/onsenui/form/OnsRange.kt       |  2 +-
 .../io/kvision/onsenui/form/OnsSelect.kt      |  2 +-
 .../io/kvision/onsenui/form/OnsSwitch.kt      |  2 +-
 .../io/kvision/form/select/SelectRemote.kt    |  2 +-
 .../io/kvision/form/select/TomSelectRemote.kt |  2 +-
 .../io/kvision/form/select/TomSelect.kt       |  2 +-
 .../kotlin/io/kvision/form/check/CheckBox.kt  |  2 +-
 .../kvision/form/check/GenericRadioGroup.kt   |  2 +-
 .../kotlin/io/kvision/form/check/Radio.kt     |  2 +-
 .../io/kvision/form/check/TriStateCheckBox.kt |  2 +-
 .../kotlin/io/kvision/form/number/Numeric.kt  |  2 +-
 .../kotlin/io/kvision/form/number/Range.kt    |  2 +-
 .../kotlin/io/kvision/form/number/Spinner.kt  |  2 +-
 .../kotlin/io/kvision/form/select/Select.kt   |  2 +-
 .../io/kvision/form/text/AbstractText.kt      |  2 +-
 .../kotlin/io/kvision/form/upload/Upload.kt   |  2 +-
 src/jsMain/kotlin/io/kvision/html/Tag.kt      | 13 ++++++----
 .../test/io/kvision/form/text/TextSpec.kt     |  4 +--
 28 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/kvision-assets/src/css/style.css b/kvision-assets/src/css/style.css
index 5d9a24d1ca4..a681e9a95b0 100644
--- a/kvision-assets/src/css/style.css
+++ b/kvision-assets/src/css/style.css
@@ -1,32 +1,32 @@
-.text-justify {
+.kv-text-justify {
     text-align: justify !important;
 }
 
-.text-left {
+.kv-text-left {
     text-align: left !important;
 }
 
-.text-start {
-    text-align: left !important;
+.kv-text-start {
+    text-align: start !important;
 }
 
-.text-right {
+.kv-text-right {
     text-align: right !important;
 }
 
-.text-end {
-    text-align: right !important;
+.kv-text-end {
+    text-align: end !important;
 }
 
-.text-center {
+.kv-text-center {
     text-align: center !important;
 }
 
-.text-nowrap {
+.kv-text-nowrap {
     white-space: nowrap !important;
 }
 
-.text-danger {
+.kv-text-danger {
     color: var(--bs-danger, #dc3545) !important;
 }
 
@@ -810,6 +810,12 @@ label.required-label + ons-input > span.text-input__label::after {
     border-top: 1px solid #888888;
 }
 
+.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control {
+    padding-left: 0.5rem;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
 .toastify {
     background-image: unset;
     background-color: blue;
diff --git a/kvision-modules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt b/kvision-modules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt
index 1fa044467be..0c8bf6b5d2d 100644
--- a/kvision-modules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt
+++ b/kvision-modules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt
@@ -255,7 +255,7 @@ open class BootstrapUpload(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt b/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt
index 2fae8a80519..f325e909be3 100644
--- a/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt
+++ b/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt
@@ -319,7 +319,7 @@ open class DateTime(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt b/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt
index 566aca2c0ce..a4e697af76d 100644
--- a/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt
+++ b/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt
@@ -61,7 +61,7 @@ class DateTimeSpec : DomSpec {
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group kv-mb-3 text-danger\"><label class=\"form-label\" for=\"${id}_input\">Label</label><div class=\"input-group date is-invalid\" data-td-target-input=\"nearest\" data-td-target-toggle=\"nearest\" id=\"$id\"><input class=\"form-control is-invalid\" data-td-target=\"#$id\" id=\"${id}_input\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" type=\"text\" value=\"$datastr\"><span class=\"input-group-text\" data-td-target=\"#$id\" data-td-toggle=\"datetimepicker\"><span class=\"fas fa-calendar-alt\"></span></span></div><div class=\"invalid-feedback\">Validation Error</div></div>",
+                "<div class=\"form-group kv-mb-3 kv-text-danger\"><label class=\"form-label\" for=\"${id}_input\">Label</label><div class=\"input-group date is-invalid\" data-td-target-input=\"nearest\" data-td-target-toggle=\"nearest\" id=\"$id\"><input class=\"form-control is-invalid\" data-td-target=\"#$id\" id=\"${id}_input\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" type=\"text\" value=\"$datastr\"><span class=\"input-group-text\" data-td-target=\"#$id\" data-td-toggle=\"datetimepicker\"><span class=\"fas fa-calendar-alt\"></span></span></div><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct date time input form control with validation error"
             )
diff --git a/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt b/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt
index 787e69c49c0..6a02f0b8302 100644
--- a/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt
+++ b/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt
@@ -237,7 +237,7 @@ open class ImaskNumeric(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt
index 6585eb7f64e..3ca786ca5be 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt
@@ -120,7 +120,7 @@ open class OnsCheckBox(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt
index 296bb852427..0fae3575ae6 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt
@@ -184,7 +184,7 @@ open class OnsDateTime(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt
index 88defec9bfb..4168b47004f 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt
@@ -212,7 +212,7 @@ open class OnsNumber(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt
index 830dc743ba6..98b9f6a6d5d 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt
@@ -133,7 +133,7 @@ open class OnsRadio(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt
index fddc360aa32..b9c16e68093 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt
@@ -157,7 +157,7 @@ open class OnsRadioGroup(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt
index 341459edc0c..9e54e248c88 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt
@@ -171,7 +171,7 @@ open class OnsRange(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt
index 4f0e8eeeee9..4e4352a341c 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt
@@ -176,7 +176,7 @@ open class OnsSelect(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt
index 6372c80faa8..fad2e522557 100644
--- a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt
+++ b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt
@@ -121,7 +121,7 @@ open class OnsSwitch(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt b/kvision-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt
index 1b4a4108a93..f6950d69bc0 100644
--- a/kvision-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt
+++ b/kvision-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt
@@ -164,7 +164,7 @@ open class SelectRemote<out T : Any>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt b/kvision-modules/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt
index 46d5acb9086..12886b3f311 100644
--- a/kvision-modules/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt
+++ b/kvision-modules/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt
@@ -209,7 +209,7 @@ open class TomSelectRemote<out T : Any>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt b/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt
index 351a8785e4b..46c7d4a5870 100644
--- a/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt
+++ b/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt
@@ -206,7 +206,7 @@ open class TomSelect(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt b/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt
index 7dac219183e..240c9a44519 100644
--- a/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt
+++ b/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt
@@ -187,7 +187,7 @@ open class CheckBox(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt b/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt
index dc5f76230cf..0cf2852ae91 100644
--- a/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt
+++ b/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt
@@ -161,7 +161,7 @@ open class GenericRadioGroup<T>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
         if (inline) {
             classSetBuilder.add("kv-radiogroup-inline")
diff --git a/src/jsMain/kotlin/io/kvision/form/check/Radio.kt b/src/jsMain/kotlin/io/kvision/form/check/Radio.kt
index b684352a39f..07fb712d098 100644
--- a/src/jsMain/kotlin/io/kvision/form/check/Radio.kt
+++ b/src/jsMain/kotlin/io/kvision/form/check/Radio.kt
@@ -188,7 +188,7 @@ open class Radio(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt b/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt
index b3f5ec91174..98ed5065285 100644
--- a/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt
+++ b/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt
@@ -198,7 +198,7 @@ open class TriStateCheckBox(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt b/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt
index bb4aa61ead4..895cabbca3d 100644
--- a/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt
+++ b/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt
@@ -195,7 +195,7 @@ open class Numeric(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/number/Range.kt b/src/jsMain/kotlin/io/kvision/form/number/Range.kt
index e43355821c3..362016feeaa 100644
--- a/src/jsMain/kotlin/io/kvision/form/number/Range.kt
+++ b/src/jsMain/kotlin/io/kvision/form/number/Range.kt
@@ -167,7 +167,7 @@ open class Range(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt b/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt
index 289a3db1cd1..a8617078215 100644
--- a/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt
+++ b/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt
@@ -183,7 +183,7 @@ open class Spinner(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/select/Select.kt b/src/jsMain/kotlin/io/kvision/form/select/Select.kt
index b0a36854ba0..519cfba8709 100644
--- a/src/jsMain/kotlin/io/kvision/form/select/Select.kt
+++ b/src/jsMain/kotlin/io/kvision/form/select/Select.kt
@@ -194,7 +194,7 @@ open class Select(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt b/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt
index 4eeb36c5de0..8c656903918 100644
--- a/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt
+++ b/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt
@@ -171,7 +171,7 @@ abstract class AbstractText(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt b/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt
index 718b5bd5078..c50d34b3084 100644
--- a/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt
+++ b/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt
@@ -158,7 +158,7 @@ open class Upload(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 
diff --git a/src/jsMain/kotlin/io/kvision/html/Tag.kt b/src/jsMain/kotlin/io/kvision/html/Tag.kt
index 759121953bf..1580d7dc59f 100644
--- a/src/jsMain/kotlin/io/kvision/html/Tag.kt
+++ b/src/jsMain/kotlin/io/kvision/html/Tag.kt
@@ -158,11 +158,14 @@ enum class TAG(internal val tagName: String) {
  * CSS align attributes.
  */
 enum class Align(override val className: String) : CssClass {
-    LEFT("text-start"),
-    CENTER("text-center"),
-    RIGHT("text-end"),
-    WRAP("text-wrap"),
-    NOWRAP("text-nowrap")
+    LEFT("kv-text-left"),
+    START("kv-text-start"),
+    CENTER("kv-text-center"),
+    RIGHT("kv-text-right"),
+    END("kv-text-end"),
+    WRAP("kv-text-wrap"),
+    NOWRAP("kv-text-nowrap"),
+    JUSTIFY("kv-text-justify"),
 }
 
 /**
diff --git a/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt b/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt
index a8c60ce44da..0e8a11c00c2 100644
--- a/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt
+++ b/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt
@@ -49,11 +49,11 @@ class TextSpec : DomSpec {
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group kv-mb-3 text-danger\"><label class=\"form-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>",
+                "<div class=\"form-group kv-mb-3 kv-text-danger\"><label class=\"form-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct input form control with validation error"
             )
         }
     }
 
-}
\ No newline at end of file
+}