@telefonica/mistica 16.71.0 → 16.72.0

package/css/vivo.css

@@ -4,30 +4,30 @@
     --mistica-vivo-grey1: #f6f6f6;
     --mistica-vivo-vivoPurple: #660099;
     --mistica-vivo-vivoPurpleDark: #461e5f;
+    --mistica-vivo-vivoPurpleLight80: #8433ad;
     --mistica-vivo-pepperLight10: #fce4ef;
-    --mistica-vivo-grey2: #eeeeee;
     --mistica-vivo-grey3: #dddddd;
+    --mistica-vivo-vivoPurpleLight10: #efe5f4;
+    --mistica-vivo-grey2: #eeeeee;
     --mistica-vivo-grey5: #666666;
     --mistica-vivo-pepper: #cc1f59;
     --mistica-vivo-pepperDark: #b71d63;
-    --mistica-vivo-vivoPurpleLight10: #efe5f4;
-    --mistica-vivo-vivoPurpleLight50: #b280cc;
-    --mistica-vivo-pink: #eb3d7d;
-    --mistica-vivo-pepperLight30: #f7b1cb;
     --mistica-vivo-vivoPurpleLight20: #e0cceb;
+    --mistica-vivo-grey4: #8a8c90;
+    --mistica-vivo-vivoPurpleLight50: #b280cc;
     --mistica-vivo-grey6: #000000;
     --mistica-vivo-vivoGreen: #99cc33;
     --mistica-vivo-orange: #ff9900;
+    --mistica-vivo-pink: #eb3d7d;
     --mistica-vivo-vivoGreenLight10: #edf8e8;
     --mistica-vivo-orangeLight10: #ffefe1;
     --mistica-vivo-vivoGreenDark: #225c3d;
     --mistica-vivo-orangeDark: #972a1d;
     --mistica-vivo-pepperDark80: #8f2052;
-    --mistica-vivo-grey4: #999999;
     --mistica-vivo-darkModeBlack: #191919;
     --mistica-vivo-darkModeGrey: #242424;
     --mistica-vivo-darkModeGrey6: #313235;
-    --mistica-vivo-vivoPurpleLight80: #8433ad;
+    --mistica-vivo-darkModeGrey5: #6d7d88;
     --mistica-vivo-vivoGreenLight30: #91ae9e;
     --mistica-vivo-orangeLight40: #ffb84c;
     --mistica-vivo-pepperLight40: #db628b;
@@ -35,6 +35,7 @@
     /* Raw palette colors, for use with rgba() */
     --mistica-vivo-raw-darkModeBlack: 25, 25, 25;
     --mistica-vivo-raw-grey6: 0, 0, 0;
+    --mistica-vivo-raw-vivoPurple: 102, 0, 153;
     --mistica-vivo-raw-vivoPurpleDark: 70, 30, 95;
     --mistica-vivo-raw-white: 255, 255, 255;
     --mistica-vivo-raw-darkModeGrey: 36, 36, 36;
@@ -44,7 +45,7 @@
     --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
     --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
     --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-backgroundContainer: var(--mistica-vivo-white);
     --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
     --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
@@ -57,7 +58,7 @@
     --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
     --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
-    --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey2);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
     --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-raw-grey6), 0.2);
     --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-vivoPurpleDark);
@@ -65,14 +66,14 @@
     --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
     --mistica-color-appBarBackground: var(--mistica-vivo-white);
     --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
-    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
-    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
-    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.06);
+    --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
     --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
-    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
     --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
     --mistica-color-borderLow: var(--mistica-vivo-grey1);
     --mistica-color-border: var(--mistica-vivo-grey3);
@@ -103,15 +104,15 @@
     --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -159,10 +160,10 @@
     --mistica-color-textLinkMedia: var(--mistica-vivo-white);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
     --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
-    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
-    --mistica-color-inputBorder: var(--mistica-vivo-grey3);
+    --mistica-color-inputBorder: var(--mistica-vivo-grey4);
     --mistica-color-inputBorderInverse: var(--mistica-vivo-white);
     --mistica-color-inputBorderNegative: var(--mistica-vivo-white);
     --mistica-color-inputBorderBrand: var(--mistica-vivo-white);
@@ -170,7 +171,7 @@
     --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-completedStepBrand: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-control: var(--mistica-vivo-grey3);
