feat(checkbox): default size and appearance

[sean-perkins]

Issue number: N/A

---

What is the current behavior?

What is the new behavior?

• Adds the default display of a checkbox with the "ionic" theme.
  • The default size of a checkbox with the theme is 24px.
• Adds global sass files specific to the ionic theme.

Does this introduce a breaking change?

• Yes
• No

Other information

Split from #29213. I will note differences in comments on this PR.

[sean-perkins]

Feedback/notes for reviewers.

The key pieces to review here are:

1. Did I make any silly mistakes in the code.
2. Does the checkbox render at 24px by default

Follow-up PRs will address the other sizes, shapes, states (focus/active/disabled), etc.

[sean-perkins]

This border color is based from the Figma design color of #9A9A9A.

Note: OS can customize the color palette to actually apply their desired color.

$background-color-step-450 evaluates to #8C8C8C and provides a good visual default to an existing Ionic Framework variable.

[brandyscarney]

any reason for this over --ion-color-step-400: #999999;?

[sean-perkins]

I'm ok with updating to step-400 👍 I had looked at both and simply committed. Without the design tokens connected from Figma, we will have to pick what is reasonably close & adjust as that architecture exists.

[sean-perkins]

The original border radius value in the linked PR was incorrect. It was copied from Material Design, but in the Figma file we can see the desired border radius is:

• When the checkbox is 24px the border radius is 4px
• When the checkbox is small (16px) the border radius is 2px.

With the current calculation, we are close enough:

• When the checkbox is 24px the border radius is 4px
• When the checkbox is small (16px) the border radius is 2.667px

OS can target the --border-radius if they need to hard-set the border radius to 2px for the small size.

This approach of basing the border radius on the size, provides a better visual appearance for when a developer customizes the size beyond the default sizes.

[brandyscarney]

If we wanted to get it to match on both small and large we could do this:

Suggested change

	$checkbox-ionic-border-radius: calc(var(--size) / 6) !default;
	$checkbox-ionic-border-radius: calc(var(--size) / 4 - 2px) !default;

but that's optional here.

[sean-perkins]

I like it.

[sean-perkins]

Discussed internally with Liam & Brandy. You will notice the naming convention here is different than iOS/MD. We've decided to remove the -icon from the name. It didn't make sense.

We left iOS/MD alone, this only applies to the ionic theme.

[brandyscarney]

Looks good, added an optional change to make the border radius match the design more closely.