feat: create control-item-standalone and -indicator to mutualise it for radio button

Author: MaxLardenois

scss/forms/_checkbox.scss

@@ -36,17 +36,7 @@
 //
 
 .checkbox-indicator {
-  flex-shrink: 0;
-  width: $form-check-input-width;
-  height: $form-check-input-width;
-  vertical-align: middle;
-  appearance: none;
-  cursor: $form-check-label-cursor;
-  background-color: $ouds-color-border-emphasized;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: $form-check-input-width;
-  print-color-adjust: exact;
+  @extend %control-item-indicator;
 
   &[type="checkbox"] {
     mask: escape-svg($ouds-checkbox-unselected-icon);
@@ -61,40 +51,16 @@
   }
 
   &:indeterminate {
-    background-color: $ouds-color-action-selected;
-
     &[type="checkbox"] {
       mask: escape-svg($ouds-checkbox-indeterminate-icon);
     }
   }
 
   &:checked {
-    background-color: $ouds-color-action-selected;
-
     &[type="checkbox"] {
       mask: escape-svg($ouds-checkbox-selected-icon);
     }
   }
-
-  &:hover {
-    background-color: $ouds-color-action-hover;
-  }
-
-  &:focus-visible {
-    background-color: $ouds-color-action-focus;
-  }
-
-  &:active {
-    background-color: $ouds-color-action-pressed;
-  }
-
-  // Use disabled attribute in addition of :disabled pseudo-class
-  // See: https://github.com/twbs/bootstrap/issues/28247
-  &[disabled],
-  &:disabled {
-    pointer-events: none;
-    background-color: $ouds-color-action-disabled;
-  }
 }
 
 //
@@ -114,12 +80,7 @@
 //
 
 .checkbox-standalone {
-  @extend .checkbox-item;
-  @extend .checkbox-label;
-  display: inline-flex;
-  gap: 0;
-  align-items: center;
-  justify-content: center;
+  @extend %control-item-standalone;
   min-width: $ouds-checkbox-size-min-width;
   min-height: $ouds-checkbox-size-min-height;
 }

scss/forms/_control-item.scss

@@ -119,3 +119,62 @@
   color: $ouds-color-content-muted;
   @include get-font-size("label-medium");
 }
+
+//
+// Checkbox & radio indicator
+//
+
+%control-item-indicator {
+  flex-shrink: 0;
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  vertical-align: middle;
+  appearance: none;
+  cursor: $form-check-label-cursor;
+  background-color: $ouds-color-border-emphasized;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: $form-check-input-width;
+  print-color-adjust: exact;
+
+  &:indeterminate {
+    background-color: $ouds-color-action-selected;
+  }
+
+  &:checked {
+    background-color: $ouds-color-action-selected;
+  }
+
+  &:hover {
+    background-color: $ouds-color-action-hover;
+  }
+
+  &:focus-visible {
+    background-color: $ouds-color-action-focus;
+  }
+
+  &:active {
+    background-color: $ouds-color-action-pressed;
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  // See: https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    pointer-events: none;
+    background-color: $ouds-color-action-disabled;
+  }
+}
+
+//
+// Control item standalone
+//
+
+%control-item-standalone {
+  @extend %control-item;
+  @extend .control-item-form-label;
+  display: inline-flex;
+  gap: 0;
+  align-items: center;
+  justify-content: center;
+}