+    --mistica-color-control: var(--mistica-vivo-grey4);
     --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-controlNegative: var(--mistica-vivo-vivoPurpleLight50);
@@ -184,8 +185,8 @@
     --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-raw-white), 0.5);
-    --mistica-color-loadingBar: var(--mistica-vivo-pink);
-    --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+    --mistica-color-loadingBar: var(--mistica-vivo-vivoPurple);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-white);
@@ -196,14 +197,14 @@
     --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlKnobNegative: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlKnobBrand: var(--mistica-vivo-vivoPurple);
-    --mistica-color-divider: var(--mistica-vivo-grey2);
+    --mistica-color-divider: var(--mistica-vivo-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-dividerNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-dividerBrand: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
     --mistica-color-badge: var(--mistica-vivo-pepperDark);
     --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
-    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-brand: var(--mistica-vivo-vivoPurple);
     --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-inverse: var(--mistica-vivo-white);
@@ -261,11 +262,11 @@
     --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
-    --mistica-color-textAppBar: var(--mistica-vivo-grey4);
+    --mistica-color-textAppBar: var(--mistica-vivo-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
     --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
-    --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-white);
     --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
     --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
     --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
@@ -274,7 +275,7 @@
     --mistica-color-tagTextWarning: var(--mistica-vivo-orangeDark);
     --mistica-color-tagTextError: var(--mistica-vivo-pepperDark80);
     --mistica-color-tagBackgroundPromo: var(--mistica-vivo-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActive: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-grey1);
     --mistica-color-tagBackgroundInactive: var(--mistica-vivo-grey1);
     --mistica-color-tagBackgroundInfo: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
@@ -333,17 +334,17 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 4px;
-    --mistica-border-radius-checkbox: 2px;
-    --mistica-border-radius-container: 8px;
+    --mistica-border-radius-button: 32px;
+    --mistica-border-radius-checkbox: 4px;
+    --mistica-border-radius-container: 24px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
-    --mistica-border-radius-tag: 24px;
-    --mistica-border-radius-input: 8px;
-    --mistica-border-radius-legacyDisplay: 16px;
-    --mistica-border-radius-popup: 8px;
-    --mistica-border-radius-sheet: 8px;
-    --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-tag: 10px;
+    --mistica-border-radius-input: 16px;
+    --mistica-border-radius-legacyDisplay: 24px;
+    --mistica-border-radius-popup: 16px;
+    --mistica-border-radius-sheet: 24px;
+    --mistica-border-radius-mediaSmall: 12px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -356,31 +357,31 @@
     --mistica-line-height-4: 1.5rem;
     --mistica-font-size-5: 1.25rem;
     --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 300;
+    --mistica-font-weight-5: 500;
     --mistica-font-size-6: 1.5rem;
     --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 300;
+    --mistica-font-weight-6: 500;
     --mistica-font-size-7: 1.75rem;
     --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 300;
+    --mistica-font-weight-7: 500;
     --mistica-font-size-8: 2rem;
     --mistica-line-height-8: 2.5rem;
-    --mistica-font-weight-8: 300;
+    --mistica-font-weight-8: 400;
     --mistica-font-size-9: 2.5rem;
     --mistica-line-height-9: 3rem;
-    --mistica-font-weight-9: 300;
+    --mistica-font-weight-9: 400;
     --mistica-font-size-10: 3rem;
     --mistica-line-height-10: 3.5rem;
-    --mistica-font-weight-10: 300;
+    --mistica-font-weight-10: 400;
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-cardTitle: 500;
     --mistica-font-size-drawerTitle: 1.25rem;
     --mistica-line-height-drawerTitle: 1.5rem;
-    --mistica-font-weight-drawerTitle: 300;
+    --mistica-font-weight-drawerTitle: 500;
     --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
-    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
@@ -389,15 +390,15 @@
     --mistica-font-weight-title1: 500;
     --mistica-font-size-title2: 1rem;
     --mistica-line-height-title2: 1.5rem;
-    --mistica-font-weight-title2: 300;
-    --mistica-font-size-title3: 1.25rem;
+    --mistica-font-weight-title2: 500;
+    --mistica-font-size-title3: 1.125rem;
     --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 300;
+    --mistica-font-weight-title3: 500;
     --mistica-font-size-title4: 1.5rem;
     --mistica-line-height-title4: 2rem;
-    --mistica-font-weight-title4: 300;
+    --mistica-font-weight-title4: 500;
     --mistica-font-weight-indicator: 500;
-    --mistica-font-weight-navigationBar: 500;
+    --mistica-font-weight-navigationBar: 400;
     --mistica-font-size-chipLabel: 0.875rem;
     --mistica-line-height-chipLabel: 1.25rem;
     --mistica-font-weight-chipLabel: 500;
@@ -496,12 +497,12 @@
     --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -552,10 +553,10 @@
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
-    --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey5);
     --mistica-color-completedStep: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -612,10 +613,10 @@
     --mistica-color-textPrimaryNegative: var(--mistica-vivo-grey2);
     --mistica-color-textPrimaryBrand: var(--mistica-vivo-grey2);
     --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
