fix(toggle): add and document custom properties

references #14850

core/src/components/toggle/readme.md

@@ -123,6 +123,15 @@ Emitted when the toggle has focus.
 Emitted when the styles change.
 
 
+## CSS Custom Properties
+
+| Name                          | Description                                  |
+| ----------------------------- | -------------------------------------------- |
+| `--background`                | Background of the toggle                     |
+| `--background-checked`        | Background of the toggle when checked        |
+| `--handle-background`         | Background of the toggle handle              |
+| `--handle-background-checked` | Background of the toggle handle when checked |
+
 
 ----------------------------------------------
 

core/src/components/toggle/test/standalone/index.html

@@ -23,9 +23,17 @@
   <ion-toggle checked color="light"></ion-toggle>
   <ion-toggle checked color="medium"></ion-toggle>
   <ion-toggle checked color="dark"></ion-toggle>
+  <ion-toggle checked class="custom"></ion-toggle>
 
   <!-- Disabled -->
   <ion-toggle checked disabled></ion-toggle>
   <ion-toggle checked disabled color="secondary"></ion-toggle>
+
+  <style>
+    .custom {
+      --background-checked: papayawhip;
+      --handle-background-checked: purple;
+    }
+  </style>
 </body>
 </html>

core/src/components/toggle/toggle.ios.scss

@@ -5,8 +5,10 @@
 // -----------------------------------------
 
 :host {
-  --checked-background: #{current-color(base)};
-  --checked-knob: #{current-color(base)};
+  --background: #{$toggle-ios-background-color-off};
+  --background-checked: #{ion-color(primary, base)};
+  --handle-background: #{$toggle-ios-handle-background-color};
+  --handle-background-checked: #{$toggle-ios-handle-background-color};
 
   box-sizing: content-box;
 
@@ -18,6 +20,13 @@
   contain: strict;
 }
 
+:host(.ion-color.toggle-checked) .toggle-icon {
+  background: current-color(base);
+}
+
+:host(.ion-color.toggle-checked) .toggle-inner {
+  background: current-color(contrast);
+}
 
 // iOS Toggle Background Track: Unchecked
 // -----------------------------------------
@@ -53,7 +62,7 @@
 
   transition: transform $toggle-ios-transition-duration;
 
-  background-color: $toggle-ios-background-color-off;
+  background: var(--background);
 
   content: "";
 }
@@ -73,7 +82,7 @@
 
   transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
 
-  background-color: $toggle-ios-handle-background-color;
+  background: var(--handle-background);
 
   box-shadow: $toggle-ios-handle-box-shadow;
   will-change: transform;
@@ -85,7 +94,7 @@
 // -----------------------------------------
 
 :host(.toggle-checked) .toggle-icon {
-  background-color: var(--checked-knob);
+  background: var(--background-checked);
 }
 
 
@@ -103,6 +112,8 @@
 
 :host(.toggle-checked) .toggle-inner {
   @include transform(translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0));
+
+  background: var(--handle-background-checked);
 }
 
 

core/src/components/toggle/toggle.md.scss

@@ -5,8 +5,10 @@
 // -----------------------------------------
 
 :host {
-  --checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)};
-  --checked-knob: #{current-color(base)};
+  --background: #{$toggle-md-track-background-color-off};
+  --background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
+  --handle-background: #{$toggle-md-handle-background-color-off};
+  --handle-background-checked: #{ion-color(primary, base)};
 
   @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
 
@@ -20,6 +22,13 @@
   contain: strict;
 }
 
+:host(.ion-color.toggle-checked) .toggle-icon {
+  background: current-color(base, $toggle-md-track-background-color-alpha-on);
+}
+
+:host(.ion-color.toggle-checked) .toggle-inner {
+  background: current-color(base);
+}
 
 // Material Design Toggle Background Track: Unchecked
 // -----------------------------------------
@@ -35,7 +44,7 @@
 
   transition: background-color $toggle-md-transition-duration;
 
-  background-color: $toggle-md-track-background-color-off;
+  background: var(--background);
   pointer-events: none;
 }
 
@@ -55,7 +64,7 @@
   transition-duration: $toggle-md-transition-duration;
   transition-property: transform, background-color;
 
-  background-color: $toggle-md-handle-background-color-off;
+  background: var(--handle-background);
 
   box-shadow: $toggle-md-handle-box-shadow;
   will-change: transform, background-color;
@@ -67,7 +76,7 @@
 // -----------------------------------------
 
 :host(.toggle-checked) .toggle-icon {
-  background-color: var(--checked-background);
+  background: var(--background-checked);
 }
 
 // Material Design Toggle Inner Knob: Checked
@@ -76,7 +85,7 @@
 :host(.toggle-checked) .toggle-inner {
   @include transform(translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0));
 
-  background-color: var(--checked-knob);
+  background: var(--handle-background-checked);
 }
 
 

core/src/components/toggle/toggle.scss

@@ -4,8 +4,12 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-base-rgb: #{ion-color(primary, base, null, true)};
+  /**
+   * @prop --background: Background of the toggle
+   * @prop --background-checked: Background of the toggle when checked
+   * @prop --handle-background: Background of the toggle handle
+   * @prop --handle-background-checked: Background of the toggle handle when checked
+   */
 
   // TODO can we remove important here
   /* stylelint-disable-next-line declaration-no-important */

core/src/components/toggle/toggle.tsx

@@ -94,7 +94,7 @@ export class Toggle implements CheckboxInput {
       'interactive-disabled': this.disabled,
     });
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.disabled = this.disabled;
     }
   }
 
@@ -112,11 +112,11 @@ export class Toggle implements CheckboxInput {
       }
     }
 
-    this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
+    this.gesture = (await import('../../utils/gesture/gesture')).create({
       el: this.el,
       queue: this.queue,
       gestureName: 'toggle',
-      gesturePriority: 100,
+      gesturePriority: 30,
       threshold: 0,
       onStart: this.onDragStart.bind(this),
       onMove: this.onDragMove.bind(this),