feat(checkbox): default size and appearance

core/src/components/checkbox/checkbox.ionic.scss

@@ -1,4 +1,17 @@
+@import "./checkbox";
 @import "./checkbox.ionic.vars";
 
 // Ionic Checkbox
-// --------------------------------------------------
+// --------------------------------------------------
+
+:host {
+  // Border
+  --border-radius: #{$checkbox-ionic-border-radius};
+  --border-width: #{$checkbox-ionic-border-width};
+  --border-style: #{$checkbox-ionic-border-style};
+  --border-color: #{$checkbox-ionic-background-color-off};
+  --checkmark-width: 3;
+
+  // Size
+  --size: #{$checkbox-ionic-size};
+}

core/src/components/checkbox/checkbox.ionic.vars.scss

@@ -1,2 +1,21 @@
+@import "../../themes/ionic.globals.ionic";
+
 // Ionic Checkbox Variables
-// --------------------------------------------------
+// --------------------------------------------------
+
+/// @prop - The default width and height of the checkbox
+$checkbox-ionic-size: 24px !default;
+
+/// @prop - The background color of the checkbox when the checkbox is unchecked
+$checkbox-ionic-background-color-off: $background-color-step-400 !default;
+
+/// @prop - Border style of the checkbox
+$checkbox-ionic-border-style: solid !default;
+
+/// @prop - Border width of the checkbox
+$checkbox-ionic-border-width: 1px !default;
+
+/// @prop - The border radius of the checkbox
+/// With a default size of 24px, the border radius is calculated as 24px / 4 - 2px = 4px
+/// With a small size of 16px, the border radius is calculated as 16px / 4 - 2px = 2px;
+$checkbox-ionic-border-radius: calc(var(--size) / 4 - 2px) !default;

core/src/components/checkbox/test/basic/checkbox.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(

core/src/themes/ionic.globals.ionic.scss

@@ -0,0 +1,2 @@
+// Core Globals
+@import "./ionic.globals";