-    --mistica-color-textSecondary: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey4);
+    --mistica-color-textSecondary: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey3);
     --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
     --mistica-color-success: var(--mistica-vivo-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-orange);
@@ -789,12 +790,12 @@
         --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -845,10 +846,10 @@
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
-        --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey5);
         --mistica-color-completedStep: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -905,10 +906,10 @@
         --mistica-color-textPrimaryNegative: var(--mistica-vivo-grey2);
         --mistica-color-textPrimaryBrand: var(--mistica-vivo-grey2);
         --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
-        --mistica-color-textSecondary: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey4);
+        --mistica-color-textSecondary: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey3);
         --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
         --mistica-color-success: var(--mistica-vivo-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-orange);
@@ -1019,7 +1020,7 @@
         --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
         --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
         --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-backgroundContainer: var(--mistica-vivo-white);
         --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
         --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
@@ -1032,7 +1033,7 @@
         --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
         --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
-        --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey2);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
         --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-raw-grey6), 0.2);
         --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-vivoPurpleDark);
@@ -1040,14 +1041,14 @@
         --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
         --mistica-color-appBarBackground: var(--mistica-vivo-white);
         --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
-        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
-        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
-        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.06);
+        --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
         --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
-        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
         --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
         --mistica-color-borderLow: var(--mistica-vivo-grey1);
         --mistica-color-border: var(--mistica-vivo-grey3);
@@ -1078,15 +1079,15 @@
         --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -1134,10 +1135,10 @@
         --mistica-color-textLinkMedia: var(--mistica-vivo-white);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
         --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
-        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
-        --mistica-color-inputBorder: var(--mistica-vivo-grey3);
+        --mistica-color-inputBorder: var(--mistica-vivo-grey4);
         --mistica-color-inputBorderInverse: var(--mistica-vivo-white);
         --mistica-color-inputBorderNegative: var(--mistica-vivo-white);
         --mistica-color-inputBorderBrand: var(--mistica-vivo-white);
@@ -1145,7 +1146,7 @@
         --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-completedStepBrand: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-control: var(--mistica-vivo-grey3);
+        --mistica-color-control: var(--mistica-vivo-grey4);
         --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-controlNegative: var(--mistica-vivo-vivoPurpleLight50);
@@ -1159,8 +1160,8 @@
         --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-raw-white), 0.5);
-        --mistica-color-loadingBar: var(--mistica-vivo-pink);
-        --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+        --mistica-color-loadingBar: var(--mistica-vivo-vivoPurple);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-white);
@@ -1171,14 +1172,14 @@
         --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlKnobNegative: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlKnobBrand: var(--mistica-vivo-vivoPurple);
