Overview

Update the Checkbox component to use vanilla CSS with EDS foundation tokens instead of styled-components. This aligns with the EDS 2.0 migration strategy.

Changes

Implementation

• Replace styled-components with vanilla CSS and BEM naming convention
• Migrate to EDS foundation and variables tokens from @equinor/eds-tokens
• Maintain all existing functionality and accessibility features
• Add support for dark mode via data-color-scheme attribute
• Add support for compact/comfortable density modes
• Improve data-* attribute handling
• Align with designer

Data Attributes

The new implementation ensures data-* attributes are applied to the input element by default, and add labelProps for cases where attributes are needed on the label wrapper:

<Checkbox 
  label="My checkbox"
  data-testid="my-checkbox-input"
  labelProps={{ 'data-testid': 'my-checkbox-label' }}
/>
// data-testid is on <input>, not wrapper

We have to make sure this approach is going to be the same on all components with label wrappers.