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

ionic-team · Mar 1, 2024 · 96c1c77 · 96c1c77
1 parent 451ff46
commit 96c1c77
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;
       }