feat: update checkbox and switch styles for improved responsiveness and consistency

packages/ui/src/components/forms/styles/checkbox.style.css

@@ -47,11 +47,11 @@
     top: 0;
     left: 0;
     display: inline-block;
-    width: 16px; /* Size of the checkbox */
-    height: 16px;
+    width: var(--checkbox-size); /* Size of the checkbox */
+    height: var(--checkbox-size);
     border-width: 1px;
     border-style: solid;
-    border-radius: var(--radius-sm); /* Consistent with global shape */
+    border-radius: var(--checkbox-radius); /* Consistent with global shape */
     border-color: var(--input-border);
     background-color: var(--input-bg);
     /* Use standard 0.2s transition */
@@ -69,10 +69,10 @@
     transform: rotate(45deg) scale(0);
     opacity: 0;
     /* Position adjust for 16px box */
-    left: 4.5px;
-    top: 1.5px;
-    width: 5px;
-    height: 9px;
+    left: var(--checkbox-check-left);
+    top: var(--checkbox-check-top);
+    width: var(--checkbox-check-width);
+    height: var(--checkbox-check-height);
     transition:
       all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
       opacity 0.1s;

packages/ui/src/components/forms/styles/switch.style.css

@@ -105,15 +105,47 @@
      ========================================= */
   .rc-switch-inner {
     display: block;
-    margin: 0 26px 0 8px; /* Adjust spacing */
-    color: #fff;
-    font-size: 12px;
-    transition: margin 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    box-sizing: border-box;
+    width: 100%; /* Make sure to take the full width of the container */
+
+    /* SETTING DEFAULT (STATE OFF / UNCHECKED) */
+    /* Handle on the Left -> Text must be on the Right */
+    /* Margin: Top | Right (Edge) | Bottom | Left (Handle) */
+    margin: 0 var(--switch-inner-indent-edge) 0 var(--switch-inner-indent-handle);
+
+    /* Typography */
+    font-size: 11px;
+    font-weight: 600;
+    line-height: calc(var(--switch-height) - 2px);
+    text-align: center;
+
+    /* Behavior */
     pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+
+    /* Transition: Shift margin and change color */
+    transition:
+      margin 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+      color 0.3s;
+
+    /* Default Color (OFF) */
+    color: var(--color-gray-500);
   }
 
   .rc-switch-checked .rc-switch-inner {
-    margin: 0 8px 0 26px;
+    /* Handle on the Right -> Text must be on the Left */
+    /* Margin: Top | Right (Handle) | Bottom | Left (Edge) */
+    margin: 0 var(--switch-inner-indent-handle) 0 var(--switch-inner-indent-edge);
+
+    /* Color ON */
+    color: #ffffff;
+  }
+
+  /* Text Color When ON -> Always White (because the background is colored) */
+  .rc-switch-checked .rc-switch-inner,
+  .rc-switch-checked .rc-switch-inner {
+    color: #ffffff;
   }
 
   /* =========================================

packages/ui/src/components/forms/switch/switch.component.tsx

@@ -3,7 +3,15 @@ import RcSwitch from '@rc-component/switch';
 import { SwitchProps } from '../types';
 
 /**
- * Small Spinner Component (SVG)
+ * LoadingSpinner
+ *
+ * Renders a compact SVG loading indicator intended for use inside switch components.
+ *
+ * - Stateless React component that returns an SVG element.
+ * - Decorative: marked with `aria-hidden="true"` so it is ignored by assistive technologies.
+ * - Styled via the `rc-switch-loading-icon` CSS class; color is controlled by `currentColor`.
+ *
+ * @returns {JSX.Element} An SVG element representing a loading spinner.
  */
 const LoadingSpinner = () => (
   <svg