Merge radio buttons

ds-ml-css/components/radio-button-checkbox.scss

@@ -12,6 +12,7 @@
   /* status of radio-button or checkbox field*/
   .status {
     display: flex;
+    font-size: var(--ml-small-font-size);
     gap: var(--ml-small-px);
   }
 
@@ -76,11 +77,11 @@
 .rich-radio-button {
   display: block;
   position: relative;
-  padding-left: calc(var(--ml-radio-button-size) + 32px);
+  padding-left: calc(var(--ml-radio-button-size) + 16px);
   padding-top: var(--ml-small-px);
   padding-bottom: var(--ml-small-px);
   padding-right: var(--ml-small-px);
-  margin-bottom: var(--ml-xxlarge-px);
+  margin-bottom: var(--ml-xxxlarge-px);
   cursor: pointer;
   font-size: var(--ml-medium-font-size);
   -webkit-user-select: none;
@@ -114,7 +115,7 @@
   .checkbox-wrapper {
     position: absolute;
     top: 0;
-    left: 20px;
+    left: 3px;
     height: var(--ml-radio-button-size);
     width: var(--ml-radio-button-size);
     padding: 3px;
@@ -165,7 +166,7 @@
   }
 
   &.radio-button-small {
-    padding-left: calc(var(--ml-small-radio-button-size) + 32px);
+    padding-left: calc(var(--ml-small-radio-button-size) + 16px);
 
     .radio-wrapper {
       height: var(--ml-small-radio-button-size);
@@ -185,7 +186,7 @@
   }
 
   &.checkbox-small {
-    padding-left: calc(var(--ml-small-radio-button-size) + 32px);
+    padding-left: calc(var(--ml-small-radio-button-size) + 16px);
 
     .checkbox-wrapper {
       height: var(--ml-small-radio-button-size);
@@ -232,13 +233,13 @@
 .radio-add-text {
   position: absolute;
   top: var(--ml-radio-button-size);
-  left: calc(var(--ml-radio-button-size) + 32px);
+  left: calc(var(--ml-radio-button-size) + 16px);
   color: var(--ml-secondary);
   font-size: 12px;
 }
 
 .rich-radio-button .radio-add-text {
-  top: calc(var(--ml-radio-button-size) + 32px);
+  top: calc(var(--ml-radio-button-size) + 16px);
 }
 
 /* Focus */

ds-ml-css/ds-ml-color-var.scss

@@ -107,7 +107,7 @@ body.dark {
   --ml-warning: var(--ml-o300);
   --ml-success: var(--ml-g300);
   --ml-info: var(--ml-b300);
-  --ml-error: var(--ml-r300);
+  --ml-error: var(--ml-r500);
   --ml-disabled: var(--ml-n700);
 
   --ml-neutral: var(--ml-n850);

ds-ml-css/ds-ml-icons.scss

@@ -20,8 +20,8 @@
     top: 4px;
     width: 6px;
     height: 3px;
-    border-left: 2px solid #fff;
-    border-bottom: 2px solid #fff;
+    border-left: 2px solid var(--ml-text-color);
+    border-bottom: 2px solid var(--ml-text-color);
     transform: rotate(-45deg);
     border-radius: 0 0 2px 2px;
   }
@@ -49,7 +49,15 @@
     top: 3px;
     width: 2px;
     height: 8px;
-    background: linear-gradient(to bottom, #fff 0 60%, #fff 60%, transparent 60%, transparent 75%, #fff 75%, #fff 100%);
+    background: linear-gradient(
+      to bottom,
+      var(--ml-text-color) 0 60%,
+      var(--ml-text-color) 60%,
+      transparent 60%,
+      transparent 75%,
+      var(--ml-text-color) 75%,
+      var(--ml-text-color) 100%
+    );
     border-radius: 1px;
   }
 }
@@ -76,7 +84,13 @@
     top: 3px;
     width: 2px;
     height: 8px;
-    background: linear-gradient(to bottom, #fff 0 20%, #fff 20% 30%, transparent 30% 35%, #fff 35% 100%);
+    background: linear-gradient(
+      to bottom,
+      var(--ml-text-color) 0 20%,
+      var(--ml-text-color) 20% 30%,
+      transparent 30% 35%,
+      var(--ml-text-color) 35% 100%
+    );
     border-radius: 1px;
   }
 }
@@ -107,7 +121,12 @@
     top: 8px;
     width: 2px;
     height: 6px;
-    background: linear-gradient(to bottom, #fff 0 65%, transparent 65% 80%, #fff 80% 100%);
+    background: linear-gradient(
+      to bottom,
+      var(--ml-text-color) 0 65%,
+      transparent 65% 80%,
+      var(--ml-text-color) 80% 100%
+    );
     border-radius: 1px;
   }
 }

ds-ml-css/ds-ml-theme.scss

 body.theme-purple.light {
+  --ml-text-color: #ffffff;
+
   --ml-text-button-primary: #ffffff;
   --ml-text-button-primary-hover: #ffffff;
   --ml-text-button-primary-disabled: #8993a4;
@@ -23,6 +25,8 @@ body.theme-purple.light {
 }
 
 body.theme-purple.dark {
+  --ml-text-color: #1b1c22;
+
   --ml-text-button-primary: #1b1c22;
   --ml-text-button-primary-hover: #1b1c22;
   --ml-text-button-primary-disabled: #8993a4;
@@ -48,6 +52,8 @@ body.theme-purple.dark {
 
 // Maquette à faire pour le theme red
 body.theme-red.light {
+  --ml-text-color: #ffffff;
+
   --ml-text-button-primary: #ffffff;
   --ml-text-button-primary-hover: #ffffff;
   --ml-text-button-primary-disabled: #8993a4;
@@ -72,6 +78,8 @@ body.theme-red.light {
 }
 
 body.theme-red.dark {
+  --ml-text-color: #1b1c22;
+
   --ml-text-button-primary: #1b1c22;
   --ml-text-button-primary-hover: #1b1c22;
   --ml-text-button-primary-disabled: #8993a4;

ds-ml-css/ds-ml-var.scss

@@ -6,6 +6,7 @@
   --ml-large-px: 12px;
   --ml-xlarge-px: 16px;
   --ml-xxlarge-px: 20px;
+  --ml-xxxlarge-px: 24px;
 
   /* FONT SIZE */
   --ml-xsmall-font-size: 12px;