fix(dark-mode): demos use correct stepped color tokens (#3495)

Author: liamdebeasi

static/usage/v8/theming/always-dark-mode/demo.html

@@ -61,19 +61,19 @@
     <style>
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50);
+        --ion-background-color: var(--ion-background-color-step-50);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #1c1c1d;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100);
+        --ion-background-color: var(--ion-background-color-step-100);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #1c1c1d;
       }

static/usage/v8/theming/class-dark-mode/demo.html

@@ -123,19 +123,19 @@
 
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50, #f2f2f6);
+        --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100, #f9f9f9);
+        --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }

static/usage/v8/theming/system-dark-mode/demo.html

@@ -66,19 +66,19 @@
 
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50, #f2f2f6);
+        --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100, #f9f9f9);
+        --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }