feat(toggle): add ionic theme styles

core/src/components/toggle/test/color/toggle.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: color'), () => {
     test('should apply color when checked', async ({ page }) => {
       await page.setContent(

core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts

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

core/src/components/toggle/test/item/toggle.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('toggle: item'), () => {
     test('should render correctly in list', async ({ page }) => {
       await page.setContent(
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: item color contrast'), () => {
     test('label should have correct contrast when used in an item', async ({ page }) => {
       await page.setContent(
@@ -89,7 +89,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
     });
   });
+});
 
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: ionChange'), () => {
     test('clicking padded space within item should click the toggle', async ({ page }) => {
       await page.setContent(

core/src/components/toggle/test/label/toggle.e2e.ts

@@ -169,3 +169,33 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: start placement'), () => {
+    test('should render the label in the start position', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-toggle label-placement="start">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-justify-start`));
+    });
+  });
+
+  test.describe(title('toggle: end placement'), () => {
+    test('should render the label in the end position', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-toggle label-placement="end">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end-justify-start`));
+    });
+  });
+});

core/src/components/toggle/test/sizes/toggle.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('toggle: sizes'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/toggle/test/sizes`, config);

core/src/components/toggle/test/states/toggle.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: states'), () => {
     test('should render disabled toggle correctly', async ({ page }) => {
       await page.setContent(
@@ -40,3 +40,46 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * Focused and Pressed states are only available in the Ionic theme
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: states (ionic theme)'), () => {
+    test('should render focused toggle correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle class="ion-focused">Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-disabled`));
+    });
+
+    test('should render pressed unchecked toggle correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle class="ion-activated">Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-checked`));
+    });
+
+    test('should render pressed checked toggle correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle class="ion-activated" checked>Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-unchecked`));
+    });
+  });
+});

core/src/components/toggle/test/theme-ionic/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Basic</ion-title>
+          <ion-buttons slot="primary">
+            <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <ion-toggle>
+            This is a very very very very very very very very very very very very very very very very very very very
+            very very very very very very very long text
+          </ion-toggle>
+
+          <h1>Placement</h1>
+          <ion-toggle label-placement="start"> Label Placement = Start </ion-toggle>
+
+          <ion-toggle label-placement="end"> Label Placement = End </ion-toggle>
+
+          <h1>States</h1>
+          <ion-toggle>Unchecked</ion-toggle>
+
+          <ion-toggle checked="true">Checked</ion-toggle>
+
+          <ion-toggle class="ion-focused">Focused</ion-toggle>
+
+          <ion-toggle class="ion-activated" checked="true">Pressed, Checked</ion-toggle>
+
+          <ion-toggle class="ion-activated">Pressed, Unchecked</ion-toggle>
+
+          <ion-toggle disabled="true">Disabled, Unchecked</ion-toggle>
+
+          <ion-toggle disabled="true" checked="true">Disabled, Checked</ion-toggle>
+
+          <h1>EnableOnOffLabels = true</h1>
+          <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
+
+          <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
+
+          <h1>Colors</h1>
+          <ion-toggle color="success" checked>Success</ion-toggle>
+
+          <ion-toggle color="danger" checked>Danger</ion-toggle>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/components/toggle/toggle.scss → core/src/components/toggle/toggle.common.scss

@@ -1,5 +1,5 @@
-@import "../../themes/native/native.globals";
 @import "./toggle.vars.scss";
+@import "../../themes/mixins.scss";
 
 // Toggle
 // --------------------------------------------------
@@ -35,7 +35,7 @@
 
   cursor: pointer;
   user-select: none;
-  z-index: $z-index-item-input;
+  z-index: 2;
 }
 
 :host(.in-item) {
@@ -93,26 +93,6 @@ input {
 // Input Label
 // ----------------------------------------------------------------
 
-.label-text-wrapper {
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
-}
-
-:host(.in-item) .label-text-wrapper {
-  @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
-}
-
-:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
-  @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null);
-}
-
-:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
-  @include margin(null, null, $toggle-item-label-margin-bottom, null);
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -131,131 +111,6 @@ input {
   align-items: center;
 }
 
-// Toggle Justify
-// --------------------------------------------------
-
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-// Toggle Align
-// --------------------------------------------------
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
-// Toggle Label Placement - Start
-// ----------------------------------------------------------------
-
-/**
- * Label is on the left of the input in LTR and
- * on the right in RTL.
- */
-:host(.toggle-label-placement-start) .toggle-wrapper {
-  flex-direction: row;
-}
-
-:host(.toggle-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(null, $form-control-label-margin, null, 0);
-}
-
-// Toggle Label Placement - End
-// ----------------------------------------------------------------
-
-/**
- * Label is on the right of the input in LTR and
- * on the left in RTL.
- */
-:host(.toggle-label-placement-end) .toggle-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * The margin between the label and
- * the input should be on the start
- * when the label sits at the end.
- */
-:host(.toggle-label-placement-end) .label-text-wrapper {
-  @include margin(null, 0, null, $form-control-label-margin);
-}
-
-// Input Label Placement - Fixed
-// ----------------------------------------------------------------
-
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(null, $form-control-label-margin, null, 0);
-}
-
-/**
- * Label is on the left of the input in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-// Toggle Label Placement - Stacked
-// ----------------------------------------------------------------
-
-/**
- * Label is on top of the toggle.
- */
-:host(.toggle-label-placement-stacked) .toggle-wrapper {
-  flex-direction: column;
-}
-
-:host(.toggle-label-placement-stacked) .label-text-wrapper {
-  @include transform(scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * The margin between the label and
-   * the toggle should be on the bottom
-   * when the label sits on top.
-   */
-  @include margin(null, 0, $form-control-label-margin, 0);
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the toggle.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
-  @include transform-origin(start, top);
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
-  @include transform-origin(center, top);
-}
-
 // Toggle Background Track: Unchecked
 // --------------------------------------------------