From 5b872ece10fbbd34d98201e06785782764cf385e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 29 Feb 2024 18:34:30 -0500
Subject: [PATCH] fix(dark-mode): demos use correct stepped color tokens

---
 static/usage/v8/theming/always-dark-mode/demo.html | 6 +++---
 static/usage/v8/theming/class-dark-mode/demo.html  | 6 +++---
 static/usage/v8/theming/system-dark-mode/demo.html | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html
index c0359997458..a9ccdef3515 100644
--- a/static/usage/v8/theming/always-dark-mode/demo.html
+++ b/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;
       }
diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html
index 4f883848f1a..a9810a5142b 100644
--- a/static/usage/v8/theming/class-dark-mode/demo.html
+++ b/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;
       }
diff --git a/static/usage/v8/theming/system-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html
index 54d6e6f059f..61e8fc8da24 100644
--- a/static/usage/v8/theming/system-dark-mode/demo.html
+++ b/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;
       }