CORE-2000: Migrate Checkbox and Radio components to plain CSS

[OpenStaxClaude]

Summary

This PR migrates the Checkbox and Radio form components from styled-components to plain CSS, following the same patterns established in #115 and #119.

Changes Made

Checkbox Component

• Created Checkbox.css with CSS variable-based styling
• Updated Checkbox.tsx to:
  • Remove styled-components imports (StyledLabel, StyledInput)
  • Use plain HTML elements with className
  • Use classnames library for conditional disabled state
  • Bind theme colors as CSS variables in style prop
  • Preserve all existing props: children, disabled, variant, bold, size, labelProps
• Updated sharedCheckboxStyles.ts to:
  • Keep checkboxVariants export for runtime theme lookups
  • Remove css template literal functions
  • Remove styled-components dependency

Radio Component

• Created Radio.css with CSS variable-based styling
• Updated Radio.tsx to:
  • Remove styled-components imports (StyledLabel, StyledInput)
  • Use plain HTML elements with className
  • Use classnames library for conditional disabled state
  • Bind theme colors as CSS variables in style prop
  • Preserve all existing props including tooltip functionality

Infrastructure

• Added CSS module declaration to react.d.ts
• Updated package.json sideEffects to ["**/*.css"] to prevent tree-shaking of CSS imports

CSS Variable Bindings

Checkbox (variant-dependent):

• --checkbox-bg: variant background color
• --checkbox-color: variant text color
• --checkbox-border-unchecked: variant unchecked border
• --checkbox-border-checked: variant checked border
• --checkbox-checkmark: variant checkmark SVG
• --checkbox-size: size prop value
• --checkbox-disabled-color: colors.palette.neutralLight

Radio (static):

• --radio-border: colors.palette.neutralThin
• --radio-checked: colors.palette.mediumBlue
• --radio-bg: colors.palette.white
• --radio-disabled-color: colors.palette.pale

Testing

• Run unit tests and update snapshots
• Verify Ladle stories render correctly
• Test all Checkbox variants (primary, light, error)
• Test disabled state for both components
• Test different sizes for Checkbox
• Test tooltip functionality for Radio

Related

• Jira: CORE-2000
• Related PRs: CORE-1998: Migrate Loader and Text components to CSS #115, CORE-1999: Migrate Button component and variants #119

[OpenStaxClaude]

Review Comments Addressed

I've addressed all the review comments:

1. Fixed labelAs prop in Radio.tsx (Copilot's unresolved comment)

Issue: The labelAs prop was spreading { as: labelAs } onto a native element, which doesn't work without styled-components. This broke existing usages like labelAs="div" and caused React unknown-prop warnings.

Solution: Refactored to use React.createElement() to properly render different element types based on the labelAs prop. Also extracted tooltipText from props to avoid spreading it to the DOM.

const labelElement = labelAs || 'label';
return React.createElement(labelElement, { className, style, ... }, children);

2. Fixed TypeScript CSS custom property errors in TreeCheckbox.tsx

Issue: TypeScript complained that --checkbox-font-weight and other CSS custom properties are not recognized as valid React.CSSProperties.

Solution: Updated all components (TreeCheckbox, Checkbox, Radio) to use the proper type casting pattern: as unknown as React.CSSProperties. This is necessary because TypeScript's CSSProperties type doesn't include support for CSS custom properties (variables starting with --).

Applied to:

• src/components/Tree/TreeCheckbox.tsx
• src/components/Checkbox/Checkbox.tsx
• src/components/Radio.tsx

Test Results

✅ All 214 tests passing
✅ Updated 7 snapshots to reflect the changes
✅ No TypeScript compilation errors
✅ No React prop warnings

The PR is now ready for another review.