feat(checkbox): update styles to iOS 17 specs (#28729)

core/src/components/alert/alert.ios.vars.scss

@@ -264,10 +264,10 @@ $alert-ios-checkbox-margin-bottom:                      10px !default;
 $alert-ios-checkbox-margin-start:                       16px !default;
 
 /// @prop - Size of the checkbox in the alert
-$alert-ios-checkbox-size:                               dynamic-font-max(24px, 2.75) !default;
+$alert-ios-checkbox-size:                               dynamic-font-max(22px, 2.538) !default;
 
 /// @prop - Border width of the checkbox in the alert
-$alert-ios-checkbox-border-width:                       dynamic-font(1px) !default;
+$alert-ios-checkbox-border-width:                       dynamic-font(2px) !default;
 
 /// @prop - Border style of the checkbox in the alert
 $alert-ios-checkbox-border-style:                       solid !default;
@@ -288,10 +288,10 @@ $alert-ios-checkbox-background-color-off:               $item-ios-background !de
 $alert-ios-checkbox-background-color-on:                ion-color(primary, base) !default;
 
 /// @prop - Top of the icon in the checkbox alert
-$alert-ios-checkbox-icon-top:                           calc($alert-ios-checkbox-size / 6) !default;
+$alert-ios-checkbox-icon-top:                           calc($alert-ios-checkbox-size / 8) !default;
 
 /// @prop - Start of the icon in the checkbox alert
-$alert-ios-checkbox-icon-start:                         calc($alert-ios-checkbox-size / 3 + 1px) !default;
+$alert-ios-checkbox-icon-start:                         calc($alert-ios-checkbox-size / 3) !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-width:                         calc($alert-ios-checkbox-size / 6 + 1px) !default;

core/src/components/checkbox/checkbox.ios.scss

@@ -16,6 +16,9 @@
 
   // Size
   --size: #{$checkbox-ios-icon-size};
+
+  // Checkmark width
+  --checkmark-width: #{$checkbox-ios-icon-checkmark-width};
 }
 
 

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

@@ -9,13 +9,13 @@
 $checkbox-ios-background-color-off:       $item-ios-background !default;
 
 /// @prop - Size of the checkbox icon
-$checkbox-ios-icon-size:                  dynamic-font-max(26px, 2.538) !default;
+$checkbox-ios-icon-size:                  dynamic-font-max(22px, 2.538) !default;
 
 /// @prop - Border color of the checkbox icon when off
 $checkbox-ios-icon-border-color-off:      rgba($text-color-rgb, 0.23) !default;
 
 /// @prop - Border width of the checkbox icon
-$checkbox-ios-icon-border-width:          dynamic-font(1px) !default;
+$checkbox-ios-icon-border-width:          dynamic-font(2px) !default;
 
 /// @prop - Border style of the checkbox icon
 $checkbox-ios-icon-border-style:          solid !default;
@@ -49,3 +49,6 @@ $checkbox-ios-item-end-margin-bottom:     9px !default;
 
 /// @prop - Margin start of the right checkbox item
 $checkbox-ios-item-end-margin-start:      0 !default;
+
+/// @prop - Checkmark width of the checkbox icon
+$checkbox-ios-icon-checkmark-width:       1.5px !default;

core/src/components/checkbox/checkbox.scss

@@ -25,7 +25,6 @@
   --checkbox-background-checked: #{ion-color(primary, base)};
   --border-color-checked: #{ion-color(primary, base)};
   --checkmark-color: #{ion-color(primary, contrast)};
-  --checkmark-width: 1;
   --transition: none;
 
   display: inline-block;

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

@@ -3,6 +3,21 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="checkboxes">
+          <ion-checkbox>Unchecked</ion-checkbox>
+          <ion-checkbox checked>Checked</ion-checkbox>
+        </div>
+      `,
+        config
+      );
+
+      const checkboxes = page.locator('#checkboxes');
+      await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-basic`));
+    });
+
     test('should render custom checkmark-width correctly', async ({ page }) => {
       await page.setContent(
         `