@telefonica/mistica 17.0.0 → 17.2.0

package/dist-es/skins/vivo-evolution.js

@@ -1,615 +1,701 @@
-import { VIVO_EVOLUTION_SKIN as t } from "./constants.js";
+import { VIVO_EVOLUTION_SKIN as o } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
-    vivoPurple: "#660099",
-    vivoPurpleDark: "#461E5F",
-    vivoPurpleLight10: "#EFE5F4",
-    vivoPurpleLight20: "#E0CCEB",
-    vivoPurpleLight50: "#B280CC",
-    vivoPurpleLight80: "#8433AD",
-    vivoPurpleLight90: "#751AA3",
-    vivoGreen: "#99CC33",
-    vivoGreenDark: "#225C3D",
-    vivoGreenLight10: "#EDF8E8",
-    vivoGreen25: "#D6EBAD",
-    vivoGreenLight30: "#91AE9E",
-    vivoBlue: "#00ABDB",
-    orange: "#FF9900",
-    orange25: "#FFD699",
-    orangeDark: "#972A1D",
-    orangeLight10: "#FFEFE1",
-    orangeLight40: "#FFB84C",
-    pink: "#EB3D7D",
-    pepper: "#CC1F59",
-    pepperDark: "#B71D63",
-    pepperDark80: "#8F2052",
-    pepperLight10: "#FCE4EF",
-    pepperLight30: "#F7B1CB",
-    pepperLight40: "#DB628B",
-    grey1: "#F6F6F6",
-    grey2: "#EEEEEE",
-    grey3: "#DDDDDD",
-    grey4: "#8A8C90",
-    grey5: "#666666",
-    grey6: "#000000",
-    white: "#FFFFFF",
-    darkModeBlack: "#191919",
-    darkModeGrey: "#242424",
-    darkModeGrey5: "#6D7D88",
-    darkModeGrey6: "#313235"
-}, n = ()=>({
-        name: t,
+    vivoNeutral0: "#FFFFFF",
+    vivoNeutral25: "#F1EFF6",
+    vivoNeutral50: "#F0EDF5",
+    vivoNeutral100: "#EAE6F0",
+    vivoNeutral150: "#E3DEEB",
+    vivoNeutral200: "#DCD8E5",
+    vivoNeutral300: "#C7C1D6",
+    vivoNeutral400: "#B9AFCC",
+    vivoNeutral500: "#9187A8",
+    vivoNeutral600: "#665D7A",
+    vivoNeutral700: "#423B52",
+    vivoNeutral800: "#2D2A3D",
+    vivoNeutral900: "#252233",
+    vivoNeutral925: "#1D1A29",
+    vivoNeutral950: "#16131E",
+    vivoNeutral975: "#0E0C14",
+    vivoPurple25: "#F5F0FA",
+    vivoPurple50: "#EEE7F3",
+    vivoPurple75: "#E6D9F0",
+    vivoPurple100: "#DCC3EA",
+    vivoPurple200: "#C89DE2",
+    vivoPurple300: "#B77DDB",
+    vivoPurple400: "#A85ED4",
+    vivoPurple500: "#9147C3",
+    vivoPurple600: "#7A2FB3",
+    vivoPurple650: "#7020A6",
+    vivoPurple700: "#660099",
+    vivoPurple750: "#5B008A",
+    vivoPurple800: "#4F007A",
+    vivoPurple825: "#440069",
+    vivoPurple850: "#400063",
+    vivoPurple875: "#3C005D",
+    vivoPurple900: "#380057",
+    vivoPurple925: "#2D0048",
+    vivoPurple950: "#210034",
+    vivoPurple975: "#160026",
+    vivoGreen25: "#EDF8E8",
+    vivoGreen50: "#E4F3D8",
+    vivoGreen100: "#D6EBAD",
+    vivoGreen200: "#C3DF8C",
+    vivoGreen300: "#B7DA73",
+    vivoGreen400: "#AEDA5F",
+    vivoGreen500: "#A6D94D",
+    vivoGreen600: "#99CC33",
+    vivoGreen700: "#7FB029",
+    vivoGreen800: "#5F8C2F",
+    vivoGreen850: "#3F6E35",
+    vivoGreen900: "#225C3D",
+    vivoGreen925: "#1B4A31",
+    vivoGreen950: "#143824",
+    vivoGreen975: "#0D2618",
+    vivoOrange25: "#FFF7E8",
+    vivoOrange50: "#FFEFE1",
+    vivoOrange100: "#FFD699",
+    vivoOrange200: "#FFC266",
+    vivoOrange300: "#FFAD33",
+    vivoOrange400: "#FFA31A",
+    vivoOrange500: "#FF9F0F",
+    vivoOrange600: "#FF9900",
+    vivoOrange700: "#E68500",
+    vivoOrange800: "#CC7000",
+    vivoOrange850: "#B3540F",
+    vivoOrange900: "#972A1D",
+    vivoOrange925: "#7A2117",
+    vivoOrange950: "#5C1911",
+    vivoOrange975: "#3D0F0A",
+    vivoPepper25: "#FCE4EF",
+    vivoPepper50: "#FAD6E6",
+    vivoPepper100: "#F7C6DA",
+    vivoPepper200: "#F7B1CB",
+    vivoPepper300: "#E98FB0",
+    vivoPepper400: "#DB628B",
+    vivoPepper500: "#D64578",
+    vivoPepper600: "#CC1F59",
+    vivoPepper700: "#B71D63",
+    vivoPepper800: "#8F2052",
+    vivoPepper900: "#741A43",
+    vivoPepper925: "#5C1435",
+    vivoPepper950: "#430E27",
+    vivoPepper975: "#2B0819"
+}, i = ()=>({
+        name: o,
         colors: {
-            background: e.white,
-            backgroundAlternative: e.grey1,
-            backgroundBrand: e.vivoPurple,
-            backgroundNegative: e.vivoPurpleDark,
-            backgroundBrandSecondary: e.vivoPurpleLight80,
-            backgroundContainer: e.white,
-            backgroundContainerError: e.pepperLight10,
-            backgroundContainerHover: r(e.darkModeBlack, 0.05),
-            backgroundContainerPressed: r(e.darkModeBlack, 0.08),
-            backgroundContainerBrand: e.vivoPurple,
-            backgroundContainerBrandHover: r(e.darkModeBlack, 0.2),
-            backgroundContainerBrandPressed: r(e.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: e.vivoPurpleDark,
-            backgroundContainerNegative: r(e.darkModeBlack, 0.4),
-            backgroundContainerBrandOverBrand: e.vivoPurpleDark,
-            backgroundContainerAlternative: e.grey1,
-            backgroundOverlay: r(e.grey6, 0.6),
-            backgroundSkeleton: e.grey3,
-            backgroundSkeletonInverse: e.vivoPurpleDark,
-            backgroundSkeletonNegative: r(e.grey6, 0.2),
-            backgroundSkeletonBrand: e.vivoPurpleDark,
-            backgroundBrandTop: e.vivoPurple,
-            backgroundBrandBottom: e.vivoPurple,
-            appBarBackground: e.white,
-            navigationBarBackground: e.vivoPurple,
-            backgroundDropZoneHover: r(e.vivoPurple, 0.06),
-            backgroundDropZoneDragover: e.vivoPurpleLight10,
-            backgroundDropZoneBrandHover: r(e.vivoPurpleDark, 0.3),
-            backgroundDropZoneBrandDragover: r(e.vivoPurpleDark, 0.5),
-            backgroundDropZoneNegativeHover: r(e.white, 0.1),
-            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
-            backgroundDropZoneMediaHover: r(e.vivoPurpleDark, 0.3),
-            backgroundDropZoneMediaDragover: r(e.vivoPurpleDark, 0.5),
-            skeletonWave: e.grey2,
-            borderLow: e.grey1,
-            border: e.grey3,
-            borderHigh: e.grey5,
-            borderSelected: e.vivoPurple,
-            coverBackgroundHover: r(e.darkModeBlack, 0.25),
-            coverBackgroundPressed: r(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.pepper,
-            buttonDangerBackgroundPressed: e.pepperDark,
-            buttonDangerBackgroundHover: e.pepperDark,
-            buttonLinkDangerBackgroundInverse: e.white,
-            buttonLinkDangerBackgroundNegative: e.white,
-            buttonLinkDangerBackgroundBrand: e.white,
-            buttonLinkDangerBackgroundMedia: e.white,
-            buttonLinkDangerBackgroundPressed: e.pepperLight10,
-            buttonLinkDangerBackgroundInversePressed: e.pepperLight10,
-            buttonLinkDangerBackgroundNegativePressed: e.pepperLight10,
-            buttonLinkDangerBackgroundBrandPressed: e.pepperLight10,
-            buttonLinkDangerBackgroundMediaPressed: e.pepperLight10,
-            buttonLinkBackgroundPressed: e.vivoPurpleLight10,
-            buttonLinkBackgroundInversePressed: r(e.white, 0.1),
-            buttonLinkBackgroundNegativePressed: r(e.white, 0.1),
-            buttonLinkBackgroundBrandPressed: r(e.white, 0.1),
-            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
-            buttonPrimaryBackground: e.vivoPurple,
-            buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundNegative: e.white,
-            buttonPrimaryBackgroundBrand: e.white,
-            buttonPrimaryBackgroundMedia: e.white,
-            buttonPrimaryBackgroundHover: e.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: e.vivoPurpleLight10,
-            buttonPrimaryBackgroundNegativeHover: e.vivoPurpleLight10,
-            buttonPrimaryBackgroundBrandHover: e.vivoPurpleLight10,
-            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight10,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: e.vivoPurpleLight20,
-            buttonPrimaryBackgroundNegativePressed: e.vivoPurpleLight20,
-            buttonPrimaryBackgroundBrandPressed: e.vivoPurpleLight20,
-            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight20,
-            buttonSecondaryBackgroundBrand: r(e.white, 0),
-            buttonSecondaryBorder: e.vivoPurple,
-            buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderNegative: e.white,
-            buttonSecondaryBorderBrand: e.white,
-            buttonSecondaryBorderMedia: e.white,
-            buttonSecondaryBorderPressed: e.vivoPurpleDark,
-            buttonSecondaryBorderInversePressed: e.white,
-            buttonSecondaryBorderNegativePressed: e.white,
-            buttonSecondaryBorderBrandPressed: e.white,
-            buttonSecondaryBorderMediaPressed: e.white,
-            buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
-            buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundNegativeHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundBrandHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: e.vivoPurpleLight10,
-            buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundNegativePressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundBrandPressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
-            textButtonPrimary: e.white,
-            textButtonPrimaryInverse: e.vivoPurple,
-            textButtonPrimaryNegative: e.vivoPurple,
-            textButtonPrimaryBrand: e.vivoPurple,
-            textButtonPrimaryMedia: e.vivoPurple,
-            textButtonPrimaryInversePressed: e.vivoPurple,
-            textButtonPrimaryNegativePressed: e.vivoPurple,
-            textButtonPrimaryBrandPressed: e.vivoPurple,
-            textButtonPrimaryMediaPressed: e.vivoPurple,
-            textButtonSecondary: e.vivoPurple,
-            textButtonSecondaryInverse: e.white,
-            textButtonSecondaryNegative: e.white,
-            textButtonSecondaryBrand: e.white,
-            textButtonSecondaryMedia: e.white,
-            textButtonSecondaryPressed: e.vivoPurpleDark,
-            textButtonSecondaryInversePressed: e.white,
-            textButtonSecondaryNegativePressed: e.white,
-            textButtonSecondaryBrandPressed: e.white,
-            textButtonSecondaryMediaPressed: e.white,
-            textLink: e.vivoPurple,
-            textLinkInverse: e.white,
-            textLinkNegative: e.white,
-            textLinkBrand: e.white,
-            textLinkMedia: e.white,
-            textLinkDanger: e.pepper,
-            textLinkDangerMedia: e.pepper,
-            textLinkSnackbar: e.vivoPurpleLight20,
-            textActivated: e.vivoPurple,
-            textBrand: e.vivoPurple,
-            inputBorder: e.grey4,
-            inputBorderInverse: e.white,
-            inputBorderNegative: e.white,
-            inputBorderBrand: e.white,
-            completedStep: e.vivoPurple,
-            completedStepInverse: e.vivoPurpleDark,
-            completedStepNegative: e.vivoPurpleDark,
-            completedStepBrand: e.vivoPurpleDark,
-            control: e.grey4,
-            controlActivated: e.vivoPurple,
-            controlInverse: e.vivoPurpleLight50,
-            controlNegative: e.vivoPurpleLight50,
-            controlBrand: e.vivoPurpleLight50,
-            controlActivatedInverse: e.white,
-            controlActivatedNegative: e.white,
-            controlActivatedBrand: e.white,
-            controlError: e.pepper,
-            chevronIndicator: e.grey5,
-            barTrack: e.grey3,
-            barTrackInverse: r(e.white, 0.5),
-            barTrackNegative: r(e.white, 0.5),
-            barTrackBrand: r(e.white, 0.5),
-            loadingBar: e.vivoPurple,
-            loadingBarBackground: e.vivoPurpleLight10,
-            toggleAndroidInactive: e.grey2,
-            toggleAndroidBackgroundActive: e.vivoPurpleLight20,
-            toggleAndroidActiveBrand: e.white,
-            toggleAndroidInactiveBrand: e.grey2,
-            toggleAndroidBackgroundActiveBrand: e.vivoPurpleLight20,
-            toggleAndroidBackgroundInactiveBrand: e.vivoPurpleLight50,
-            iosControlKnob: e.white,
-            controlKnobInverse: e.vivoPurple,
-            controlKnobNegative: e.vivoPurple,
-            controlKnobBrand: e.vivoPurple,
-            divider: e.grey3,
-            dividerInverse: r(e.white, 0.2),
-            dividerNegative: r(e.white, 0.2),
-            dividerBrand: r(e.white, 0.2),
-            navigationBarDivider: e.vivoPurple,
-            badge: e.pepperDark,
-            feedbackErrorBackground: e.pepper,
-            feedbackInfoBackground: e.vivoPurpleDark,
-            brand: e.vivoPurple,
-            brandHigh: e.vivoPurpleDark,
-            inverse: e.white,
-            negative: e.white,
-            neutralHigh: e.grey6,
-            neutralHighNegative: e.white,
-            neutralHighBrand: e.white,
-            neutralMedium: e.grey5,
-            neutralMediumInverse: e.grey5,
-            neutralMediumNegative: e.grey5,
-            neutralMediumBrand: e.grey5,
-            neutralLow: e.grey1,
-            neutralLowAlternative: e.grey2,
-            textPrimary: e.grey6,
-            textPrimaryInverse: e.white,
-            textPrimaryNegative: e.white,
-            textPrimaryBrand: e.white,
-            textPrimaryMedia: e.white,
-            textSecondary: e.grey5,
-            textSecondaryInverse: e.vivoPurpleLight20,
-            textSecondaryNegative: e.vivoPurpleLight20,
-            textSecondaryBrand: e.vivoPurpleLight20,
-            textSecondaryMedia: e.white,
-            success: e.vivoGreen,
-            warning: e.orange,
-            error: e.pepper,
-            textError: e.pepper,
-            textErrorInverse: e.white,
-            textErrorNegative: e.white,
-            textErrorBrand: e.white,
-            promo: e.vivoPurple,
-            highlight: e.pink,
-            successLow: e.vivoGreenLight10,
-            warningLow: e.orangeLight10,
-            errorLow: e.pepperLight10,
-            promoLow: e.vivoPurpleLight10,
-            brandLow: e.vivoPurpleLight10,
-            successHigh: e.vivoGreenDark,
-            warningHigh: e.orangeDark,
-            errorHigh: e.pepperDark80,
-            promoHigh: e.vivoPurple,
-            successHighInverse: e.vivoGreenDark,
-            successHighNegative: e.vivoGreenDark,
-            successHighBrand: e.vivoGreenDark,
-            warningHighInverse: e.orangeDark,
-            warningHighNegative: e.orangeDark,
-            warningHighBrand: e.orangeDark,
-            errorHighInverse: e.pepperDark80,
-            errorHighNegative: e.pepperDark80,
-            errorHighBrand: e.pepperDark80,
-            promoHighInverse: e.vivoPurple,
-            promoHighNegative: e.vivoPurple,
-            promoHighBrand: e.vivoPurple,
-            textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.vivoPurpleLight50,
-            textNavigationSearchBarHint: e.vivoPurpleLight50,
-            textNavigationSearchBarText: e.white,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.vivoPurple,
-            iosGlassAppBar: e.grey6,
-            iosGlassAppBarSelected: e.vivoPurple,
-            customTabsBackground: e.white,
-            tagTextPromo: e.vivoPurple,
-            tagTextActive: e.vivoPurple,
-            tagTextInactive: e.grey5,
-            tagTextInfo: e.vivoPurple,
-            tagTextSuccess: e.vivoGreenDark,
-            tagTextWarning: e.orangeDark,
-            tagTextError: e.pepperDark80,
-            tagBackgroundPromo: e.vivoPurpleLight10,
-            tagBackgroundActive: e.grey1,
-            tagBackgroundInactive: e.grey1,
-            tagBackgroundInfo: e.vivoPurpleLight10,
-            tagBackgroundSuccess: e.vivoGreenLight10,
-            tagBackgroundWarning: e.orangeLight10,
-            tagBackgroundError: e.pepperLight10,
-            tagTextPromoInverse: e.vivoPurple,
-            tagTextPromoNegative: e.vivoPurple,
-            tagTextPromoBrand: e.vivoPurple,
-            tagTextActiveInverse: e.vivoPurple,
-            tagTextActiveNegative: e.vivoPurple,
-            tagTextActiveBrand: e.vivoPurple,
-            tagTextInactiveInverse: e.grey5,
-            tagTextInactiveNegative: e.grey5,
-            tagTextInactiveBrand: e.grey5,
-            tagTextInfoInverse: e.vivoPurple,
-            tagTextInfoNegative: e.vivoPurple,
-            tagTextInfoBrand: e.vivoPurple,
-            tagTextSuccessInverse: e.vivoGreenDark,
-            tagTextSuccessNegative: e.vivoGreenDark,
-            tagTextSuccessBrand: e.vivoGreenDark,
-            tagTextWarningInverse: e.orangeDark,
-            tagTextWarningNegative: e.orangeDark,
-            tagTextWarningBrand: e.orangeDark,
-            tagTextErrorInverse: e.pepperDark80,
-            tagTextErrorNegative: e.pepperDark80,
-            tagTextErrorBrand: e.pepperDark80,
-            tagBackgroundPromoInverse: e.vivoPurpleLight10,
-            tagBackgroundPromoNegative: e.vivoPurpleLight10,
-            tagBackgroundPromoBrand: e.vivoPurpleLight10,
-            tagBackgroundActiveInverse: e.vivoPurpleLight10,
-            tagBackgroundActiveNegative: e.vivoPurpleLight10,
-            tagBackgroundActiveBrand: e.vivoPurpleLight10,
-            tagBackgroundInactiveInverse: e.grey1,
-            tagBackgroundInactiveNegative: e.grey1,
-            tagBackgroundInactiveBrand: e.grey1,
-            tagBackgroundInfoInverse: e.vivoPurpleLight10,
-            tagBackgroundInfoNegative: e.vivoPurpleLight10,
-            tagBackgroundInfoBrand: e.vivoPurpleLight10,
-            tagBackgroundSuccessInverse: e.vivoGreenLight10,
-            tagBackgroundSuccessNegative: e.vivoGreenLight10,
-            tagBackgroundSuccessBrand: e.vivoGreenLight10,
-            tagBackgroundWarningInverse: e.orangeLight10,
-            tagBackgroundWarningNegative: e.orangeLight10,
-            tagBackgroundWarningBrand: e.orangeLight10,
-            tagBackgroundErrorInverse: e.pepperLight10,
-            tagBackgroundErrorNegative: e.pepperLight10,
-            tagBackgroundErrorBrand: e.pepperLight10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: r(e.grey6, 0.7)
+            background: e.vivoNeutral0,
+            backgroundAlternative: e.vivoNeutral25,
+            backgroundSelected: r(e.vivoPurple700, 0.08),
+            backgroundSelectedHover: r(e.vivoPurple700, 0.12),
+            backgroundSelectedPressed: r(e.vivoPurple700, 0.16),
+            backgroundSelectedBrand: r(e.vivoNeutral950, 0.16),
+            backgroundSelectedBrandHover: r(e.vivoNeutral950, 0.24),
+            backgroundSelectedBrandPressed: r(e.vivoNeutral950, 0.32),
+            backgroundSelectedNegative: r(e.vivoNeutral0, 0.2),
+            backgroundSelectedNegativeHover: r(e.vivoNeutral0, 0.28),
+            backgroundSelectedNegativePressed: r(e.vivoNeutral0, 0.35),
+            backgroundBrand: e.vivoPurple700,
+            backgroundNegative: e.vivoPurple900,
+            backgroundBrandSecondary: e.vivoPurple600,
+            backgroundContainer: e.vivoNeutral0,
+            backgroundContainerError: e.vivoPepper25,
+            backgroundContainerHover: r(e.vivoNeutral950, 0.05),
+            backgroundContainerPressed: r(e.vivoNeutral950, 0.08),
+            backgroundContainerBrand: e.vivoPurple700,
+            backgroundContainerBrandHover: r(e.vivoNeutral950, 0.2),
+            backgroundContainerBrandPressed: r(e.vivoNeutral950, 0.4),
+            backgroundContainerBrandOverInverse: e.vivoPurple900,
+            backgroundContainerNegative: r(e.vivoNeutral950, 0.4),
+            backgroundContainerBrandOverBrand: e.vivoPurple650,
+            backgroundContainerAlternative: e.vivoNeutral25,
+            backgroundOverlay: r(e.vivoNeutral975, 0.6),
+            backgroundSkeleton: e.vivoNeutral200,
+            backgroundSkeletonInverse: e.vivoPurple900,
+            backgroundSkeletonNegative: r(e.vivoNeutral975, 0.2),
+            backgroundSkeletonBrand: e.vivoPurple900,
+            backgroundBrandTop: e.vivoPurple700,
+            backgroundBrandBottom: e.vivoPurple700,
+            appBarBackground: e.vivoNeutral0,
+            navigationBarBackground: e.vivoPurple700,
+            backgroundDropZoneHover: r(e.vivoPurple700, 0.06),
+            backgroundDropZoneDragover: e.vivoPurple50,
+            backgroundDropZoneBrandHover: r(e.vivoPurple900, 0.3),
+            backgroundDropZoneBrandDragover: r(e.vivoPurple900, 0.5),
+            backgroundDropZoneNegativeHover: r(e.vivoNeutral0, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.vivoNeutral0, 0.17),
+            backgroundDropZoneMediaHover: r(e.vivoPurple900, 0.3),
+            backgroundDropZoneMediaDragover: r(e.vivoPurple900, 0.5),
+            skeletonWave: e.vivoNeutral100,
+            borderLow: e.vivoNeutral25,
+            border: e.vivoNeutral200,
+            borderHigh: e.vivoNeutral600,
+            borderSelected: e.vivoPurple700,
+            coverBackgroundHover: r(e.vivoNeutral950, 0.25),
+            coverBackgroundPressed: r(e.vivoNeutral950, 0.35),
+            buttonDangerBackground: e.vivoPepper600,
+            buttonDangerBackgroundPressed: e.vivoPepper700,
+            buttonDangerBackgroundHover: e.vivoPepper700,
+            buttonLinkDangerBackgroundInverse: e.vivoNeutral0,
+            buttonLinkDangerBackgroundNegative: e.vivoNeutral0,
+            buttonLinkDangerBackgroundBrand: e.vivoNeutral0,
+            buttonLinkDangerBackgroundMedia: e.vivoNeutral0,
+            buttonLinkDangerBackgroundPressed: e.vivoPepper25,
+            buttonLinkDangerBackgroundInversePressed: e.vivoPepper25,
+            buttonLinkDangerBackgroundNegativePressed: e.vivoPepper25,
+            buttonLinkDangerBackgroundBrandPressed: e.vivoPepper25,
+            buttonLinkDangerBackgroundMediaPressed: e.vivoPepper25,
+            buttonLinkBackgroundPressed: e.vivoPurple50,
+            buttonLinkBackgroundInversePressed: r(e.vivoNeutral0, 0.1),
+            buttonLinkBackgroundNegativePressed: r(e.vivoNeutral0, 0.1),
+            buttonLinkBackgroundBrandPressed: r(e.vivoNeutral0, 0.1),
+            buttonLinkBackgroundMediaPressed: r(e.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundPressed: e.vivoNeutral100,
+            buttonLinkNeutralBackgroundBrand: e.vivoNeutral0,
+            buttonLinkNeutralBackgroundBrandPressed: e.vivoNeutral25,
+            buttonLinkNeutralBackgroundNegative: e.vivoNeutral0,
+            buttonLinkNeutralBackgroundNegativePressed: e.vivoNeutral25,
+            buttonLinkNeutralBackgroundMedia: e.vivoNeutral0,
+            buttonLinkNeutralBackgroundMediaPressed: e.vivoNeutral25,
+            buttonPrimaryBackground: e.vivoPurple700,
+            buttonPrimaryBackgroundInverse: e.vivoNeutral0,
+            buttonPrimaryBackgroundNegative: e.vivoNeutral0,
+            buttonPrimaryBackgroundBrand: e.vivoNeutral0,
+            buttonPrimaryBackgroundMedia: e.vivoNeutral0,
+            buttonPrimaryBackgroundHover: e.vivoPurple900,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurple50,
+            buttonPrimaryBackgroundNegativeHover: e.vivoPurple50,
+            buttonPrimaryBackgroundBrandHover: e.vivoPurple50,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurple50,
+            buttonPrimaryBackgroundPressed: e.vivoPurple900,
+            buttonPrimaryBackgroundInversePressed: e.vivoPurple100,
+            buttonPrimaryBackgroundNegativePressed: e.vivoPurple100,
+            buttonPrimaryBackgroundBrandPressed: e.vivoPurple100,
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurple100,
+            buttonSecondaryBackgroundBrand: r(e.vivoNeutral0, 0),
+            buttonSecondaryBorder: e.vivoPurple700,
+            buttonSecondaryBorderInverse: e.vivoNeutral0,
+            buttonSecondaryBorderNegative: e.vivoNeutral0,
+            buttonSecondaryBorderBrand: e.vivoNeutral0,
+            buttonSecondaryBorderMedia: e.vivoNeutral0,
+            buttonSecondaryBorderPressed: e.vivoPurple900,
+            buttonSecondaryBorderInversePressed: e.vivoNeutral0,
+            buttonSecondaryBorderNegativePressed: e.vivoNeutral0,
+            buttonSecondaryBorderBrandPressed: e.vivoNeutral0,
+            buttonSecondaryBorderMediaPressed: e.vivoNeutral0,
+            buttonSecondaryBackgroundHover: e.vivoPurple50,
+            buttonSecondaryBackgroundInverseHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativeHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundPressed: e.vivoPurple50,
+            buttonSecondaryBackgroundInversePressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativePressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandPressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.vivoNeutral0, 0.15),
+            textButtonPrimary: e.vivoNeutral0,
+            textButtonPrimaryInverse: e.vivoPurple700,
+            textButtonPrimaryNegative: e.vivoPurple700,
+            textButtonPrimaryBrand: e.vivoPurple700,
+            textButtonPrimaryMedia: e.vivoPurple700,
+            textButtonPrimaryInversePressed: e.vivoPurple700,
+            textButtonPrimaryNegativePressed: e.vivoPurple700,
+            textButtonPrimaryBrandPressed: e.vivoPurple700,
+            textButtonPrimaryMediaPressed: e.vivoPurple700,
+            textButtonSecondary: e.vivoPurple700,
+            textButtonSecondaryInverse: e.vivoNeutral0,
+            textButtonSecondaryNegative: e.vivoNeutral0,
+            textButtonSecondaryBrand: e.vivoNeutral0,
+            textButtonSecondaryMedia: e.vivoNeutral0,
+            textButtonSecondaryPressed: e.vivoPurple900,
+            textButtonSecondaryInversePressed: e.vivoNeutral0,
+            textButtonSecondaryNegativePressed: e.vivoNeutral0,
+            textButtonSecondaryBrandPressed: e.vivoNeutral0,
+            textButtonSecondaryMediaPressed: e.vivoNeutral0,
+            textLink: e.vivoPurple700,
+            textLinkInverse: e.vivoNeutral0,
+            textLinkNegative: e.vivoNeutral0,
+            textLinkBrand: e.vivoNeutral0,
+            textLinkMedia: e.vivoNeutral0,
+            textLinkDanger: e.vivoPepper600,
+            textLinkDangerMedia: e.vivoPepper600,
+            textLinkSnackbar: e.vivoPurple100,
+            textLinkNeutral: e.vivoNeutral975,
+            textLinkNeutralBrand: e.vivoNeutral975,
+            textLinkNeutralNegative: e.vivoNeutral975,
+            textLinkNeutralAlternative: e.vivoNeutral975,
+            textLinkNeutralMedia: e.vivoNeutral975,
+            textActivated: e.vivoPurple700,
+            textBrand: e.vivoPurple700,
+            inputBorder: e.vivoNeutral500,
+            inputBorderInverse: e.vivoNeutral0,
+            inputBorderNegative: e.vivoNeutral0,
+            inputBorderBrand: e.vivoNeutral0,
+            completedStep: e.vivoPurple700,
+            completedStepInverse: e.vivoPurple900,
+            completedStepNegative: e.vivoPurple900,
+            completedStepBrand: e.vivoPurple900,
+            control: e.vivoNeutral500,
+            controlActivated: e.vivoPurple700,
+            controlInverse: e.vivoPurple300,
+            controlNegative: e.vivoPurple300,
+            controlBrand: e.vivoPurple300,
+            controlActivatedInverse: e.vivoNeutral0,
+            controlActivatedNegative: e.vivoNeutral0,
+            controlActivatedBrand: e.vivoNeutral0,
+            controlError: e.vivoPepper600,
+            chevronIndicator: e.vivoNeutral600,
+            barTrack: e.vivoNeutral200,
+            barTrackInverse: r(e.vivoNeutral0, 0.5),
+            barTrackNegative: r(e.vivoNeutral0, 0.5),
+            barTrackBrand: r(e.vivoNeutral0, 0.5),
+            loadingBar: e.vivoPurple700,
+            loadingBarBackground: e.vivoPurple50,
+            toggleAndroidInactive: e.vivoNeutral100,
+            toggleAndroidBackgroundActive: e.vivoPurple100,
+            toggleAndroidActiveBrand: e.vivoNeutral0,
+            toggleAndroidInactiveBrand: e.vivoNeutral100,
+            toggleAndroidBackgroundActiveBrand: e.vivoPurple100,
+            toggleAndroidBackgroundInactiveBrand: e.vivoPurple300,
+            iosControlKnob: e.vivoNeutral0,
+            controlKnobInverse: e.vivoPurple700,
+            controlKnobNegative: e.vivoPurple700,
+            controlKnobBrand: e.vivoPurple700,
+            divider: e.vivoNeutral200,
+            dividerInverse: r(e.vivoNeutral0, 0.2),
+            dividerNegative: r(e.vivoNeutral0, 0.2),
+            dividerBrand: r(e.vivoNeutral0, 0.2),
+            navigationBarDivider: e.vivoPurple700,
+            badge: e.vivoPepper700,
+            feedbackErrorBackground: e.vivoPepper600,
+            feedbackInfoBackground: e.vivoPurple900,
+            brand: e.vivoPurple700,
+            brandHigh: e.vivoPurple900,
+            inverse: e.vivoNeutral0,
+            negative: e.vivoNeutral0,
+            neutralHigh: e.vivoNeutral975,
+            neutralHighNegative: e.vivoNeutral0,
+            neutralHighBrand: e.vivoNeutral0,
+            neutralMedium: e.vivoNeutral600,
+            neutralMediumInverse: e.vivoNeutral600,
+            neutralMediumNegative: e.vivoNeutral600,
+            neutralMediumBrand: e.vivoNeutral600,
+            neutralLow: e.vivoNeutral25,
+            neutralLowAlternative: e.vivoNeutral100,
+            textPrimary: e.vivoNeutral975,
+            textPrimaryInverse: e.vivoNeutral0,
+            textPrimaryNegative: e.vivoNeutral0,
+            textPrimaryBrand: e.vivoNeutral0,
+            textPrimaryMedia: e.vivoNeutral0,
+            textSecondary: e.vivoNeutral600,
+            textSecondaryInverse: e.vivoPurple100,
+            textSecondaryNegative: e.vivoPurple100,
+            textSecondaryBrand: e.vivoPurple100,
+            textSecondaryMedia: e.vivoNeutral0,
+            success: e.vivoGreen600,
+            warning: e.vivoOrange600,
+            error: e.vivoPepper600,
+            textError: e.vivoPepper600,
+            textErrorInverse: e.vivoNeutral0,
+            textErrorNegative: e.vivoNeutral0,
+            textErrorBrand: e.vivoNeutral0,
+            promo: e.vivoPurple700,
+            highlight: e.vivoPepper500,
+            successLow: e.vivoGreen25,
+            warningLow: e.vivoOrange50,
+            errorLow: e.vivoPepper25,
+            promoLow: e.vivoPurple50,
+            brandLow: e.vivoPurple50,
+            successHigh: e.vivoGreen900,
+            warningHigh: e.vivoOrange900,
+            errorHigh: e.vivoPepper800,
+            promoHigh: e.vivoPurple700,
+            successHighInverse: e.vivoGreen900,
+            successHighNegative: e.vivoGreen900,
+            successHighBrand: e.vivoGreen900,
+            warningHighInverse: e.vivoOrange900,
+            warningHighNegative: e.vivoOrange900,
+            warningHighBrand: e.vivoOrange900,
+            errorHighInverse: e.vivoPepper800,
+            errorHighNegative: e.vivoPepper800,
+            errorHighBrand: e.vivoPepper800,
+            promoHighInverse: e.vivoPurple700,
+            promoHighNegative: e.vivoPurple700,
+            promoHighBrand: e.vivoPurple700,
+            textNavigationBarPrimary: e.vivoNeutral0,
+            textNavigationBarSecondary: e.vivoPurple300,
+            textNavigationSearchBarHint: e.vivoPurple300,
+            textNavigationSearchBarText: e.vivoNeutral0,
+            textAppBar: e.vivoNeutral600,
+            textAppBarSelected: e.vivoPurple700,
+            iosGlassAppBar: e.vivoNeutral975,
+            iosGlassAppBarSelected: e.vivoPurple700,
+            customTabsBackground: e.vivoNeutral0,
+            tagTextPromo: e.vivoPurple700,
+            tagTextActive: e.vivoPurple700,
+            tagTextInactive: e.vivoNeutral600,
+            tagTextInfo: e.vivoPurple700,
+            tagTextSuccess: e.vivoGreen900,
+            tagTextWarning: e.vivoOrange900,
+            tagTextError: e.vivoPepper800,
+            tagBackgroundPromo: e.vivoPurple50,
+            tagBackgroundActive: e.vivoNeutral25,
+            tagBackgroundInactive: e.vivoNeutral25,
+            tagBackgroundInfo: e.vivoPurple50,
+            tagBackgroundSuccess: e.vivoGreen25,
+            tagBackgroundWarning: e.vivoOrange50,
+            tagBackgroundError: e.vivoPepper25,
+            tagTextPromoInverse: e.vivoPurple700,
+            tagTextPromoNegative: e.vivoPurple700,
+            tagTextPromoBrand: e.vivoPurple700,
+            tagTextActiveInverse: e.vivoPurple700,
+            tagTextActiveNegative: e.vivoPurple700,
+            tagTextActiveBrand: e.vivoPurple700,
+            tagTextInactiveInverse: e.vivoNeutral600,
+            tagTextInactiveNegative: e.vivoNeutral600,
+            tagTextInactiveBrand: e.vivoNeutral600,
+            tagTextInfoInverse: e.vivoPurple700,
+            tagTextInfoNegative: e.vivoPurple700,
+            tagTextInfoBrand: e.vivoPurple700,
+            tagTextSuccessInverse: e.vivoGreen900,
+            tagTextSuccessNegative: e.vivoGreen900,
+            tagTextSuccessBrand: e.vivoGreen900,
+            tagTextWarningInverse: e.vivoOrange900,
+            tagTextWarningNegative: e.vivoOrange900,
+            tagTextWarningBrand: e.vivoOrange900,
+            tagTextErrorInverse: e.vivoPepper800,
+            tagTextErrorNegative: e.vivoPepper800,
+            tagTextErrorBrand: e.vivoPepper800,
+            tagBackgroundPromoInverse: e.vivoPurple50,
+            tagBackgroundPromoNegative: e.vivoPurple50,
+            tagBackgroundPromoBrand: e.vivoPurple50,
+            tagBackgroundActiveInverse: e.vivoPurple50,
+            tagBackgroundActiveNegative: e.vivoPurple50,
+            tagBackgroundActiveBrand: e.vivoPurple50,
+            tagBackgroundInactiveInverse: e.vivoNeutral25,
+            tagBackgroundInactiveNegative: e.vivoNeutral25,
+            tagBackgroundInactiveBrand: e.vivoNeutral25,
+            tagBackgroundInfoInverse: e.vivoPurple50,
+            tagBackgroundInfoNegative: e.vivoPurple50,
+            tagBackgroundInfoBrand: e.vivoPurple50,
+            tagBackgroundSuccessInverse: e.vivoGreen25,
+            tagBackgroundSuccessNegative: e.vivoGreen25,
+            tagBackgroundSuccessBrand: e.vivoGreen25,
+            tagBackgroundWarningInverse: e.vivoOrange50,
+            tagBackgroundWarningNegative: e.vivoOrange50,
+            tagBackgroundWarningBrand: e.vivoOrange50,
+            tagBackgroundErrorInverse: e.vivoPepper25,
+            tagBackgroundErrorNegative: e.vivoPepper25,
+            tagBackgroundErrorBrand: e.vivoPepper25,
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.vivoNeutral975, 0)} 0%, ${r(e.vivoNeutral975, 0.4)} 30%, ${r(e.vivoNeutral975, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.vivoNeutral975, 0.7)
         },
         darkModeColors: {
-            background: e.darkModeBlack,
-            backgroundAlternative: e.darkModeBlack,
-            backgroundBrand: e.darkModeBlack,
-            backgroundNegative: e.darkModeBlack,
-            backgroundBrandSecondary: e.darkModeBlack,
-            backgroundContainer: e.darkModeGrey,
-            backgroundContainerError: e.darkModeGrey,
-            backgroundContainerHover: r(e.white, 0.05),
-            backgroundContainerPressed: r(e.white, 0.08),
-            backgroundContainerBrand: e.darkModeGrey,
-            backgroundContainerBrandHover: r(e.white, 0.03),
-            backgroundContainerBrandPressed: r(e.white, 0.05),
-            backgroundContainerBrandOverInverse: e.darkModeGrey,
-            backgroundContainerNegative: e.darkModeGrey,
-            backgroundContainerBrandOverBrand: e.darkModeGrey,
-            backgroundContainerAlternative: e.darkModeGrey,
-            backgroundOverlay: r(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.darkModeGrey6,
-            backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundSkeletonNegative: e.darkModeGrey6,
-            backgroundSkeletonBrand: e.darkModeGrey6,
-            backgroundBrandTop: e.darkModeBlack,
-            backgroundBrandBottom: e.darkModeBlack,
-            appBarBackground: e.darkModeGrey,
-            navigationBarBackground: e.darkModeBlack,
-            backgroundDropZoneHover: r(e.white, 0.05),
-            backgroundDropZoneDragover: r(e.white, 0.08),
-            backgroundDropZoneBrandHover: r(e.white, 0.03),
-            backgroundDropZoneBrandDragover: r(e.white, 0.05),
-            backgroundDropZoneNegativeHover: r(e.white, 0.03),
-            backgroundDropZoneNegativeDragover: r(e.white, 0.05),
-            backgroundDropZoneMediaHover: r(e.white, 0.03),
-            backgroundDropZoneMediaDragover: r(e.white, 0.05),
-            skeletonWave: e.grey5,
-            borderLow: e.darkModeBlack,
-            border: e.darkModeGrey,
-            borderHigh: e.grey5,
-            borderSelected: e.vivoPurple,
-            coverBackgroundHover: r(e.darkModeBlack, 0.25),
-            coverBackgroundPressed: r(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.pepper,
-            buttonDangerBackgroundPressed: e.pepperDark,
-            buttonDangerBackgroundHover: e.pepperDark,
-            buttonLinkDangerBackgroundInverse: r(e.white, 0),
-            buttonLinkDangerBackgroundNegative: r(e.white, 0),
-            buttonLinkDangerBackgroundBrand: r(e.white, 0),
-            buttonLinkDangerBackgroundMedia: e.white,
-            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
-            buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
-            buttonLinkDangerBackgroundNegativePressed: r(e.white, 0.08),
-            buttonLinkDangerBackgroundBrandPressed: r(e.white, 0.08),
-            buttonLinkDangerBackgroundMediaPressed: e.pepperLight10,
-            buttonLinkBackgroundPressed: r(e.white, 0.08),
-            buttonLinkBackgroundInversePressed: r(e.white, 0.08),
-            buttonLinkBackgroundNegativePressed: r(e.white, 0.08),
-            buttonLinkBackgroundBrandPressed: r(e.white, 0.08),
-            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
-            buttonPrimaryBackground: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundInverse: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundNegative: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundBrand: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundMedia: e.white,
-            buttonPrimaryBackgroundHover: e.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: e.vivoPurpleDark,
-            buttonPrimaryBackgroundNegativeHover: e.vivoPurpleDark,
-            buttonPrimaryBackgroundBrandHover: e.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight10,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: e.vivoPurpleDark,
-            buttonPrimaryBackgroundNegativePressed: e.vivoPurpleDark,
-            buttonPrimaryBackgroundBrandPressed: e.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight20,
-            buttonSecondaryBackgroundBrand: r(e.white, 0),
-            buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderNegative: e.white,
-            buttonSecondaryBorderBrand: e.white,
-            buttonSecondaryBorderMedia: e.white,
-            buttonSecondaryBorderPressed: e.white,
-            buttonSecondaryBorderInversePressed: e.white,
-            buttonSecondaryBorderNegativePressed: e.white,
-            buttonSecondaryBorderBrandPressed: e.white,
-            buttonSecondaryBorderMediaPressed: e.white,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundNegativeHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundBrandHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundNegativePressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundBrandPressed: r(e.white, 0.15),
-            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
-            textButtonPrimary: e.grey2,
-            textButtonPrimaryInverse: e.grey2,
-            textButtonPrimaryNegative: e.grey2,
-            textButtonPrimaryBrand: e.grey2,
-            textButtonPrimaryMedia: e.vivoPurple,
-            textButtonPrimaryInversePressed: e.grey2,
-            textButtonPrimaryNegativePressed: e.grey2,
-            textButtonPrimaryBrandPressed: e.grey2,
-            textButtonPrimaryMediaPressed: e.vivoPurple,
-            textButtonSecondary: e.grey2,
-            textButtonSecondaryInverse: e.grey2,
-            textButtonSecondaryNegative: e.grey2,
-            textButtonSecondaryBrand: e.grey2,
-            textButtonSecondaryMedia: e.white,
-            textButtonSecondaryPressed: e.grey2,
-            textButtonSecondaryInversePressed: e.grey2,
-            textButtonSecondaryNegativePressed: e.grey2,
-            textButtonSecondaryBrandPressed: e.grey2,
-            textButtonSecondaryMediaPressed: e.white,
-            textLink: e.vivoPurpleLight50,
-            textLinkInverse: e.vivoPurpleLight50,
-            textLinkNegative: e.vivoPurpleLight50,
-            textLinkBrand: e.vivoPurpleLight50,
-            textLinkMedia: e.white,
-            textLinkDanger: e.pepper,
-            textLinkDangerMedia: e.pepper,
-            textLinkSnackbar: e.vivoPurpleLight50,
-            textActivated: e.vivoPurpleLight80,
-            textBrand: e.vivoPurpleLight80,
-            inputBorder: e.darkModeGrey5,
-            inputBorderInverse: e.darkModeGrey5,
-            inputBorderNegative: e.darkModeGrey5,
-            inputBorderBrand: e.darkModeGrey5,
-            completedStep: e.vivoPurpleLight80,
-            completedStepInverse: e.vivoPurpleLight80,
-            completedStepNegative: e.vivoPurpleLight80,
-            completedStepBrand: e.vivoPurpleLight80,
-            control: e.darkModeGrey6,
-            controlActivated: e.vivoPurpleLight80,
-            controlInverse: e.darkModeGrey6,
-            controlNegative: e.darkModeGrey6,
-            controlBrand: e.darkModeGrey6,
-            controlActivatedInverse: e.vivoPurpleLight80,
-            controlActivatedNegative: e.vivoPurpleLight80,
-            controlActivatedBrand: e.vivoPurpleLight80,
-            controlError: e.pepper,
-            chevronIndicator: e.grey5,
-            barTrack: e.darkModeGrey6,
-            barTrackInverse: e.darkModeGrey6,
-            barTrackNegative: e.darkModeGrey6,
-            barTrackBrand: e.darkModeGrey6,
-            loadingBar: e.vivoPurpleLight80,
-            loadingBarBackground: e.darkModeGrey6,
-            toggleAndroidInactive: e.grey4,
-            toggleAndroidBackgroundActive: e.vivoPurpleLight50,
-            toggleAndroidActiveBrand: e.vivoPurpleLight80,
-            toggleAndroidInactiveBrand: e.grey4,
-            toggleAndroidBackgroundActiveBrand: e.vivoPurpleLight50,
-            toggleAndroidBackgroundInactiveBrand: e.darkModeGrey6,
-            iosControlKnob: e.grey2,
-            controlKnobInverse: e.grey2,
-            controlKnobNegative: e.grey2,
-            controlKnobBrand: e.grey2,
-            divider: r(e.white, 0.05),
-            dividerInverse: r(e.white, 0.05),
-            dividerNegative: r(e.white, 0.05),
-            dividerBrand: r(e.white, 0.05),
-            navigationBarDivider: e.darkModeBlack,
-            badge: e.pepperDark,
-            feedbackErrorBackground: e.pepper,
-            feedbackInfoBackground: e.grey6,
-            brand: e.vivoPurpleLight80,
-            brandHigh: r(e.white, 0.05),
-            inverse: e.grey2,
-            negative: e.grey2,
-            neutralHigh: e.grey2,
-            neutralHighBrand: e.grey2,
-            neutralHighNegative: e.grey2,
-            neutralMedium: e.grey5,
-            neutralMediumInverse: e.grey5,
-            neutralMediumNegative: e.grey5,
-            neutralMediumBrand: e.grey5,
-            neutralLow: e.darkModeGrey6,
-            neutralLowAlternative: e.darkModeGrey6,
-            textPrimary: e.grey2,
-            textPrimaryInverse: e.grey2,
-            textPrimaryNegative: e.grey2,
-            textPrimaryBrand: e.grey2,
-            textPrimaryMedia: e.white,
-            textSecondary: e.grey3,
-            textSecondaryInverse: e.grey3,
-            textSecondaryNegative: e.grey3,
-            textSecondaryBrand: e.grey3,
-            textSecondaryMedia: e.white,
-            success: e.vivoGreen,
-            warning: e.orange,
-            error: e.pepper,
-            textError: e.pepper,
-            textErrorInverse: e.pepper,
-            textErrorNegative: e.pepper,
-            textErrorBrand: e.pepper,
-            promo: e.vivoPurpleLight80,
-            highlight: e.pink,
-            successLow: e.darkModeGrey6,
-            warningLow: e.darkModeGrey6,
-            errorLow: e.darkModeGrey6,
-            promoLow: e.darkModeGrey6,
-            brandLow: e.darkModeGrey6,
-            successHigh: e.vivoGreenLight30,
-            warningHigh: e.orangeLight40,
-            errorHigh: e.pepperLight40,
-            promoHigh: e.vivoPurpleLight50,
-            successHighInverse: e.vivoGreenDark,
-            successHighNegative: e.vivoGreenDark,
-            successHighBrand: e.vivoGreenDark,
-            warningHighInverse: e.orangeDark,
-            warningHighNegative: e.orangeDark,
-            warningHighBrand: e.orangeDark,
-            errorHighInverse: e.pepperDark80,
-            errorHighNegative: e.pepperDark80,
-            errorHighBrand: e.pepperDark80,
-            promoHighInverse: e.vivoPurple,
-            promoHighNegative: e.vivoPurple,
-            promoHighBrand: e.vivoPurple,
-            textNavigationBarPrimary: e.grey2,
-            textNavigationBarSecondary: e.grey4,
-            textNavigationSearchBarHint: e.grey4,
-            textNavigationSearchBarText: e.grey2,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.grey2,
-            iosGlassAppBar: e.white,
-            iosGlassAppBarSelected: e.vivoPurpleLight20,
-            customTabsBackground: e.darkModeBlack,
-            tagTextPromo: e.vivoPurpleLight50,
-            tagTextActive: e.vivoPurpleLight80,
-            tagTextInactive: e.grey5,
-            tagTextInfo: e.vivoPurpleLight80,
-            tagTextSuccess: e.vivoGreenLight30,
-            tagTextWarning: e.orangeLight40,
-            tagTextError: e.pepperLight40,
-            tagBackgroundPromo: e.darkModeGrey6,
-            tagBackgroundActive: e.darkModeGrey6,
-            tagBackgroundInactive: e.darkModeGrey6,
-            tagBackgroundInfo: e.darkModeGrey6,
-            tagBackgroundSuccess: e.darkModeGrey6,
-            tagBackgroundWarning: e.darkModeGrey6,
-            tagBackgroundError: e.darkModeGrey6,
-            tagTextPromoInverse: e.vivoPurpleLight50,
-            tagTextPromoNegative: e.vivoPurpleLight50,
-            tagTextPromoBrand: e.vivoPurpleLight50,
-            tagTextActiveInverse: e.vivoPurpleLight80,
-            tagTextActiveNegative: e.vivoPurpleLight80,
-            tagTextActiveBrand: e.vivoPurpleLight80,
-            tagTextInactiveInverse: e.grey5,
-            tagTextInactiveNegative: e.grey5,
-            tagTextInactiveBrand: e.grey5,
-            tagTextInfoInverse: e.vivoPurpleLight80,
-            tagTextInfoNegative: e.vivoPurpleLight80,
-            tagTextInfoBrand: e.vivoPurpleLight80,
-            tagTextSuccessInverse: e.vivoGreenLight30,
-            tagTextSuccessNegative: e.vivoGreenLight30,
-            tagTextSuccessBrand: e.vivoGreenLight30,
-            tagTextWarningInverse: e.orangeLight40,
-            tagTextWarningNegative: e.orangeLight40,
-            tagTextWarningBrand: e.orangeLight40,
-            tagTextErrorInverse: e.pepperLight40,
-            tagTextErrorNegative: e.pepperLight40,
-            tagTextErrorBrand: e.pepperLight40,
-            tagBackgroundPromoInverse: e.darkModeGrey6,
-            tagBackgroundPromoNegative: e.darkModeGrey6,
-            tagBackgroundPromoBrand: e.darkModeGrey6,
-            tagBackgroundActiveInverse: e.darkModeGrey6,
-            tagBackgroundActiveNegative: e.darkModeGrey6,
-            tagBackgroundActiveBrand: e.darkModeGrey6,
-            tagBackgroundInactiveInverse: e.darkModeGrey6,
-            tagBackgroundInactiveNegative: e.darkModeGrey6,
-            tagBackgroundInactiveBrand: e.darkModeGrey6,
-            tagBackgroundInfoInverse: e.darkModeGrey6,
-            tagBackgroundInfoNegative: e.darkModeGrey6,
-            tagBackgroundInfoBrand: e.darkModeGrey6,
-            tagBackgroundSuccessInverse: e.darkModeGrey6,
-            tagBackgroundSuccessNegative: e.darkModeGrey6,
-            tagBackgroundSuccessBrand: e.darkModeGrey6,
-            tagBackgroundWarningInverse: e.darkModeGrey6,
-            tagBackgroundWarningNegative: e.darkModeGrey6,
-            tagBackgroundWarningBrand: e.darkModeGrey6,
-            tagBackgroundErrorInverse: e.darkModeGrey6,
-            tagBackgroundErrorNegative: e.darkModeGrey6,
-            tagBackgroundErrorBrand: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: r(e.grey6, 0.7)
+            background: e.vivoNeutral950,
+            backgroundAlternative: e.vivoNeutral950,
+            backgroundSelected: r(e.vivoPurple600, 0.18),
+            backgroundSelectedHover: r(e.vivoPurple600, 0.25),
+            backgroundSelectedPressed: r(e.vivoPurple600, 0.33),
+            backgroundSelectedBrand: r(e.vivoPurple600, 0.18),
+            backgroundSelectedBrandHover: r(e.vivoPurple600, 0.25),
+            backgroundSelectedBrandPressed: r(e.vivoPurple600, 0.33),
+            backgroundSelectedNegative: r(e.vivoPurple600, 0.18),
+            backgroundSelectedNegativeHover: r(e.vivoPurple600, 0.25),
+            backgroundSelectedNegativePressed: r(e.vivoPurple600, 0.33),
+            backgroundBrand: e.vivoNeutral950,
+            backgroundNegative: e.vivoNeutral950,
+            backgroundBrandSecondary: e.vivoNeutral950,
+            backgroundContainer: e.vivoNeutral900,
+            backgroundContainerError: e.vivoNeutral900,
+            backgroundContainerHover: r(e.vivoNeutral0, 0.05),
+            backgroundContainerPressed: r(e.vivoNeutral0, 0.08),
+            backgroundContainerBrand: e.vivoNeutral900,
+            backgroundContainerBrandHover: r(e.vivoNeutral0, 0.03),
+            backgroundContainerBrandPressed: r(e.vivoNeutral0, 0.05),
+            backgroundContainerBrandOverInverse: e.vivoNeutral900,
+            backgroundContainerNegative: e.vivoNeutral900,
+            backgroundContainerBrandOverBrand: e.vivoNeutral900,
+            backgroundContainerAlternative: e.vivoNeutral900,
+            backgroundOverlay: r(e.vivoNeutral900, 0.8),
+            backgroundSkeleton: e.vivoNeutral800,
+            backgroundSkeletonInverse: e.vivoNeutral800,
+            backgroundSkeletonNegative: e.vivoNeutral800,
+            backgroundSkeletonBrand: e.vivoNeutral800,
+            backgroundBrandTop: e.vivoNeutral950,
+            backgroundBrandBottom: e.vivoNeutral950,
+            appBarBackground: e.vivoNeutral900,
+            navigationBarBackground: e.vivoNeutral950,
+            backgroundDropZoneHover: r(e.vivoNeutral0, 0.05),
+            backgroundDropZoneDragover: r(e.vivoNeutral0, 0.08),
+            backgroundDropZoneBrandHover: r(e.vivoNeutral0, 0.03),
+            backgroundDropZoneBrandDragover: r(e.vivoNeutral0, 0.05),
+            backgroundDropZoneNegativeHover: r(e.vivoNeutral0, 0.03),
+            backgroundDropZoneNegativeDragover: r(e.vivoNeutral0, 0.05),
+            backgroundDropZoneMediaHover: r(e.vivoNeutral0, 0.03),
+            backgroundDropZoneMediaDragover: r(e.vivoNeutral0, 0.05),
+            skeletonWave: e.vivoNeutral600,
+            borderLow: e.vivoNeutral950,
+            border: e.vivoNeutral900,
+            borderHigh: e.vivoNeutral600,
+            borderSelected: e.vivoPurple700,
+            coverBackgroundHover: r(e.vivoNeutral950, 0.25),
+            coverBackgroundPressed: r(e.vivoNeutral950, 0.35),
+            buttonDangerBackground: e.vivoPepper600,
+            buttonDangerBackgroundPressed: e.vivoPepper700,
+            buttonDangerBackgroundHover: e.vivoPepper700,
+            buttonLinkDangerBackgroundInverse: r(e.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundNegative: r(e.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundBrand: r(e.vivoNeutral0, 0),
+            buttonLinkDangerBackgroundMedia: e.vivoNeutral0,
+            buttonLinkDangerBackgroundPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundInversePressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundNegativePressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundBrandPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.vivoPepper25,
+            buttonLinkBackgroundPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkBackgroundInversePressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkBackgroundNegativePressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkBackgroundBrandPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundBrand: r(e.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundNegative: r(e.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.vivoNeutral0, 0.08),
+            buttonLinkNeutralBackgroundMedia: r(e.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.vivoNeutral0, 0.08),
+            buttonPrimaryBackground: e.vivoPurple600,
+            buttonPrimaryBackgroundInverse: e.vivoPurple600,
+            buttonPrimaryBackgroundNegative: e.vivoPurple600,
+            buttonPrimaryBackgroundBrand: e.vivoPurple600,
+            buttonPrimaryBackgroundMedia: e.vivoNeutral0,
+            buttonPrimaryBackgroundHover: e.vivoPurple900,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurple900,
+            buttonPrimaryBackgroundNegativeHover: e.vivoPurple900,
+            buttonPrimaryBackgroundBrandHover: e.vivoPurple900,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurple50,
+            buttonPrimaryBackgroundPressed: e.vivoPurple900,
+            buttonPrimaryBackgroundInversePressed: e.vivoPurple900,
+            buttonPrimaryBackgroundNegativePressed: e.vivoPurple900,
+            buttonPrimaryBackgroundBrandPressed: e.vivoPurple900,
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurple100,
+            buttonSecondaryBackgroundBrand: r(e.vivoNeutral0, 0),
+            buttonSecondaryBorder: e.vivoNeutral0,
+            buttonSecondaryBorderInverse: e.vivoNeutral0,
+            buttonSecondaryBorderNegative: e.vivoNeutral0,
+            buttonSecondaryBorderBrand: e.vivoNeutral0,
+            buttonSecondaryBorderMedia: e.vivoNeutral0,
+            buttonSecondaryBorderPressed: e.vivoNeutral0,
+            buttonSecondaryBorderInversePressed: e.vivoNeutral0,
+            buttonSecondaryBorderNegativePressed: e.vivoNeutral0,
+            buttonSecondaryBorderBrandPressed: e.vivoNeutral0,
+            buttonSecondaryBorderMediaPressed: e.vivoNeutral0,
+            buttonSecondaryBackgroundHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundInverseHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativeHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundPressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundInversePressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundNegativePressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundBrandPressed: r(e.vivoNeutral0, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.vivoNeutral0, 0.15),
+            textButtonPrimary: e.vivoNeutral100,
+            textButtonPrimaryInverse: e.vivoNeutral100,
+            textButtonPrimaryNegative: e.vivoNeutral100,
+            textButtonPrimaryBrand: e.vivoNeutral100,
+            textButtonPrimaryMedia: e.vivoPurple700,
+            textButtonPrimaryInversePressed: e.vivoNeutral100,
+            textButtonPrimaryNegativePressed: e.vivoNeutral100,
+            textButtonPrimaryBrandPressed: e.vivoNeutral100,
+            textButtonPrimaryMediaPressed: e.vivoPurple700,
+            textButtonSecondary: e.vivoNeutral100,
+            textButtonSecondaryInverse: e.vivoNeutral100,
+            textButtonSecondaryNegative: e.vivoNeutral100,
+            textButtonSecondaryBrand: e.vivoNeutral100,
+            textButtonSecondaryMedia: e.vivoNeutral0,
+            textButtonSecondaryPressed: e.vivoNeutral100,
+            textButtonSecondaryInversePressed: e.vivoNeutral100,
+            textButtonSecondaryNegativePressed: e.vivoNeutral100,
+            textButtonSecondaryBrandPressed: e.vivoNeutral100,
+            textButtonSecondaryMediaPressed: e.vivoNeutral0,
+            textLink: e.vivoPurple300,
+            textLinkInverse: e.vivoPurple300,
+            textLinkNegative: e.vivoPurple300,
+            textLinkBrand: e.vivoPurple300,
+            textLinkMedia: e.vivoNeutral0,
+            textLinkDanger: e.vivoPepper600,
+            textLinkDangerMedia: e.vivoPepper600,
+            textLinkSnackbar: e.vivoPurple300,
+            textLinkNeutral: e.vivoNeutral100,
+            textLinkNeutralBrand: e.vivoNeutral100,
+            textLinkNeutralNegative: e.vivoNeutral100,
+            textLinkNeutralAlternative: e.vivoNeutral100,
+            textLinkNeutralMedia: e.vivoNeutral0,
+            textActivated: e.vivoPurple600,
+            textBrand: e.vivoPurple600,
+            inputBorder: e.vivoNeutral600,
+            inputBorderInverse: e.vivoNeutral600,
+            inputBorderNegative: e.vivoNeutral600,
+            inputBorderBrand: e.vivoNeutral600,
+            completedStep: e.vivoPurple600,
+            completedStepInverse: e.vivoPurple600,
+            completedStepNegative: e.vivoPurple600,
+            completedStepBrand: e.vivoPurple600,
+            control: e.vivoNeutral800,
+            controlActivated: e.vivoPurple600,
+            controlInverse: e.vivoNeutral800,
+            controlNegative: e.vivoNeutral800,
+            controlBrand: e.vivoNeutral800,
+            controlActivatedInverse: e.vivoPurple600,
+            controlActivatedNegative: e.vivoPurple600,
+            controlActivatedBrand: e.vivoPurple600,
+            controlError: e.vivoPepper600,
+            chevronIndicator: e.vivoNeutral600,
+            barTrack: e.vivoNeutral800,
+            barTrackInverse: e.vivoNeutral800,
+            barTrackNegative: e.vivoNeutral800,
+            barTrackBrand: e.vivoNeutral800,
+            loadingBar: e.vivoPurple600,
+            loadingBarBackground: e.vivoNeutral800,
+            toggleAndroidInactive: e.vivoNeutral500,
+            toggleAndroidBackgroundActive: e.vivoPurple300,
+            toggleAndroidActiveBrand: e.vivoPurple600,
+            toggleAndroidInactiveBrand: e.vivoNeutral500,
+            toggleAndroidBackgroundActiveBrand: e.vivoPurple300,
+            toggleAndroidBackgroundInactiveBrand: e.vivoNeutral800,
+            iosControlKnob: e.vivoNeutral100,
+            controlKnobInverse: e.vivoNeutral100,
+            controlKnobNegative: e.vivoNeutral100,
+            controlKnobBrand: e.vivoNeutral100,
+            divider: r(e.vivoNeutral0, 0.05),
+            dividerInverse: r(e.vivoNeutral0, 0.05),
+            dividerNegative: r(e.vivoNeutral0, 0.05),
+            dividerBrand: r(e.vivoNeutral0, 0.05),
+            navigationBarDivider: e.vivoNeutral950,
+            badge: e.vivoPepper700,
+            feedbackErrorBackground: e.vivoPepper600,
+            feedbackInfoBackground: e.vivoNeutral975,
+            brand: e.vivoPurple600,
+            brandHigh: r(e.vivoNeutral0, 0.05),
+            inverse: e.vivoNeutral100,
+            negative: e.vivoNeutral100,
+            neutralHigh: e.vivoNeutral100,
+            neutralHighBrand: e.vivoNeutral100,
+            neutralHighNegative: e.vivoNeutral100,
+            neutralMedium: e.vivoNeutral600,
+            neutralMediumInverse: e.vivoNeutral600,
+            neutralMediumNegative: e.vivoNeutral600,
+            neutralMediumBrand: e.vivoNeutral600,
+            neutralLow: e.vivoNeutral800,
+            neutralLowAlternative: e.vivoNeutral800,
+            textPrimary: e.vivoNeutral100,
+            textPrimaryInverse: e.vivoNeutral100,
+            textPrimaryNegative: e.vivoNeutral100,
+            textPrimaryBrand: e.vivoNeutral100,
+            textPrimaryMedia: e.vivoNeutral0,
+            textSecondary: e.vivoNeutral200,
+            textSecondaryInverse: e.vivoNeutral200,
+            textSecondaryNegative: e.vivoNeutral200,
+            textSecondaryBrand: e.vivoNeutral200,
+            textSecondaryMedia: e.vivoNeutral0,
+            success: e.vivoGreen600,
+            warning: e.vivoOrange600,
+            error: e.vivoPepper600,
+            textError: e.vivoPepper600,
+            textErrorInverse: e.vivoPepper600,
+            textErrorNegative: e.vivoPepper600,
+            textErrorBrand: e.vivoPepper600,
+            promo: e.vivoPurple600,
+            highlight: e.vivoPepper500,
+            successLow: e.vivoNeutral800,
+            warningLow: e.vivoNeutral800,
+            errorLow: e.vivoNeutral800,
+            promoLow: e.vivoNeutral800,
+            brandLow: e.vivoNeutral800,
+            successHigh: e.vivoGreen700,
+            warningHigh: e.vivoOrange200,
+            errorHigh: e.vivoPepper400,
+            promoHigh: e.vivoPurple300,
+            successHighInverse: e.vivoGreen900,
+            successHighNegative: e.vivoGreen900,
+            successHighBrand: e.vivoGreen900,
+            warningHighInverse: e.vivoOrange900,
+            warningHighNegative: e.vivoOrange900,
+            warningHighBrand: e.vivoOrange900,
+            errorHighInverse: e.vivoPepper800,
+            errorHighNegative: e.vivoPepper800,
+            errorHighBrand: e.vivoPepper800,
+            promoHighInverse: e.vivoPurple700,
+            promoHighNegative: e.vivoPurple700,
+            promoHighBrand: e.vivoPurple700,
+            textNavigationBarPrimary: e.vivoNeutral100,
+            textNavigationBarSecondary: e.vivoNeutral500,
+            textNavigationSearchBarHint: e.vivoNeutral500,
+            textNavigationSearchBarText: e.vivoNeutral100,
+            textAppBar: e.vivoNeutral600,
+            textAppBarSelected: e.vivoNeutral100,
+            iosGlassAppBar: e.vivoNeutral0,
+            iosGlassAppBarSelected: e.vivoPurple100,
+            customTabsBackground: e.vivoNeutral950,
+            tagTextPromo: e.vivoPurple300,
+            tagTextActive: e.vivoPurple600,
+            tagTextInactive: e.vivoNeutral600,
+            tagTextInfo: e.vivoPurple600,
+            tagTextSuccess: e.vivoGreen700,
+            tagTextWarning: e.vivoOrange200,
+            tagTextError: e.vivoPepper400,
+            tagBackgroundPromo: e.vivoNeutral800,
+            tagBackgroundActive: e.vivoNeutral800,
+            tagBackgroundInactive: e.vivoNeutral800,
+            tagBackgroundInfo: e.vivoNeutral800,
+            tagBackgroundSuccess: e.vivoNeutral800,
+            tagBackgroundWarning: e.vivoNeutral800,
+            tagBackgroundError: e.vivoNeutral800,
+            tagTextPromoInverse: e.vivoPurple300,
+            tagTextPromoNegative: e.vivoPurple300,
+            tagTextPromoBrand: e.vivoPurple300,
+            tagTextActiveInverse: e.vivoPurple600,
+            tagTextActiveNegative: e.vivoPurple600,
+            tagTextActiveBrand: e.vivoPurple600,
+            tagTextInactiveInverse: e.vivoNeutral600,
+            tagTextInactiveNegative: e.vivoNeutral600,
+            tagTextInactiveBrand: e.vivoNeutral600,
+            tagTextInfoInverse: e.vivoPurple600,
+            tagTextInfoNegative: e.vivoPurple600,
+            tagTextInfoBrand: e.vivoPurple600,
+            tagTextSuccessInverse: e.vivoGreen700,
+            tagTextSuccessNegative: e.vivoGreen700,
+            tagTextSuccessBrand: e.vivoGreen700,
+            tagTextWarningInverse: e.vivoOrange200,
+            tagTextWarningNegative: e.vivoOrange200,
+            tagTextWarningBrand: e.vivoOrange200,
+            tagTextErrorInverse: e.vivoPepper400,
+            tagTextErrorNegative: e.vivoPepper400,
+            tagTextErrorBrand: e.vivoPepper400,
+            tagBackgroundPromoInverse: e.vivoNeutral800,
+            tagBackgroundPromoNegative: e.vivoNeutral800,
+            tagBackgroundPromoBrand: e.vivoNeutral800,
+            tagBackgroundActiveInverse: e.vivoNeutral800,
+            tagBackgroundActiveNegative: e.vivoNeutral800,
+            tagBackgroundActiveBrand: e.vivoNeutral800,
+            tagBackgroundInactiveInverse: e.vivoNeutral800,
+            tagBackgroundInactiveNegative: e.vivoNeutral800,
+            tagBackgroundInactiveBrand: e.vivoNeutral800,
+            tagBackgroundInfoInverse: e.vivoNeutral800,
+            tagBackgroundInfoNegative: e.vivoNeutral800,
+            tagBackgroundInfoBrand: e.vivoNeutral800,
+            tagBackgroundSuccessInverse: e.vivoNeutral800,
+            tagBackgroundSuccessNegative: e.vivoNeutral800,
+            tagBackgroundSuccessBrand: e.vivoNeutral800,
+            tagBackgroundWarningInverse: e.vivoNeutral800,
+            tagBackgroundWarningNegative: e.vivoNeutral800,
+            tagBackgroundWarningBrand: e.vivoNeutral800,
+            tagBackgroundErrorInverse: e.vivoNeutral800,
+            tagBackgroundErrorNegative: e.vivoNeutral800,
+            tagBackgroundErrorBrand: e.vivoNeutral800,
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.vivoNeutral975, 0)} 0%, ${r(e.vivoNeutral975, 0.4)} 30%, ${r(e.vivoNeutral975, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.vivoNeutral975, 0.7)
         },
         borderRadii: {
             avatar: "50%",
@@ -619,11 +705,12 @@ const e = {
             container: "24px",
             indicator: "24px",
             chip: "24px",
-            tag: "10px",
+            tag: "8px",
             input: "16px",
             popup: "16px",
             sheet: "24px",
-            mediaSmall: "12px"
+            mediaSmall: "12px",
+            snackbar: "24px"
         },
         textPresets: {
             button: {
@@ -645,8 +732,8 @@ const e = {
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
-                    mobile: 14
+                    desktop: 14,
+                    mobile: 12
                 }
             },
             cardPretitleDefault: {
@@ -665,8 +752,8 @@ const e = {
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
-                    mobile: 14
+                    desktop: 14,
+                    mobile: 12
                 }
             },
             cardSubtitleDefault: {
@@ -685,8 +772,8 @@ const e = {
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
-                    mobile: 14
+                    desktop: 14,
+                    mobile: 12
                 }
             },
             cardTitle: {
@@ -708,8 +795,8 @@ const e = {
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
-                    mobile: 14
+                    desktop: 18,
+                    mobile: 16
                 }
             },
             chipLabel: {
@@ -784,7 +871,7 @@ const e = {
                 weight: "regular"
             },
             rowTitle: {
-                weight: "regular"
+                weight: "medium"
             },
             stepperStepLabel: {
                 lineHeight: {
@@ -927,34 +1014,34 @@ const e = {
             title2: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 24
+                    mobile: 20
                 },
                 size: {
-                    desktop: 18,
-                    mobile: 16
+                    desktop: 16,
+                    mobile: 14
                 },
                 weight: "medium"
             },
             title3: {
                 lineHeight: {
-                    desktop: 28,
+                    desktop: 24,
                     mobile: 24
                 },
                 size: {
-                    desktop: 24,
-                    mobile: 18
+                    desktop: 18,
+                    mobile: 16
                 },
                 weight: "medium"
             },
             title4: {
                 lineHeight: {
-                    desktop: 40,
-                    mobile: 32
-                },
-                size: {
                     desktop: 32,
                     mobile: 24
                 },
+                size: {
+                    desktop: 28,
+                    mobile: 20
+                },
                 weight: "medium"
             }
         },
@@ -962,6 +1049,15 @@ const e = {
             successFeedback: "inverse",
             brandLoadingScreen: "inverse"
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: !0,
+                brand: !0,
+                negative: !0,
+                alternative: !1,
+                media: !0
+            }
+        },
         spacing: {
             buttonDefaultPadding: {
                 left: {
@@ -1006,9 +1102,17 @@ const e = {
                     mobile: 8,
                     desktop: 8
                 },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                },
                 bottom: {
                     mobile: 8,
                     desktop: 8
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 16
                 }
             },
             tagPadding: {
@@ -1076,7 +1180,21 @@ const e = {
                     mobile: 16,
                     desktop: 40
                 }
+            },
+            boxedDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            },
+            responsiveLayoutMargin: {
+                mobile: 8,
+                desktop: 48
             }
         }
     });
-export { n as getVivoEvolutionSkin, e as palette };
+export { i as getVivoEvolutionSkin, e as palette };