From 4a861c25778d2143a3fca2575752eb0a86a46d39 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 9 May 2020 18:24:32 +0300
Subject: [PATCH] Cleanup checkbox and radio

---
 public/themes/luna-amber/theme.css         | 10 +++-------
 public/themes/luna-green/theme.css         | 10 +++-------
 public/themes/luna-pink/theme.css          | 10 +++-------
 public/themes/nova-colored/theme.css       | 10 +++-------
 public/themes/nova-dark/theme.css          | 10 +++-------
 public/themes/nova-light/theme.css         | 10 +++-------
 public/themes/nova-vue/theme.css           | 10 +++-------
 public/themes/rhea/theme.css               | 10 +++-------
 public/themes/saga-blue/theme.css          | 10 +++-------
 public/themes/saga-cyan/theme.css          | 10 +++-------
 public/themes/saga-deeppurple/theme.css    | 10 +++-------
 public/themes/saga-green/theme.css         | 10 +++-------
 public/themes/saga-indigo/theme.css        | 10 +++-------
 public/themes/saga-orange/theme.css        | 10 +++-------
 public/themes/saga-purple/theme.css        | 10 +++-------
 public/themes/saga-teal/theme.css          | 10 +++-------
 public/themes/vela-blue/theme.css          | 10 +++-------
 public/themes/vela-cyan/theme.css          | 10 +++-------
 public/themes/vela-deeppurple/theme.css    | 10 +++-------
 public/themes/vela-green/theme.css         | 10 +++-------
 public/themes/vela-indigo/theme.css        | 10 +++-------
 public/themes/vela-orange/theme.css        | 10 +++-------
 public/themes/vela-purple/theme.css        | 10 +++-------
 public/themes/vela-teal/theme.css          | 10 +++-------
 src/components/checkbox/Checkbox.css       | 10 ----------
 src/components/radiobutton/RadioButton.css |  9 ---------
 26 files changed, 72 insertions(+), 187 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index a8612fdff..328cfe15f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212121;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #FFB300;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFB300;
   background: #FFB300;
-  color: #212121;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #FF8F00;
@@ -864,18 +864,14 @@
   border-color: #FFB300;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212121;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #FFB300;
   background: #FFB300;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212121;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #FF8F00;
   background: #FF8F00;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 91a687410..f36cd30b2 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #1ea04c;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #1ea04c;
   background: #1ea04c;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #18803c;
@@ -864,18 +864,14 @@
   border-color: #1ea04c;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #1ea04c;
   background: #1ea04c;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #18803c;
   background: #18803c;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 659b6f545..de22cd0ec 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #cc285c;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #cc285c;
   background: #cc285c;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #a32049;
@@ -864,18 +864,14 @@
   border-color: #cc285c;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #cc285c;
   background: #cc285c;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #a32049;
   background: #a32049;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 088fa8130..9d3dfd3a2 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #212121;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
@@ -864,18 +864,14 @@
   border-color: #007ad9;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
   background: #005b9f;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 490d87ef3..af1360688 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #212121;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
@@ -864,18 +864,14 @@
   border-color: #007ad9;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
   background: #005b9f;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index b14f35a7d..92cb89d61 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #212121;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
@@ -864,18 +864,14 @@
   border-color: #007ad9;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #005b9f;
   background: #005b9f;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index c85b64ac9..afe4f94f6 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #212121;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #41b883;
   background: #41b883;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #246749;
@@ -864,18 +864,14 @@
   border-color: #41b883;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #41b883;
   background: #41b883;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #246749;
   background: #246749;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index d1c0da9e9..0d751ab51 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #a6a6a6;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #7B95A3;
   background: #7B95A3;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #617c8a;
@@ -864,18 +864,14 @@
   border-color: #7B95A3;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #7B95A3;
   background: #7B95A3;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #617c8a;
   background: #617c8a;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 86e501af8..22ba29a44 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #2196F3;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #2196F3;
   background: #2196F3;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #1976D2;
@@ -864,18 +864,14 @@
   border-color: #2196F3;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #2196F3;
   background: #2196F3;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #1976D2;
   background: #1976D2;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index 92baa651b..d34a8b4ad 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #00ACC1;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #00ACC1;
   background: #00ACC1;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #00838F;
@@ -864,18 +864,14 @@
   border-color: #00ACC1;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #00ACC1;
   background: #00ACC1;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #00838F;
   background: #00838F;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 32a1c8ecd..20034000b 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #673AB7;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #673AB7;
   background: #673AB7;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #512DA8;
@@ -864,18 +864,14 @@
   border-color: #673AB7;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #673AB7;
   background: #673AB7;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #512DA8;
   background: #512DA8;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 40bf3dcf0..32e8d72de 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #4CAF50;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #4CAF50;
   background: #4CAF50;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #388E3C;
