chore(toggle): remove background vars for now

core/api.txt

@@ -1430,8 +1430,6 @@ ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
 ion-toggle,event,ionFocus,void,true
-ion-toggle,css-prop,--background
-ion-toggle,css-prop,--background-checked
 ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
@@ -1442,6 +1440,8 @@ ion-toggle,css-prop,--handle-max-height
 ion-toggle,css-prop,--handle-spacing
 ion-toggle,css-prop,--handle-transition
 ion-toggle,css-prop,--handle-width
+ion-toggle,css-prop,--track-background
+ion-toggle,css-prop,--track-background-checked
 ion-toggle,part,handle
 ion-toggle,part,track
 

core/src/components/toggle/test/legacy/sizes/index.html

@@ -149,8 +149,8 @@ <h1>Complex Custom Toggles</h1>
         height: 20px;
         width: 40px;
 
-        --background: #fff;
-        --background-checked: #0366a6;
+        --track-background: #fff;
+        --track-background-checked: #0366a6;
         --handle-background: #bbbbbb;
         --handle-width: 20px;
         --handle-height: 20px;
@@ -172,7 +172,7 @@ <h1>Complex Custom Toggles</h1>
 
         contain: none;
 
-        --background-checked: #d6ffd6;
+        --track-background-checked: #d6ffd6;
 
         --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
       }

core/src/components/toggle/toggle.scss

@@ -5,8 +5,8 @@
 
 :host {
   /**
-   * @prop --track-background: Background of the toggle
-   * @prop --track-background-checked: Background of the toggle when checked
+   * @prop --track-background: Background of the toggle track
+   * @prop --track-background-checked: Background of the toggle track when checked
    * @prop --border-radius: Border radius of the toggle track
    *
    * @prop --handle-background: Background of the toggle handle
@@ -19,16 +19,6 @@
    * @prop --handle-width: Width of the toggle handle
    * @prop --handle-spacing: Horizontal spacing around the toggle handle
    * @prop --handle-transition: Transition of the toggle handle
-   *
-   * @prop --ripple-color: The color of the ripple effect on MD mode.
-   *
-   * @prop --background: The background color of the component.
-   * @prop --background-activated: Background of component when pressed.
-   * @prop --background-activated-opacity: Opacity of the component background when pressed.
-   * @prop --background-hover: Background of component when hovered.
-   * @prop --background-hover-opacity: Opacity of the component background when hovered.
-   * @prop --background-focused: Background of component when focused.
-   * @prop --background-focused-opacity: Opacity of the component background when focused.
    */
 
   /* stylelint-disable-next-line declaration-no-important */
@@ -48,10 +38,6 @@
   z-index: $z-index-item-input;
 }
 
-:host(:not(.legacy-toggle)) {
-  background: var(--background);
-}
-
 :host(.in-item:not(.legacy-toggle)) {
   width: 100%;
 }