test(range): use purple color when pressed

Author: brandyscarney

core/src/components/range/test/custom/index.html

@@ -74,11 +74,13 @@
       --color-blue-light: #3b82f6;
       --color-blue-light-rgb: 59, 130, 246;
 
-      --color-blue-primary: var(--ion-color-primary, #0054e9);
-      --color-blue-primary-rgb: var(--ion-color-primary-rgb, 0, 84, 233);
+      --color-blue: var(--ion-color-primary, #0054e9);
+      --color-blue-rgb: var(--ion-color-primary-rgb, 0, 84, 233);
 
       --color-blue-dark: #1e3a8a;
       --color-blue-dark-rgb: 30, 58, 138;
+
+      --color-purple: #8b5cf6;
     }
 
     .custom-knobs-range::part(knob-handle) {
@@ -156,7 +158,7 @@
 
     .ios.custom-knobs-range::part(pin) {
       border-radius: 50%;
-      background-color: var(--color-blue-primary);
+      background-color: var(--color-blue);
       color: #fff;
     }
 
@@ -181,17 +183,17 @@
 
     /* Hovered knob */
     #single-knob-range::part(knob hover) {
-      background: rgba(var(--color-blue-primary-rgb), 0.5);
+      background: rgba(var(--color-blue-rgb), 0.5);
     }
 
     /* Pressed knob */
     #single-knob-range::part(knob pressed) {
-      background: var(--color-blue-primary);
+      background: var(--color-blue);
     }
 
     /* Activated knob */
     #single-knob-range::part(knob activated) {
-      background: var(--color-blue-dark);
+      background: var(--color-purple);
     }
 
     /**
@@ -236,7 +238,7 @@
 
     /* Activated knob lower */
     #lower-upper-dual-knobs-range::part(knob-lower activated) {
-      background: var(--color-blue-primary);
+      background: var(--color-purple);
     }
 
     /* Hovered knob upper */
@@ -251,7 +253,7 @@
 
     /* Activated knob upper */
     #lower-upper-dual-knobs-range::part(knob-upper activated) {
-      background: var(--color-blue-primary);
+      background: var(--color-purple);
     }
 
     /* Pin lower */
@@ -298,7 +300,7 @@
 
     /* Activated knob A */
     #a-b-dual-knobs-range::part(knob-a activated) {
-      background: var(--color-blue-primary);
+      background: var(--color-purple);
     }
 
     /* Hovered knob B */
@@ -313,7 +315,7 @@
 
     /* Activated knob B */
     #a-b-dual-knobs-range::part(knob-b activated) {
-      background: var(--color-blue-primary);
+      background: var(--color-purple);
     }
 
     /* Pin A */