From aaeb039faefcc0d3bee37b22cbc4594db47c4eb8 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 2 Feb 2026 17:51:29 +0700
Subject: [PATCH] feat: update checkbox and switch styles for improved
 responsiveness and consistency

---
 .../forms/styles/checkbox.style.css           | 14 +--
 .../components/forms/styles/switch.style.css  | 42 +++++++-
 .../forms/switch/switch.component.tsx         | 10 +-
 packages/ui/src/globals.css                   | 98 ++++++++++++-------
 4 files changed, 118 insertions(+), 46 deletions(-)

diff --git a/packages/ui/src/components/forms/styles/checkbox.style.css b/packages/ui/src/components/forms/styles/checkbox.style.css
index 2a65277..d6017fe 100644
--- a/packages/ui/src/components/forms/styles/checkbox.style.css
+++ b/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;
diff --git a/packages/ui/src/components/forms/styles/switch.style.css b/packages/ui/src/components/forms/styles/switch.style.css
index d306303..2974dfd 100644
--- a/packages/ui/src/components/forms/styles/switch.style.css
+++ b/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;
   }
 
   /* =========================================
diff --git a/packages/ui/src/components/forms/switch/switch.component.tsx b/packages/ui/src/components/forms/switch/switch.component.tsx
index 4d05ea4..ba5186e 100644
--- a/packages/ui/src/components/forms/switch/switch.component.tsx
+++ b/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
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index 194fdf5..264a69d 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -8,33 +8,6 @@
    THEME VARIABLES (CENTRALIZED)
    ========================================= */
 @theme {
-  /* -------------------------------
-     BASE FONT & TYPOGRAPHY
-     ------------------------------- */
-  --base-font-size: 13px;
-
-  /* Scale */
-  --text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
-  --text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
-  --text-base: var(--base-font-size); /* 13px */
-  --text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
-  --text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
-  --text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
-
-  /* Weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* -------------------------------
-     SHAPE & DEPTH
-     ------------------------------- */
-  --radius-sm: 0.125rem; /* 2px */
-  --radius-md: 0.25rem; /* 4px */
-  --radius-lg: 0.5rem; /* 8px */
-  --radius-xl: 0.75rem; /* 12px */
-
   /* -------------------------------
      COLORS: PALETTE
      ------------------------------- */
@@ -114,6 +87,33 @@
   --color-info-800: #075985;
   --color-info-900: #0c4a6e;
 
+  /* -------------------------------
+     BASE FONT & TYPOGRAPHY
+     ------------------------------- */
+  --base-font-size: 13px;
+
+  /* Scale */
+  --text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
+  --text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
+  --text-base: var(--base-font-size); /* 13px */
+  --text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
+  --text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
+  --text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
+
+  /* Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* -------------------------------
+     SHAPE & DEPTH
+     ------------------------------- */
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-md: 0.25rem; /* 4px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+
   /* -------------------------------
      FORM ITEM SPECIFICS
      ------------------------------- */
@@ -157,15 +157,47 @@
   --disabled-text: var(--color-gray-400);
   --disabled-border: #e5e7eb;
 
-  /* SWITCH COMPONENT VARIABLES */
-  --switch-width: 44px;
-  --switch-height: 22px;
-  --switch-handle-size: 18px;
+  /*  CHECKBOX & RADIO COMPONENT VARIABLES*/
+
+  /* 16px is a perfect fit for a 13px font size.
+      It's easier to read than 14px, but not overpowering. */
+  --checkbox-size: 16px; /* ~16px (relative to 13px base) */
+  --checkbox-radius: var(--radius-md);
+
+  /* * Position the check mark icon precisely in the center of the 16px box */
+  --checkbox-check-width: 5px;
+  --checkbox-check-height: 9px;
+  --checkbox-check-top: 1.5px; /* Fine-tuning vertical position */
+  --checkbox-check-left: 4.5px; /* Fine-tuning horizontal position */
+
+  /*  SWITCH COMPONENT VARIABLES */
+
+  /* Using pixels (px) for Switch is often safer
+   to avoid sub-pixel rendering artifacts (circles becoming oval)
+   on low screen resolutions, while still maintaining proportion to the rest scale. */
+
+  /* A height of 20px fits with a line-height of 13px text,
+   A width of 36px provides a compact and modern ratio. */
+  --switch-width: 36px;
+  --switch-height: 20px;
+
+  /* Handle (lingkaran) = Height - (Padding * 2) */
+  /* 20px - (2px * 2) = 16px */
+  --switch-handle-size: 16px;
   --switch-padding: 2px; /* Distance between handle and edge */
 
-  /* Calculate the handle position when checked */
-  /* Formula: Width - HandleSize - Padding */
+  /* Calculate active position (Checked) */
+  /* 36px - 16px - 2px = 18px */
   --switch-checked-pos: calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-padding));
+
+  /* Additional variable for label inside switch (ON/OFF text) if any */
+  --switch-inner-margin-left: 6px;
+  --switch-inner-margin-right: 20px;
+  /* Margin Calculation for Inner Text */
+  /* Handle edge spacing: Handle size (16px) + Padding (2px) + Gap (4px) = 22px */
+  --switch-inner-indent-handle: 22px;
+  /* Empty edge spacing: Padding (2px) + Gap (4px) = 6px */
+  --switch-inner-indent-edge: 6px;
 }
 
 /* =========================================