Improve design for checkboxes, switches and radios

src/assets/oruga-tailwindcss.css

@@ -246,18 +246,17 @@ body {
 }
 
 /* Radio */
-.radio {
+.o-radio__input:checked {
-  @apply mr-2;
+  /* override a CSS prop (background-image url on `[type="radio"]:checked`) set by default by tailwind 
+  that alter the oruga o-radio design */
+  background-image:none;
 }
-.form-radio {
+/* Checkbox */
-  @apply bg-none text-primary border-primary accent-primary;
+.o-checkbox__input:checked {
-}
+  /* We want the current color for the checked mark
-.radio-label {
+  instead of oruga default white */
-  @apply pl-2;
+  border-color: transparent;
-}
+  background-color: currentColor;
-
-.o-field--addons .o-radio:not(:only-child) input {
-  @apply rounded-full;
 }
 
 /* Editor */

src/assets/tailwind.css

@@ -28,6 +28,23 @@
   }
 }
 
+:root {
+
+    /* TODO Try to change the primary color but without success */
+    --oruga-primary: #1e7d97;
+    --oruga-variant-primary: #1e7d97;
+
+    /* So force change the primary color for each component */
+    --oruga-radio-active-background-color: #1e7d97;
+    --oruga-switch-checked-background: #1e7d97;
+
+    /* We want transparent background for buttons 
+    instead of oruga default primay color */
+    --oruga-checkbox-background-color: white;
+    --oruga-checkbox-active-background-color: white;
+
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --oruga-variant-primary: #1e7d97;

src/oruga-config.ts

@@ -95,12 +95,6 @@ export const orugaConfig = {
   select: {
     selectClass: "select",
   },
-  radio: {
-    rootClass: "radio",
-    inputCheckedClass: "radio-checked",
-    inputClass: "form-radio",
-    labelClass: "radio-label",
-  },
   notification: {
     rootClass: "notification",
     variantClass: (variant: string) => {