@@ -864,18 +864,14 @@
   border-color: #4CAF50;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #4CAF50;
   background: #4CAF50;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #388E3C;
   background: #388E3C;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index fa1f29d91..45983c17d 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #3F51B5;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #3F51B5;
   background: #3F51B5;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #303F9F;
@@ -864,18 +864,14 @@
   border-color: #3F51B5;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #3F51B5;
   background: #3F51B5;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #303F9F;
   background: #303F9F;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index ac75921b7..437df7988 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #FFC107;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFC107;
   background: #FFC107;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #FFA000;
@@ -864,18 +864,14 @@
   border-color: #FFC107;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #FFC107;
   background: #FFC107;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #FFA000;
   background: #FFA000;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 2fd50c5d4..ed2b2196f 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #9C27B0;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9C27B0;
   background: #9C27B0;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #7B1FA2;
@@ -864,18 +864,14 @@
   border-color: #9C27B0;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #9C27B0;
   background: #9C27B0;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #7B1FA2;
   background: #7B1FA2;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index 6e0a4608b..d9a31dbd4 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #009688;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #009688;
   background: #009688;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #00796B;
@@ -864,18 +864,14 @@
   border-color: #009688;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #009688;
   background: #009688;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #00796B;
   background: #00796B;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 2dd327d98..083ec4924 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #64B5F6;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #64B5F6;
   background: #64B5F6;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #2196F3;
@@ -864,18 +864,14 @@
   border-color: #64B5F6;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #64B5F6;
   background: #64B5F6;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #2196F3;
   background: #2196F3;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 1d00fd575..d3e21b2af 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #4DD0E1;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #4DD0E1;
   background: #4DD0E1;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #00BCD4;
@@ -864,18 +864,14 @@
   border-color: #4DD0E1;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #4DD0E1;
   background: #4DD0E1;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #00BCD4;
   background: #00BCD4;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index de035185f..1389d6364 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #9575CD;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9575CD;
   background: #9575CD;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #673AB7;
@@ -864,18 +864,14 @@
   border-color: #9575CD;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #9575CD;
   background: #9575CD;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #673AB7;
   background: #673AB7;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index b33817c6b..87739373b 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #81C784;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #81C784;
   background: #81C784;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #4CAF50;
@@ -864,18 +864,14 @@
   border-color: #81C784;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #81C784;
   background: #81C784;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #4CAF50;
   background: #4CAF50;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index 30dde9414..e0ca61f21 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #7986CB;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #7986CB;
   background: #7986CB;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #3F51B5;
@@ -864,18 +864,14 @@
   border-color: #7986CB;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #7986CB;
   background: #7986CB;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #3F51B5;
   background: #3F51B5;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index b64874e65..6b156a7b4 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #FFD54F;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFD54F;
   background: #FFD54F;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #FFC107;
@@ -864,18 +864,14 @@
   border-color: #FFD54F;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #FFD54F;
   background: #FFD54F;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #FFC107;
   background: #FFC107;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 20c7cf65d..4a5659a97 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #BA68C8;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #BA68C8;
   background: #BA68C8;
-  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #9C27B0;
@@ -864,18 +864,14 @@
   border-color: #BA68C8;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #BA68C8;
   background: #BA68C8;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #9C27B0;
   background: #9C27B0;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index b42b37a52..a0dc58ac6 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -310,6 +310,7 @@
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
+  color: #212529;
 }
 .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
   border-color: #4DB6AC;
@@ -323,7 +324,6 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #4DB6AC;
   background: #4DB6AC;
-  color: #212529;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #009688;
@@ -864,18 +864,14 @@
   border-color: #4DB6AC;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 0.75rem;
   transition-duration: 0.2s;
-  border-radius: 50%;
+  color: #212529;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #4DB6AC;
   background: #4DB6AC;
 }
-.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212529;
-}
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #009688;
   background: #009688;
diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css
index 6c0d3a2b0..aa7995d3d 100755
--- a/src/components/checkbox/Checkbox.css
+++ b/src/components/checkbox/Checkbox.css
@@ -9,14 +9,4 @@
     display: flex;
     justify-content: center;
     align-items: center;
-}
-
-.p-checkbox-icon {
-    transform: scale(0);
-    transition-property: transform;
-}
-
-.p-checkbox-box.p-highlight .p-checkbox-icon ,
-.p-checkbox-box.p-indeterminate .p-checkbox-icon {
-    transform: scale(1);
 }
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.css b/src/components/radiobutton/RadioButton.css
index 4b675d992..99b88684a 100755
--- a/src/components/radiobutton/RadioButton.css
+++ b/src/components/radiobutton/RadioButton.css
@@ -9,13 +9,4 @@
     display: flex;
     justify-content: center;
     align-items: center;
-}
-
-.p-radiobutton-icon {
-    transform: scale(.25);
-    transition-property: transform;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: scale(1);
 }
\ No newline at end of file