-        --mistica-color-divider: var(--mistica-vivo-grey2);
+        --mistica-color-divider: var(--mistica-vivo-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-dividerNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-dividerBrand: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
         --mistica-color-badge: var(--mistica-vivo-pepperDark);
         --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
-        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-brand: var(--mistica-vivo-vivoPurple);
         --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-inverse: var(--mistica-vivo-white);
@@ -1236,11 +1237,11 @@
         --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
-        --mistica-color-textAppBar: var(--mistica-vivo-grey4);
+        --mistica-color-textAppBar: var(--mistica-vivo-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
         --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
-        --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-white);
         --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
         --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
         --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
@@ -1249,7 +1250,7 @@
         --mistica-color-tagTextWarning: var(--mistica-vivo-orangeDark);
         --mistica-color-tagTextError: var(--mistica-vivo-pepperDark80);
         --mistica-color-tagBackgroundPromo: var(--mistica-vivo-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActive: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-grey1);
         --mistica-color-tagBackgroundInactive: var(--mistica-vivo-grey1);
         --mistica-color-tagBackgroundInfo: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
@@ -1316,7 +1317,7 @@
         --mistica-line-height-2: 1.5rem;
         --mistica-font-size-3: 1.125rem;
         --mistica-line-height-3: 1.5rem;
-        --mistica-font-size-4: 1.25rem;
+        --mistica-font-size-4: 1.5rem;
         --mistica-line-height-4: 1.75rem;
         --mistica-font-size-5: 1.75rem;
         --mistica-line-height-5: 2rem;
@@ -1342,8 +1343,8 @@
         --mistica-line-height-title1: 1.25rem;
         --mistica-font-size-title2: 1.125rem;
         --mistica-line-height-title2: 1.5rem;
-        --mistica-font-size-title3: 1.75rem;
-        --mistica-line-height-title3: 2rem;
+        --mistica-font-size-title3: 1.5rem;
+        --mistica-line-height-title3: 1.75rem;
         --mistica-font-size-title4: 2rem;
         --mistica-line-height-title4: 2.5rem;
 
@@ -1359,7 +1360,7 @@
         --mistica-line-height-cardDescriptionSnap: 1.5rem;
         --mistica-font-size-cardPretitleDefault: 1rem;
         --mistica-line-height-cardPretitleDefault: 1.5rem;
-        --mistica-font-size-cardTitleDefault: 1.25rem;
+        --mistica-font-size-cardTitleDefault: 1.5rem;
         --mistica-line-height-cardTitleDefault: 1.75rem;
         --mistica-font-size-cardSubtitleDefault: 1rem;
         --mistica-line-height-cardSubtitleDefault: 1.5rem;
@@ -1373,7 +1374,7 @@
         --mistica-line-height-inputHelperText: 1.25rem;
         --mistica-font-size-stepperStepLabel: 1rem;
         --mistica-line-height-stepperStepLabel: 1.5rem;
-        --mistica-font-size-loadingScreenTitle: 1.25rem;
+        --mistica-font-size-loadingScreenTitle: 1.5rem;
         --mistica-line-height-loadingScreenTitle: 1.75rem;
     }
 }

package/dist/accordion.css-mistica.js

@@ -40,9 +40,9 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v16_71_8s3szx0 v16_71_1y2v1nffx v16_71_1y2v1nfh6 v16_71_1y2v1nfif v16_71_1y2v1nfjo v16_71_1y2v1nfqr v16_71_1y2v1nfsm v16_71_1y2v1nffw v16_71_1y2v1nfq6 v16_71_1y2v1nfr8", s = "v16_71_8s3szx1", r = "v16_71_8s3szx2", a = "v16_71_8s3szx3", e = "v16_71_8s3szx4", t = "v16_71_8s3szx5", o = "v16_71_8s3szx6", x = {
-    enter: "v16_71_8s3szx7",
-    enterActive: "v16_71_8s3szx8",
-    exit: "v16_71_8s3szx9",
-    exitActive: "v16_71_8s3szxa"
-}, i = "v16_71_8s3szxb", f = "v16_71_8s3szxc v16_71_1y2v1nfqr";
+/* empty css                                     */ /* empty css                                     */ var n = "v16_72_8s3szx0 v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfif v16_72_1y2v1nfjo v16_72_1y2v1nfqr v16_72_1y2v1nfsm v16_72_1y2v1nffw v16_72_1y2v1nfq6 v16_72_1y2v1nfr8", s = "v16_72_8s3szx1", r = "v16_72_8s3szx2", a = "v16_72_8s3szx3", e = "v16_72_8s3szx4", t = "v16_72_8s3szx5", o = "v16_72_8s3szx6", x = {
+    enter: "v16_72_8s3szx7",
+    enterActive: "v16_72_8s3szx8",
+    exit: "v16_72_8s3szx9",
+    exitActive: "v16_72_8s3szxa"
+}, i = "v16_72_8s3szxb", f = "v16_72_8s3szxc v16_72_1y2v1nfqr";

package/dist/accordion.d.ts

@@ -37,10 +37,6 @@ type MultipleOpenProps = {
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
 export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
-    /**
-     * @deprecated Use `variant="brand"` instead.
-     */
-    isInverse?: boolean;
     variant?: 'default' | 'brand';
 }
 export declare const BoxedAccordionItem: React.ForwardRefExoticComponent<BoxedAccordionItemProps & React.RefAttributes<HTMLDivElement>>;