@telefonica/mistica 16.3.1 → 16.4.0

package/css/movistar.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
     --mistica-color-controlError: var(--mistica-movistar-pepper55);
     --mistica-color-barTrack: var(--mistica-movistar-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-divider: var(--mistica-movistar-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlError: var(--mistica-movistar-pepper45);
     --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -463,11 +467,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlError: var(--mistica-movistar-pepper45);
         --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -601,11 +607,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
         --mistica-color-controlError: var(--mistica-movistar-pepper55);
         --mistica-color-barTrack: var(--mistica-movistar-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-divider: var(--mistica-movistar-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);

package/css/o2-new.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
     --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
     --mistica-color-divider: var(--mistica-o2-new-grey30);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
     --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
     --mistica-color-badge: var(--mistica-o2-new-o2Red65);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -457,11 +461,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
         --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -605,11 +611,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
         --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);

package/css/o2.css

@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
     --mistica-color-iosControlKnob: var(--mistica-o2-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
     --mistica-color-divider: var(--mistica-o2-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
     --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
     --mistica-color-badge: var(--mistica-o2-pepper60);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -443,11 +447,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
         --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -581,11 +587,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
         --mistica-color-iosControlKnob: var(--mistica-o2-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);

package/css/telefonica.css

@@ -110,12 +110,14 @@
     --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
-    --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+    --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-divider: var(--mistica-telefonica-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
@@ -305,11 +307,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
     --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
     --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -453,11 +457,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
         --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
         --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -596,12 +602,14 @@
         --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
-        --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+        --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-divider: var(--mistica-telefonica-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);

package/css/tu.css

@@ -113,11 +113,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
     --mistica-color-iosControlKnob: var(--mistica-tu-white);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
     --mistica-color-divider: var(--mistica-tu-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
@@ -307,11 +309,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
     --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
     --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -446,11 +450,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
         --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
         --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -584,11 +590,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
         --mistica-color-iosControlKnob: var(--mistica-tu-white);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
         --mistica-color-divider: var(--mistica-tu-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-tu-primary);

package/css/vivo-new.css

@@ -105,11 +105,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-new-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
@@ -299,11 +301,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -444,11 +448,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -585,11 +591,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-new-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);

package/css/vivo.css

@@ -106,11 +106,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-pink);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
@@ -300,11 +302,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -439,11 +443,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -577,11 +583,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-pink);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);

package/dist/accordion.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     accordionItem: function() {
-        return s;
+        return e;
     },
     chevronContainer: function() {
         return v;
@@ -36,7 +36,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./accordion.css.ts.vanilla.css-mistica.js");
-var s = "_1y2v1nfi7", v = "_8s3szx3", r = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", a = "_8s3szx9", _ = "_8s3szx4", t = {
+var e = "_1y2v1nfib", v = "_8s3szx3", r = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfib _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhq _1y2v1nfis", a = "_8s3szx9", _ = "_8s3szx4", t = {
     enter: "_8s3szx5",
     enterActive: "_8s3szx6",
     exit: "_8s3szx7",

package/dist/avatar.css-mistica.js

@@ -10,11 +10,11 @@ function _export(target, all) {
 }
 _export(exports, {
     avatar: function() {
-        return f;
+        return a;
     },
     image: function() {
-        return a;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var f = "_1y2v1nfki _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfkl", a = "_1y2v1nfmf";
+var a = "_1y2v1nfkm _1y2v1nfho _1y2v1nfi3 _1y2v1nfhx _1y2v1nfkp", f = "_1y2v1nfmj";

package/dist/badge.css-mistica.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     badge: function() {
-        return v;
+        return _;
     },
     badgeBigNumber: function() {
-        return _;
+        return a;
     },
     badgeBorder: function() {
-        return a;
+        return d;
     },
     badgeNumber: function() {
         return e;
@@ -25,9 +25,9 @@ _export(exports, {
         return n;
     },
     container: function() {
-        return f;
+        return h;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./badge.css.ts.vanilla.css-mistica.js");
-var v = "_17szrmd2 _1y2v1nf5d", _ = "_17szrmd7", a = "_17szrmd3", e = "_17szrmd5 _17szrmd2 _1y2v1nf5d _1y2v1nfhk _1y2v1nfhz _1y2v1nfht", n = "_1y2v1nfhf", f = "_1y2v1nfhe _1y2v1nfho";
+var _ = "_17szrmd2 _1y2v1nf5h", a = "_17szrmd7", d = "_17szrmd3", e = "_17szrmd5 _17szrmd2 _1y2v1nf5h _1y2v1nfho _1y2v1nfi3 _1y2v1nfhx", n = "_1y2v1nfhj", h = "_1y2v1nfhi _1y2v1nfhs";

package/dist/boxed.css-mistica.js

@@ -27,7 +27,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./boxed.css.ts.vanilla.css-mistica.js");
-var e = "_1y2v1nfk1", r = "ihbkeqm", a = "ihbkeqo", b = "_1y2v1nfk2", k = {
+var e = "_1y2v1nfk5", r = "ihbkeqm", a = "ihbkeqo", b = "_1y2v1nfk6", k = {
     width: "var(--ihbkeq0)",
     height: "var(--ihbkeq1)",
     minHeight: "var(--ihbkeq2)",

package/dist/boxed.js

@@ -14,7 +14,7 @@ _export(exports, {
         return G;
     },
     InternalBoxed: function() {
-        return H;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -123,38 +123,38 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const A = (t, r)=>t || r ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorder, a = (t)=>typeof t == "number" ? `${t}px` : t !== null && t !== void 0 ? t : "initial", e = (t, r)=>{
-    if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
-        [_boxedcssmistica.vars[t]]: a(r)
+const H = (r, e)=>r || e ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorder, s = (r)=>typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "initial", t = (r, e)=>{
+    if (typeof e == "number" || typeof e == "string" || typeof e > "u") return {
+        [_boxedcssmistica.vars[r]]: s(e)
     };
     const n = {
-        [_boxedcssmistica.vars.mobile[t]]: a(r.mobile),
-        [_boxedcssmistica.vars.desktop[t]]: a(r.desktop)
+        [_boxedcssmistica.vars.mobile[r]]: s(e.mobile),
+        [_boxedcssmistica.vars.desktop[r]]: s(e.desktop)
     };
-    return r.tablet && (n[_boxedcssmistica.vars.tablet[t]] = a(r.tablet)), n;
-}, H = /*#__PURE__*/ _react.forwardRef((param, O)=>{
-    let { children: t, isInverse: r = !1, className: n, role: l, dataAttributes: b, "aria-label": c, "aria-labelledby": p, width: y, maxWidth: u, minWidth: x, height: g, minHeight: h, borderRadius: k = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: B, variant: C } = param;
-    const m = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+    return e.tablet && (n[_boxedcssmistica.vars.tablet[r]] = s(e.tablet)), n;
+}, M = /*#__PURE__*/ _react.forwardRef((param, O)=>{
+    let { children: r, isInverse: e = !1, className: n, role: c, dataAttributes: p, "aria-label": y, "aria-labelledby": u, width: x, maxWidth: g, minWidth: h, height: k, minHeight: B, borderRadius: I = _skincontractcssmistica.vars.borderRadii.container, background: f, desktopOnly: C, variant: a } = param;
+    const l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), d = e || a === "inverse" || a === "media";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         ref: O,
-        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, e("width", y), e("maxWidth", u), e("minWidth", x), e("height", g), e("minHeight", h)), {
-            [_boxedcssmistica.vars.background]: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer,
-            [_boxedcssmistica.vars.borderRadius]: k
+        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, t("width", x), t("maxWidth", g), t("minWidth", h), t("height", k), t("minHeight", B)), {
+            [_boxedcssmistica.vars.background]: (f !== null && f !== void 0 ? f : d) ? l ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer,
+            [_boxedcssmistica.vars.borderRadius]: I
         }))), {
-            background: d
+            background: f
         }),
-        className: (0, _classnames.default)(n, _boxedcssmistica.boxed, A(m, r), {
-            [_boxedcssmistica.desktopOnly]: B
+        className: (0, _classnames.default)(n, _boxedcssmistica.boxed, H(l, d), {
+            [_boxedcssmistica.desktopOnly]: C
         }),
-        role: l,
-        "aria-label": c,
-        "aria-labelledby": p
-    }, (0, _dom.getPrefixedDataAttributes)(b)), {
+        role: c,
+        "aria-label": y,
+        "aria-labelledby": u
+    }, (0, _dom.getPrefixedDataAttributes)(p)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-            variant: C !== null && C !== void 0 ? C : r ? "inverse" : void 0,
-            children: t
+            variant: a !== null && a !== void 0 ? a : d ? "inverse" : void 0,
+            children: r
         })
     }));
-}), G = /*#__PURE__*/ _react.forwardRef((t, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(H, _object_spread_props(_object_spread({}, t), {
-        ref: r
+}), G = /*#__PURE__*/ _react.forwardRef((r, e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(M, _object_spread_props(_object_spread({}, r), {
+        ref: e
     })));

package/dist/button-group.css-mistica.js

@@ -13,16 +13,16 @@ _export(exports, {
         return r;
     },
     buttons: function() {
-        return h;
+        return a;
     },
     buttonsWithSmallLink: function() {
-        return a;
+        return h;
     },
     centerInDesktop: function() {
-        return e;
+        return i;
     },
     centerInMobile: function() {
-        return i;
+        return e;
     },
     centerInTablet: function() {
         return v;
@@ -40,4 +40,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
 require("./button-group.css.ts.vanilla.css-mistica.js");
-var r = "_1xdd1h69", h = "_1xdd1h67", a = "_1xdd1h68", e = "_1xdd1h64", i = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", o = "_1xdd1h66", x = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
+var r = "_1xdd1h69", a = "_1xdd1h67", h = "_1xdd1h68", i = "_1xdd1h64", e = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", o = "_1xdd1h66", x = "_1xdd1h61 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfht";

package/dist/button-layout.css-mistica.js

@@ -16,34 +16,34 @@ _export(exports, {
         return l;
     },
     containerWithTwoButtons: function() {
-        return k;
+        return v;
     },
     link: function() {
-        return v;
+        return i;
     },
     linkInNewLine: function() {
-        return i;
+        return k;
     },
     smallLinkInNewLine: function() {
-        return t;
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
 require("./button-layout.css.ts.vanilla.css-mistica.js");
 var n = {
-    right: "kfxylh7 _1y2v1nfhu",
-    left: "kfxylh8 _1y2v1nfhs",
-    center: "kfxylh9 _1y2v1nfht",
-    "full-width": "kfxylha _1y2v1nfht"
-}, l = "kfxylh1 _1y2v1nfhk _1y2v1nfhz", k = "kfxylh2", v = "kfxylhd kfxylhc _1y2v1nfhk _1y2v1nfi7", i = {
-    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
-    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhe",
-    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhf",
-    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhg"
-}, t = {
-    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
-    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhl",
-    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhm",
-    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhn"
+    right: "kfxylh7 _1y2v1nfhy",
+    left: "kfxylh8 _1y2v1nfhw",
+    center: "kfxylh9 _1y2v1nfhx",
+    "full-width": "kfxylha _1y2v1nfhx"
+}, l = "kfxylh1 _1y2v1nfho _1y2v1nfi3", v = "kfxylh2", i = "kfxylhd kfxylhc _1y2v1nfho _1y2v1nfib", k = {
+    center: "kfxylhc _1y2v1nfho _1y2v1nfib",
+    left: "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhe",
+    right: "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhf",
+    "full-width": "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhg"
+}, x = {
+    center: "kfxylhc _1y2v1nfho _1y2v1nfib",
+    left: "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhl",
+    right: "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhm",
+    "full-width": "kfxylhc _1y2v1nfho _1y2v1nfib kfxylhn"
 };