@telefonica/mistica 16.71.0 → 17.0.0

package/dist-es/skins/movistar.js

@@ -1,325 +1,320 @@
 import { MOVISTAR_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
-    movistarBlue: "#0B9CEA",
-    movistarBlue10: "#E6F5FD",
-    movistarBlue15: "#CEEBFB",
-    movistarBlue20: "#B3E1FB",
-    movistarBlue30: "#80CEF9",
-    movistarBlue40: "#4DBAF7",
-    movistarBlue55: "#008EDD",
-    movistarBlueHC: "#066FCB",
-    movistarBlueHC55: "#055EAC",
-    movistarBlueHC65: "#055398",
-    movistarGreen: "#5CB615",
-    movistarGreen10: "#EFF8E8",
-    movistarGreen30: "#ADDA8A",
-    movistarGreen40: "#8DCC5B",
-    movistarGreen55: "#52A413",
-    movistarGreen60: "#499110",
-    movistarGreen70: "#407F0F",
-    pepper: "#FF374A",
-    pepper10: "#FFEBED",
-    pepper40: "#FF7380",
-    pepper45: "#FF5F6E",
-    pepper55: "#D73241",
-    pepper60: "#CC2C3B",
-    pepper65: "#BF2937",
-    pepper70: "#B22634",
-    egg: "#F28D15",
-    egg10: "#FEF4E8",
-    egg40: "#F6AF5B",
-    egg55: "#D97D0D",
-    egg80: "#6D3F09",
-    pink: "#E63780",
+    movistarBlue: "#0066FF",
+    movistarWhite: "#FEFAF5",
+    movistarBlack: "#262423",
+    blue100: "#F4F7F8",
+    blue200: "#E8F4FA",
+    blue300: "#80B3FF",
+    blue600: "#2F7DFF",
+    blue800: "#0149B3",
+    blueLight: "#D3EEFF",
+    blueHigh: "#005EEB",
+    blueDark: "#022D67",
+    red: "#C10000",
+    red350: "#FF8A8A",
+    red600: "#CF381F",
+    redHigh: "#AD0000",
+    salmon100: "#FEEEE6",
+    salmon200: "#FDE5D7",
+    salmonLight: "#FFDAC7",
+    salmonDark: "#62301A",
+    yellow: "#EDB800",
+    yellow200: "#FFF3D1",
+    yellow400: "#FFCB11",
+    yellow500: "#C59A00",
+    yellow600: "#BFA960",
+    yellowLight: "#FFF0C0",
+    yellowHigh: "#5E4A09",
+    yellowDark: "#5E4A09",
+    emerald: "#048239",
+    emeraldHigh: "#036D30",
+    green200: "#EBF9DF",
+    green400: "#8DCC5B",
+    green700: "#407F0F",
+    greenLight: "#E2F8D5",
+    greenHigh: "#CEF7BF",
+    greenDark: "#38552B",
     pink45: "#EB5F99",
     pink55: "#C42F6D",
-    purple: "#A13EA1",
-    purple10: "#F6ECF6",
-    purple35: "#C78BC7",
-    purple40: "#BD78BD",
-    purple70: "#712B71",
-    grey1: "#F6F6F6",
-    grey2: "#EEEEEE",
-    grey3: "#DDDDDD",
-    grey4: "#949494",
-    grey5: "#6B6C6F",
-    grey6: "#313235",
+    grey100: "#FAF7F5",
+    grey200: "#F3EEEA",
+    grey300: "#DFDBD6",
+    grey400: "#9F9C99",
+    grey500: "#807D7B",
+    grey600: "#605E5C",
+    grey700: "#403F3D",
     white: "#FFFFFF",
+    white100: "#FFFAF5",
     black: "#000000",
-    movistarBlueDark: "#0B2739",
-    darkModeBlack: "#061824",
-    darkModeGrey: "#081F2E",
-    darkModeGrey2: "#EAEBEE",
-    darkModeGrey3: "#CED4D7",
-    darkModeGrey4: "#89969F",
-    darkModeGrey5: "#6D7D88",
-    darkModeGrey6: "#3C5261",
-    darkModeGrey7: "#032F46"
+    darkModeBlack: "#070706",
+    darkModeGrey: "#151414",
+    darkModeMovistarBlue: "#227AFF"
 }, i = ()=>({
         name: t,
         colors: {
             background: e.white,
-            backgroundAlternative: e.grey1,
+            backgroundAlternative: e.movistarWhite,
             backgroundBrand: e.movistarBlue,
-            backgroundNegative: e.movistarBlueDark,
-            backgroundBrandSecondary: e.movistarBlueDark,
+            backgroundNegative: e.movistarBlack,
+            backgroundBrandSecondary: e.movistarBlack,
             backgroundContainer: e.white,
-            backgroundContainerError: e.pepper10,
-            backgroundContainerHover: r(e.black, 0.05),
-            backgroundContainerPressed: r(e.black, 0.08),
+            backgroundContainerError: e.salmon100,
+            backgroundContainerHover: r(e.movistarBlack, 0.05),
+            backgroundContainerPressed: r(e.movistarBlack, 0.08),
             backgroundContainerBrand: e.movistarBlue,
-            backgroundContainerBrandHover: r(e.black, 0.1),
-            backgroundContainerBrandPressed: r(e.black, 0.2),
-            backgroundContainerBrandOverInverse: e.movistarBlue55,
-            backgroundContainerNegative: r(e.black, 0.2),
-            backgroundContainerBrandOverBrand: e.movistarBlue55,
-            backgroundContainerAlternative: e.grey1,
-            backgroundOverlay: r(e.movistarBlueDark, 0.6),
-            backgroundSkeleton: e.grey2,
-            backgroundSkeletonInverse: e.movistarBlue55,
+            backgroundContainerBrandHover: r(e.movistarBlack, 0.2),
+            backgroundContainerBrandPressed: r(e.movistarBlack, 0.4),
+            backgroundContainerBrandOverInverse: e.blue800,
+            backgroundContainerNegative: r(e.movistarBlack, 0.2),
+            backgroundContainerBrandOverBrand: e.blue800,
+            backgroundContainerAlternative: e.grey100,
+            backgroundOverlay: r(e.movistarBlack, 0.6),
+            backgroundSkeleton: e.grey200,
+            backgroundSkeletonInverse: e.blue800,
             backgroundSkeletonNegative: r(e.black, 0.2),
-            backgroundSkeletonBrand: e.movistarBlue55,
+            backgroundSkeletonBrand: e.blue800,
             backgroundBrandTop: e.movistarBlue,
             backgroundBrandBottom: e.movistarBlue,
             appBarBackground: e.white,
             navigationBarBackground: e.movistarBlue,
-            backgroundDropZoneHover: e.movistarBlue10,
-            backgroundDropZoneDragover: e.movistarBlue15,
-            backgroundDropZoneBrandHover: r(e.black, 0.1),
-            backgroundDropZoneBrandDragover: r(e.black, 0.2),
+            backgroundDropZoneHover: r(e.movistarBlue, 0.05),
+            backgroundDropZoneDragover: r(e.movistarBlue, 0.08),
+            backgroundDropZoneBrandHover: r(e.movistarBlack, 0.08),
+            backgroundDropZoneBrandDragover: r(e.movistarBlack, 0.1),
             backgroundDropZoneNegativeHover: r(e.white, 0.1),
             backgroundDropZoneNegativeDragover: r(e.white, 0.17),
-            backgroundDropZoneMediaHover: r(e.black, 0.1),
-            backgroundDropZoneMediaDragover: r(e.black, 0.2),
-            skeletonWave: e.grey2,
-            borderLow: e.grey1,
-            border: e.grey3,
-            borderHigh: e.grey5,
-            borderSelected: e.movistarBlue,
-            coverBackgroundHover: r(e.black, 0.25),
-            coverBackgroundPressed: r(e.black, 0.35),
-            buttonDangerBackground: e.pepper55,
-            buttonDangerBackgroundPressed: e.pepper70,
-            buttonDangerBackgroundHover: e.pepper65,
+            backgroundDropZoneMediaHover: r(e.movistarBlack, 0.2),
+            backgroundDropZoneMediaDragover: r(e.movistarBlack, 0.4),
+            skeletonWave: e.grey200,
+            borderLow: e.grey100,
+            border: e.grey300,
+            borderHigh: e.grey600,
+            borderSelected: e.blue800,
+            coverBackgroundHover: r(e.movistarBlack, 0.25),
+            coverBackgroundPressed: r(e.movistarBlack, 0.35),
+            buttonDangerBackground: e.red,
+            buttonDangerBackgroundPressed: e.redHigh,
+            buttonDangerBackgroundHover: e.redHigh,
             buttonLinkDangerBackgroundInverse: e.white,
             buttonLinkDangerBackgroundNegative: e.white,
             buttonLinkDangerBackgroundBrand: e.white,
             buttonLinkDangerBackgroundMedia: e.white,
-            buttonLinkDangerBackgroundPressed: e.pepper10,
-            buttonLinkDangerBackgroundInversePressed: e.pepper10,
-            buttonLinkDangerBackgroundNegativePressed: e.pepper10,
-            buttonLinkDangerBackgroundBrandPressed: e.pepper10,
-            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
-            buttonLinkBackgroundPressed: e.movistarBlue10,
-            buttonLinkBackgroundInversePressed: r(e.white, 0.2),
-            buttonLinkBackgroundNegativePressed: r(e.white, 0.2),
-            buttonLinkBackgroundBrandPressed: r(e.white, 0.2),
-            buttonLinkBackgroundMediaPressed: r(e.white, 0.2),
-            buttonPrimaryBackground: e.movistarBlueHC,
+            buttonLinkDangerBackgroundPressed: e.salmon100,
+            buttonLinkDangerBackgroundInversePressed: e.salmon100,
+            buttonLinkDangerBackgroundNegativePressed: e.salmon100,
+            buttonLinkDangerBackgroundBrandPressed: e.salmon100,
+            buttonLinkDangerBackgroundMediaPressed: e.salmon100,
+            buttonLinkBackgroundPressed: e.blue200,
+            buttonLinkBackgroundInversePressed: r(e.white, 0.3),
+            buttonLinkBackgroundNegativePressed: r(e.white, 0.3),
+            buttonLinkBackgroundBrandPressed: r(e.white, 0.3),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.3),
+            buttonPrimaryBackground: e.movistarBlue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
             buttonPrimaryBackgroundBrand: e.white,
             buttonPrimaryBackgroundMedia: e.white,
-            buttonPrimaryBackgroundHover: e.movistarBlueHC55,
-            buttonPrimaryBackgroundInverseHover: e.movistarBlue10,
-            buttonPrimaryBackgroundNegativeHover: e.movistarBlue10,
-            buttonPrimaryBackgroundBrandHover: e.movistarBlue10,
-            buttonPrimaryBackgroundMediaHover: e.movistarBlue10,
-            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
-            buttonPrimaryBackgroundInversePressed: e.movistarBlue10,
-            buttonPrimaryBackgroundNegativePressed: e.movistarBlue10,
-            buttonPrimaryBackgroundBrandPressed: e.movistarBlue10,
-            buttonPrimaryBackgroundMediaPressed: e.movistarBlue10,
+            buttonPrimaryBackgroundHover: e.blueHigh,
+            buttonPrimaryBackgroundInverseHover: e.blue200,
+            buttonPrimaryBackgroundNegativeHover: e.blue100,
+            buttonPrimaryBackgroundBrandHover: e.blue100,
+            buttonPrimaryBackgroundMediaHover: e.blue200,
+            buttonPrimaryBackgroundPressed: e.blueHigh,
+            buttonPrimaryBackgroundInversePressed: e.blue200,
+            buttonPrimaryBackgroundNegativePressed: e.blue100,
+            buttonPrimaryBackgroundBrandPressed: e.blue100,
+            buttonPrimaryBackgroundMediaPressed: e.blue200,
             buttonSecondaryBackgroundBrand: r(e.white, 0),
-            buttonSecondaryBorder: e.movistarBlueHC,
+            buttonSecondaryBorder: e.movistarBlue,
             buttonSecondaryBorderInverse: e.white,
             buttonSecondaryBorderNegative: e.white,
             buttonSecondaryBorderBrand: e.white,
             buttonSecondaryBorderMedia: e.white,
-            buttonSecondaryBorderPressed: e.movistarBlueHC65,
+            buttonSecondaryBorderPressed: e.blue800,
             buttonSecondaryBorderInversePressed: e.white,
             buttonSecondaryBorderNegativePressed: e.white,
             buttonSecondaryBorderBrandPressed: e.white,
             buttonSecondaryBorderMediaPressed: e.white,
-            buttonSecondaryBackgroundHover: e.movistarBlue10,
+            buttonSecondaryBackgroundHover: e.blue200,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.2),
             buttonSecondaryBackgroundNegativeHover: r(e.white, 0.2),
             buttonSecondaryBackgroundBrandHover: r(e.white, 0.2),
             buttonSecondaryBackgroundMediaHover: r(e.white, 0.2),
-            buttonSecondaryBackgroundPressed: e.movistarBlue15,
+            buttonSecondaryBackgroundPressed: e.blue200,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.3),
             buttonSecondaryBackgroundNegativePressed: r(e.white, 0.3),
             buttonSecondaryBackgroundBrandPressed: r(e.white, 0.3),
             buttonSecondaryBackgroundMediaPressed: r(e.white, 0.3),
             textButtonPrimary: e.white,
-            textButtonPrimaryInverse: e.movistarBlueHC,
-            textButtonPrimaryNegative: e.movistarBlueHC,
-            textButtonPrimaryBrand: e.movistarBlueHC,
-            textButtonPrimaryMedia: e.movistarBlueHC,
-            textButtonPrimaryInversePressed: e.movistarBlueHC,
-            textButtonPrimaryNegativePressed: e.movistarBlueHC,
-            textButtonPrimaryBrandPressed: e.movistarBlueHC,
-            textButtonPrimaryMediaPressed: e.movistarBlueHC,
-            textButtonSecondary: e.movistarBlueHC,
+            textButtonPrimaryInverse: e.movistarBlue,
+            textButtonPrimaryNegative: e.movistarBlue,
+            textButtonPrimaryBrand: e.movistarBlue,
+            textButtonPrimaryMedia: e.movistarBlue,
+            textButtonPrimaryInversePressed: e.blue800,
+            textButtonPrimaryNegativePressed: e.blue800,
+            textButtonPrimaryBrandPressed: e.blue800,
+            textButtonPrimaryMediaPressed: e.blueHigh,
+            textButtonSecondary: e.movistarBlue,
             textButtonSecondaryInverse: e.white,
             textButtonSecondaryNegative: e.white,
             textButtonSecondaryBrand: e.white,
             textButtonSecondaryMedia: e.white,
-            textButtonSecondaryPressed: e.movistarBlueHC55,
+            textButtonSecondaryPressed: e.blue800,
             textButtonSecondaryInversePressed: e.white,
             textButtonSecondaryNegativePressed: e.white,
             textButtonSecondaryBrandPressed: e.white,
             textButtonSecondaryMediaPressed: e.white,
-            textLink: e.movistarBlueHC,
+            textLink: e.movistarBlue,
             textLinkInverse: e.white,
             textLinkNegative: e.white,
             textLinkBrand: e.white,
             textLinkMedia: e.white,
-            textLinkDanger: e.pepper60,
-            textLinkDangerMedia: e.pepper60,
-            textLinkSnackbar: e.movistarBlue30,
-            textActivated: e.movistarBlueHC,
-            textBrand: e.movistarBlueHC,
-            inputBorder: e.grey4,
+            textLinkDanger: e.red,
+            textLinkDangerMedia: e.red,
+            textLinkSnackbar: e.blue300,
+            textActivated: e.blueHigh,
+            textBrand: e.blueHigh,
+            inputBorder: e.grey500,
             inputBorderInverse: e.white,
             inputBorderNegative: e.white,
             inputBorderBrand: e.white,
-            completedStep: e.movistarBlueHC,
-            completedStepInverse: e.movistarBlue55,
-            completedStepNegative: e.movistarBlue55,
-            completedStepBrand: e.movistarBlue55,
-            control: e.grey4,
+            completedStep: e.movistarBlue,
+            completedStepInverse: e.blue100,
+            completedStepNegative: e.blue100,
+            completedStepBrand: e.blue100,
+            control: e.grey500,
             controlActivated: e.movistarBlue,
-            controlInverse: e.movistarBlue20,
-            controlNegative: e.movistarBlue20,
-            controlBrand: e.movistarBlue20,
+            controlInverse: e.blueLight,
+            controlNegative: e.blueLight,
+            controlBrand: e.blueLight,
             controlActivatedInverse: e.white,
             controlActivatedNegative: e.white,
             controlActivatedBrand: e.white,
-            controlError: e.pepper55,
-            chevronIndicator: e.grey5,
-            barTrack: e.grey3,
-            barTrackInverse: r(e.black, 0.14),
-            barTrackNegative: r(e.black, 0.14),
-            barTrackBrand: r(e.black, 0.14),
-            loadingBar: e.movistarBlue,
-            loadingBarBackground: e.grey2,
-            toggleAndroidInactive: e.grey2,
-            toggleAndroidBackgroundActive: e.movistarBlue20,
+            controlError: e.red,
+            chevronIndicator: e.movistarBlue,
+            barTrack: e.grey300,
+            barTrackInverse: r(e.movistarBlack, 0.14),
+            barTrackNegative: r(e.movistarBlack, 0.14),
+            barTrackBrand: r(e.movistarBlack, 0.14),
+            loadingBar: e.blueLight,
+            loadingBarBackground: e.blueHigh,
+            toggleAndroidInactive: e.grey200,
+            toggleAndroidBackgroundActive: e.blue300,
             toggleAndroidActiveBrand: e.white,
-            toggleAndroidInactiveBrand: e.grey2,
-            toggleAndroidBackgroundActiveBrand: e.movistarBlue20,
-            toggleAndroidBackgroundInactiveBrand: e.movistarBlue20,
+            toggleAndroidInactiveBrand: e.grey200,
+            toggleAndroidBackgroundActiveBrand: e.blue300,
+            toggleAndroidBackgroundInactiveBrand: e.blueLight,
             iosControlKnob: e.white,
             controlKnobInverse: e.movistarBlue,
             controlKnobNegative: e.movistarBlue,
             controlKnobBrand: e.movistarBlue,
-            divider: e.grey3,
+            divider: e.grey200,
             dividerInverse: r(e.white, 0.2),
             dividerNegative: r(e.white, 0.2),
             dividerBrand: r(e.white, 0.2),
             navigationBarDivider: e.movistarBlue,
-            badge: e.pepper55,
-            feedbackErrorBackground: e.pepper55,
-            feedbackInfoBackground: e.movistarBlueDark,
+            badge: e.red,
+            feedbackErrorBackground: e.red,
+            feedbackInfoBackground: e.blueDark,
             brand: e.movistarBlue,
-            brandHigh: e.movistarBlue55,
+            brandHigh: e.blueHigh,
             inverse: e.white,
             negative: e.white,
-            neutralHigh: e.movistarBlueDark,
+            neutralHigh: e.movistarBlack,
             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.movistarBlueDark,
+            neutralMedium: e.grey600,
+            neutralMediumInverse: e.grey600,
+            neutralMediumNegative: e.grey600,
+            neutralMediumBrand: e.grey600,
+            neutralLow: e.grey100,
+            neutralLowAlternative: e.grey200,
+            textPrimary: e.movistarBlack,
             textPrimaryInverse: e.white,
             textPrimaryNegative: e.white,
             textPrimaryBrand: e.white,
             textPrimaryMedia: e.white,
-            textSecondary: e.grey5,
-            textSecondaryInverse: e.movistarBlue10,
-            textSecondaryNegative: e.movistarBlue10,
-            textSecondaryBrand: e.movistarBlue10,
-            textSecondaryMedia: e.white,
-            success: e.movistarGreen55,
-            warning: e.egg55,
-            error: e.pepper55,
-            textError: e.pepper55,
+            textSecondary: e.grey600,
+            textSecondaryInverse: e.movistarWhite,
+            textSecondaryNegative: e.movistarWhite,
+            textSecondaryBrand: e.movistarWhite,
+            textSecondaryMedia: e.movistarWhite,
+            success: e.emerald,
+            warning: e.yellow600,
+            error: e.red,
+            textError: e.red,
             textErrorInverse: e.white,
             textErrorNegative: e.white,
             textErrorBrand: e.white,
-            promo: e.pepper70,
+            promo: e.redHigh,
             highlight: e.pink55,
-            successLow: e.movistarGreen10,
-            warningLow: e.egg10,
-            errorLow: e.pepper10,
-            promoLow: e.pepper10,
-            brandLow: e.movistarBlue10,
-            successHigh: e.movistarGreen70,
-            warningHigh: e.egg80,
-            errorHigh: e.pepper70,
-            promoHigh: e.pepper70,
-            successHighInverse: e.movistarGreen70,
-            successHighNegative: e.movistarGreen70,
-            successHighBrand: e.movistarGreen70,
-            warningHighInverse: e.egg80,
-            warningHighNegative: e.egg80,
-            warningHighBrand: e.egg80,
-            errorHighInverse: e.pepper70,
-            errorHighNegative: e.pepper70,
-            errorHighBrand: e.pepper70,
-            promoHighInverse: e.pepper70,
-            promoHighNegative: e.pepper70,
-            promoHighBrand: e.pepper70,
+            successLow: e.green200,
+            warningLow: e.yellow200,
+            errorLow: e.salmon100,
+            promoLow: e.salmon100,
+            brandLow: e.blueLight,
+            successHigh: e.green700,
+            warningHigh: e.yellowHigh,
+            errorHigh: e.redHigh,
+            promoHigh: e.redHigh,
+            successHighInverse: e.emeraldHigh,
+            successHighNegative: e.emeraldHigh,
+            successHighBrand: e.emeraldHigh,
+            warningHighInverse: e.yellowHigh,
+            warningHighNegative: e.yellowHigh,
+            warningHighBrand: e.yellowHigh,
+            errorHighInverse: e.redHigh,
+            errorHighNegative: e.redHigh,
+            errorHighBrand: e.redHigh,
+            promoHighInverse: e.redHigh,
+            promoHighNegative: e.redHigh,
+            promoHighBrand: e.redHigh,
             textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.movistarBlue20,
-            textNavigationSearchBarHint: e.movistarBlue20,
+            textNavigationBarSecondary: e.blue300,
+            textNavigationSearchBarHint: e.blue300,
             textNavigationSearchBarText: e.white,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.movistarBlueHC,
-            iosGlassAppBar: e.movistarBlueDark,
-            iosGlassAppBarSelected: e.movistarBlueHC55,
+            textAppBar: e.grey600,
+            textAppBarSelected: e.blue800,
+            iosGlassAppBar: e.movistarBlack,
+            iosGlassAppBarSelected: e.blue800,
             customTabsBackground: e.white,
             tagTextPromo: e.white,
-            tagTextActive: e.movistarBlueHC,
-            tagTextInactive: e.grey5,
-            tagTextInfo: e.white,
-            tagTextSuccess: e.movistarGreen70,
-            tagTextWarning: e.egg80,
-            tagTextError: e.pepper70,
-            tagBackgroundPromo: e.pepper70,
-            tagBackgroundActive: e.movistarBlue10,
-            tagBackgroundInactive: e.grey1,
-            tagBackgroundInfo: e.movistarBlueDark,
-            tagBackgroundSuccess: e.movistarGreen10,
-            tagBackgroundWarning: e.egg10,
-            tagBackgroundError: e.pepper10,
-            tagTextPromoInverse: e.pepper70,
-            tagTextPromoNegative: e.pepper70,
-            tagTextPromoBrand: e.pepper70,
-            tagTextActiveInverse: e.movistarBlueHC,
-            tagTextActiveNegative: e.movistarBlueHC,
-            tagTextActiveBrand: e.movistarBlueHC,
-            tagTextInactiveInverse: e.grey5,
-            tagTextInactiveNegative: e.grey5,
-            tagTextInactiveBrand: e.grey5,
-            tagTextInfoInverse: e.movistarBlueDark,
-            tagTextInfoNegative: e.movistarBlueDark,
-            tagTextInfoBrand: e.movistarBlueDark,
-            tagTextSuccessInverse: e.movistarGreen70,
-            tagTextSuccessNegative: e.movistarGreen70,
-            tagTextSuccessBrand: e.movistarGreen70,
-            tagTextWarningInverse: e.egg80,
-            tagTextWarningNegative: e.egg80,
-            tagTextWarningBrand: e.egg80,
-            tagTextErrorInverse: e.pepper70,
-            tagTextErrorNegative: e.pepper70,
-            tagTextErrorBrand: e.pepper70,
+            tagTextActive: e.blueHigh,
+            tagTextInactive: e.grey600,
+            tagTextInfo: e.blueHigh,
+            tagTextSuccess: e.emeraldHigh,
+            tagTextWarning: e.yellowHigh,
+            tagTextError: e.redHigh,
+            tagBackgroundPromo: e.redHigh,
+            tagBackgroundActive: e.blue200,
+            tagBackgroundInactive: e.grey200,
+            tagBackgroundInfo: e.blue200,
+            tagBackgroundSuccess: e.green200,
+            tagBackgroundWarning: e.yellowLight,
+            tagBackgroundError: e.salmon200,
+            tagTextPromoInverse: e.redHigh,
+            tagTextPromoNegative: e.redHigh,
+            tagTextPromoBrand: e.redHigh,
+            tagTextActiveInverse: e.blueHigh,
+            tagTextActiveNegative: e.blueHigh,
+            tagTextActiveBrand: e.blueHigh,
+            tagTextInactiveInverse: e.grey600,
+            tagTextInactiveNegative: e.grey600,
+            tagTextInactiveBrand: e.grey600,
+            tagTextInfoInverse: e.blueHigh,
+            tagTextInfoNegative: e.blueHigh,
+            tagTextInfoBrand: e.blueHigh,
+            tagTextSuccessInverse: e.green700,
+            tagTextSuccessNegative: e.green700,
+            tagTextSuccessBrand: e.green700,
+            tagTextWarningInverse: e.yellowHigh,
+            tagTextWarningNegative: e.yellowHigh,
+            tagTextWarningBrand: e.yellowHigh,
+            tagTextErrorInverse: e.redHigh,
+            tagTextErrorNegative: e.redHigh,
+            tagTextErrorBrand: e.redHigh,
             tagBackgroundPromoInverse: e.white,
             tagBackgroundPromoNegative: e.white,
             tagBackgroundPromoBrand: e.white,
@@ -362,10 +357,10 @@ const e = {
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.darkModeGrey6,
-            backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundSkeletonNegative: e.darkModeGrey6,
-            backgroundSkeletonBrand: e.darkModeGrey6,
+            backgroundSkeleton: e.grey600,
+            backgroundSkeletonInverse: e.grey600,
+            backgroundSkeletonNegative: e.grey600,
+            backgroundSkeletonBrand: e.grey600,
             backgroundBrandTop: e.darkModeBlack,
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
@@ -374,20 +369,20 @@ const e = {
             backgroundDropZoneDragover: r(e.white, 0.08),
             backgroundDropZoneBrandHover: r(e.white, 0.03),
             backgroundDropZoneBrandDragover: r(e.white, 0.05),
-            backgroundDropZoneNegativeHover: r(e.white, 0.15),
-            backgroundDropZoneNegativeDragover: r(e.white, 0.25),
+            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.darkModeGrey6,
+            skeletonWave: e.grey600,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderHigh: e.darkModeGrey5,
-            borderSelected: e.movistarBlue,
+            borderHigh: e.grey500,
+            borderSelected: e.darkModeMovistarBlue,
             coverBackgroundHover: r(e.darkModeBlack, 0.25),
             coverBackgroundPressed: r(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.pepper55,
-            buttonDangerBackgroundPressed: e.pepper70,
-            buttonDangerBackgroundHover: e.pepper65,
+            buttonDangerBackground: e.red,
+            buttonDangerBackgroundPressed: e.redHigh,
+            buttonDangerBackgroundHover: e.redHigh,
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
             buttonLinkDangerBackgroundNegative: r(e.white, 0),
             buttonLinkDangerBackgroundBrand: r(e.white, 0),
@@ -396,37 +391,37 @@ const e = {
             buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundNegativePressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundBrandPressed: r(e.white, 0.08),
-            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
+            buttonLinkDangerBackgroundMediaPressed: e.salmon100,
             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.2),
-            buttonPrimaryBackground: e.movistarBlueHC,
-            buttonPrimaryBackgroundInverse: e.movistarBlueHC,
-            buttonPrimaryBackgroundNegative: e.movistarBlueHC,
-            buttonPrimaryBackgroundBrand: e.movistarBlueHC,
+            buttonPrimaryBackground: e.movistarBlue,
+            buttonPrimaryBackgroundInverse: e.movistarBlue,
+            buttonPrimaryBackgroundNegative: e.movistarBlue,
+            buttonPrimaryBackgroundBrand: e.movistarBlue,
             buttonPrimaryBackgroundMedia: e.white,
-            buttonPrimaryBackgroundHover: e.movistarBlueHC55,
-            buttonPrimaryBackgroundInverseHover: e.movistarBlueHC65,
-            buttonPrimaryBackgroundNegativeHover: e.movistarBlueHC65,
-            buttonPrimaryBackgroundBrandHover: e.movistarBlueHC65,
-            buttonPrimaryBackgroundMediaHover: e.movistarBlue10,
-            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
-            buttonPrimaryBackgroundInversePressed: e.movistarBlueHC65,
-            buttonPrimaryBackgroundNegativePressed: e.movistarBlueHC65,
-            buttonPrimaryBackgroundBrandPressed: e.movistarBlueHC65,
-            buttonPrimaryBackgroundMediaPressed: e.movistarBlue10,
+            buttonPrimaryBackgroundHover: e.blueHigh,
+            buttonPrimaryBackgroundInverseHover: e.blue800,
+            buttonPrimaryBackgroundNegativeHover: e.blue800,
+            buttonPrimaryBackgroundBrandHover: e.blue800,
+            buttonPrimaryBackgroundMediaHover: e.blue200,
+            buttonPrimaryBackgroundPressed: e.blue800,
+            buttonPrimaryBackgroundInversePressed: e.blue800,
+            buttonPrimaryBackgroundNegativePressed: e.blue800,
+            buttonPrimaryBackgroundBrandPressed: e.blue800,
+            buttonPrimaryBackgroundMediaPressed: e.blue200,
             buttonSecondaryBackgroundBrand: r(e.white, 0),
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderInverse: e.darkModeGrey2,
-            buttonSecondaryBorderNegative: e.darkModeGrey2,
-            buttonSecondaryBorderBrand: e.darkModeGrey2,
+            buttonSecondaryBorderInverse: e.grey200,
+            buttonSecondaryBorderNegative: e.grey200,
+            buttonSecondaryBorderBrand: e.grey200,
             buttonSecondaryBorderMedia: e.white,
             buttonSecondaryBorderPressed: e.white,
-            buttonSecondaryBorderInversePressed: e.darkModeGrey2,
-            buttonSecondaryBorderNegativePressed: e.darkModeGrey2,
-            buttonSecondaryBorderBrandPressed: e.darkModeGrey2,
+            buttonSecondaryBorderInversePressed: e.grey200,
+            buttonSecondaryBorderNegativePressed: e.grey200,
+            buttonSecondaryBorderBrandPressed: e.grey200,
             buttonSecondaryBorderMediaPressed: e.white,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
@@ -442,191 +437,191 @@ const e = {
             textButtonPrimaryInverse: e.white,
             textButtonPrimaryNegative: e.white,
             textButtonPrimaryBrand: e.white,
-            textButtonPrimaryMedia: e.movistarBlueHC,
-            textButtonPrimaryInversePressed: e.white,
-            textButtonPrimaryNegativePressed: e.white,
-            textButtonPrimaryBrandPressed: e.white,
-            textButtonPrimaryMediaPressed: e.movistarBlueHC,
-            textButtonSecondary: e.darkModeGrey2,
-            textButtonSecondaryInverse: e.darkModeGrey2,
-            textButtonSecondaryNegative: e.darkModeGrey2,
-            textButtonSecondaryBrand: e.darkModeGrey2,
+            textButtonPrimaryMedia: e.movistarBlue,
+            textButtonPrimaryInversePressed: e.blueLight,
+            textButtonPrimaryNegativePressed: e.blueLight,
+            textButtonPrimaryBrandPressed: e.blueLight,
+            textButtonPrimaryMediaPressed: e.blueHigh,
+            textButtonSecondary: e.grey200,
+            textButtonSecondaryInverse: e.grey200,
+            textButtonSecondaryNegative: e.grey200,
+            textButtonSecondaryBrand: e.grey200,
             textButtonSecondaryMedia: e.white,
-            textButtonSecondaryPressed: e.darkModeGrey2,
-            textButtonSecondaryInversePressed: e.darkModeGrey2,
-            textButtonSecondaryNegativePressed: e.darkModeGrey2,
-            textButtonSecondaryBrandPressed: e.darkModeGrey2,
+            textButtonSecondaryPressed: e.grey200,
+            textButtonSecondaryInversePressed: e.grey200,
+            textButtonSecondaryNegativePressed: e.grey200,
+            textButtonSecondaryBrandPressed: e.grey200,
             textButtonSecondaryMediaPressed: e.white,
-            textLink: e.movistarBlue,
-            textLinkInverse: e.movistarBlue,
-            textLinkNegative: e.movistarBlue,
-            textLinkBrand: e.movistarBlue,
+            textLink: e.darkModeMovistarBlue,
+            textLinkInverse: e.darkModeMovistarBlue,
+            textLinkNegative: e.darkModeMovistarBlue,
+            textLinkBrand: e.darkModeMovistarBlue,
             textLinkMedia: e.white,
-            textLinkDanger: e.pepper45,
-            textLinkDangerMedia: e.pepper60,
-            textLinkSnackbar: e.movistarBlue,
-            textActivated: e.movistarBlue,
-            textBrand: e.movistarBlue,
-            inputBorder: e.darkModeGrey4,
-            inputBorderInverse: e.darkModeGrey4,
-            inputBorderNegative: e.darkModeGrey4,
-            inputBorderBrand: e.darkModeGrey4,
-            completedStep: e.movistarBlueHC,
-            completedStepInverse: e.movistarBlueHC,
-            completedStepNegative: e.movistarBlueHC,
-            completedStepBrand: e.movistarBlueHC,
-            control: e.darkModeGrey4,
-            controlActivated: e.movistarBlue,
-            controlInverse: e.darkModeGrey4,
-            controlNegative: e.darkModeGrey4,
-            controlBrand: e.darkModeGrey4,
-            controlActivatedInverse: e.movistarBlue,
-            controlActivatedNegative: e.movistarBlue,
-            controlActivatedBrand: e.movistarBlue,
-            controlError: e.pepper45,
-            chevronIndicator: e.darkModeGrey5,
-            barTrack: e.darkModeGrey6,
-            barTrackInverse: e.darkModeGrey6,
-            barTrackNegative: e.darkModeGrey6,
-            barTrackBrand: e.darkModeGrey6,
-            loadingBar: e.movistarBlue,
-            loadingBarBackground: e.darkModeGrey6,
-            toggleAndroidInactive: e.darkModeGrey2,
-            toggleAndroidBackgroundActive: e.movistarBlue20,
-            toggleAndroidActiveBrand: e.movistarBlue,
-            toggleAndroidInactiveBrand: e.darkModeGrey2,
-            toggleAndroidBackgroundActiveBrand: e.movistarBlue20,
-            toggleAndroidBackgroundInactiveBrand: e.darkModeGrey4,
-            iosControlKnob: e.darkModeGrey2,
-            controlKnobInverse: e.darkModeGrey2,
-            controlKnobNegative: e.darkModeGrey2,
-            controlKnobBrand: e.darkModeGrey2,
-            divider: r(e.white, 0.1),
-            dividerInverse: r(e.white, 0.1),
-            dividerNegative: r(e.white, 0.1),
-            dividerBrand: r(e.white, 0.1),
+            textLinkDanger: e.red350,
+            textLinkDangerMedia: e.red,
+            textLinkSnackbar: e.darkModeMovistarBlue,
+            textActivated: e.blue300,
+            textBrand: e.blue300,
+            inputBorder: e.grey400,
+            inputBorderInverse: e.grey400,
+            inputBorderNegative: e.grey400,
+            inputBorderBrand: e.grey400,
+            completedStep: e.blue800,
+            completedStepInverse: e.blue100,
+            completedStepNegative: e.blue100,
+            completedStepBrand: e.blue100,
+            control: e.grey400,
+            controlActivated: e.darkModeMovistarBlue,
+            controlInverse: e.grey400,
+            controlNegative: e.grey400,
+            controlBrand: e.grey400,
+            controlActivatedInverse: e.darkModeMovistarBlue,
+            controlActivatedNegative: e.darkModeMovistarBlue,
+            controlActivatedBrand: e.darkModeMovistarBlue,
+            controlError: e.red,
+            chevronIndicator: e.darkModeMovistarBlue,
+            barTrack: e.grey600,
+            barTrackInverse: e.grey600,
+            barTrackNegative: e.grey600,
+            barTrackBrand: e.grey600,
+            loadingBar: e.darkModeMovistarBlue,
+            loadingBarBackground: e.grey600,
+            toggleAndroidInactive: e.grey200,
+            toggleAndroidBackgroundActive: e.blue300,
+            toggleAndroidActiveBrand: e.darkModeMovistarBlue,
+            toggleAndroidInactiveBrand: e.grey200,
+            toggleAndroidBackgroundActiveBrand: e.blue300,
+            toggleAndroidBackgroundInactiveBrand: e.grey400,
+            iosControlKnob: e.grey200,
+            controlKnobInverse: e.grey200,
+            controlKnobNegative: e.grey200,
+            controlKnobBrand: e.grey200,
+            divider: r(e.movistarWhite, 0.1),
+            dividerInverse: r(e.movistarWhite, 0.1),
+            dividerNegative: r(e.movistarWhite, 0.1),
+            dividerBrand: r(e.movistarWhite, 0.1),
             navigationBarDivider: e.darkModeBlack,
-            badge: e.pepper55,
-            feedbackErrorBackground: e.pepper55,
-            feedbackInfoBackground: e.movistarBlueDark,
-            brand: e.movistarBlue,
-            brandHigh: e.movistarBlue40,
-            inverse: e.darkModeGrey2,
-            negative: e.darkModeGrey2,
-            neutralHigh: e.darkModeGrey2,
-            neutralHighBrand: e.darkModeGrey2,
-            neutralHighNegative: e.darkModeGrey2,
-            neutralMedium: e.darkModeGrey5,
-            neutralMediumInverse: e.grey5,
-            neutralMediumNegative: e.grey5,
-            neutralMediumBrand: e.grey5,
-            neutralLow: e.darkModeGrey7,
-            neutralLowAlternative: e.darkModeGrey7,
-            textPrimary: e.darkModeGrey2,
-            textPrimaryInverse: e.darkModeGrey2,
-            textPrimaryNegative: e.darkModeGrey2,
-            textPrimaryBrand: e.darkModeGrey2,
+            badge: e.red600,
+            feedbackErrorBackground: e.red,
+            feedbackInfoBackground: e.blueDark,
+            brand: e.darkModeMovistarBlue,
+            brandHigh: e.blueHigh,
+            inverse: e.grey200,
+            negative: e.grey200,
+            neutralHigh: e.grey200,
+            neutralHighBrand: e.grey200,
+            neutralHighNegative: e.grey200,
+            neutralMedium: e.grey500,
+            neutralMediumInverse: e.grey500,
+            neutralMediumNegative: e.grey500,
+            neutralMediumBrand: e.grey500,
+            neutralLow: e.grey700,
+            neutralLowAlternative: e.grey700,
+            textPrimary: e.movistarWhite,
+            textPrimaryInverse: e.movistarWhite,
+            textPrimaryNegative: e.movistarWhite,
+            textPrimaryBrand: e.movistarWhite,
             textPrimaryMedia: e.white,
-            textSecondary: e.darkModeGrey4,
-            textSecondaryInverse: e.darkModeGrey4,
-            textSecondaryNegative: e.darkModeGrey4,
-            textSecondaryBrand: e.darkModeGrey4,
+            textSecondary: e.grey400,
+            textSecondaryInverse: e.grey400,
+            textSecondaryNegative: e.grey400,
+            textSecondaryBrand: e.grey400,
             textSecondaryMedia: e.white,
-            success: e.movistarGreen,
-            warning: e.egg,
-            error: e.pepper45,
-            textError: e.pepper45,
-            textErrorInverse: e.pepper45,
-            textErrorNegative: e.pepper45,
-            textErrorBrand: e.pepper45,
-            promo: e.pepper45,
+            success: e.emerald,
+            warning: e.yellow,
+            error: e.red350,
+            textError: e.red350,
+            textErrorInverse: e.red350,
+            textErrorNegative: e.red350,
+            textErrorBrand: e.red350,
+            promo: e.red350,
             highlight: e.pink45,
-            successLow: e.darkModeGrey7,
-            warningLow: e.darkModeGrey7,
-            errorLow: e.darkModeGrey7,
-            promoLow: e.darkModeGrey7,
-            brandLow: e.darkModeGrey7,
-            successHigh: e.movistarGreen40,
-            warningHigh: e.egg40,
-            errorHigh: e.pepper45,
-            promoHigh: e.pepper45,
-            successHighInverse: e.movistarGreen70,
-            successHighNegative: e.movistarGreen70,
-            successHighBrand: e.movistarGreen70,
-            warningHighInverse: e.egg80,
-            warningHighNegative: e.egg80,
-            warningHighBrand: e.egg80,
-            errorHighInverse: e.pepper70,
-            errorHighNegative: e.pepper70,
-            errorHighBrand: e.pepper70,
-            promoHighInverse: e.pepper45,
-            promoHighNegative: e.pepper45,
-            promoHighBrand: e.pepper45,
-            textNavigationBarPrimary: e.darkModeGrey2,
-            textNavigationBarSecondary: e.darkModeGrey4,
-            textNavigationSearchBarHint: e.darkModeGrey4,
-            textNavigationSearchBarText: e.darkModeGrey2,
-            textAppBar: e.darkModeGrey4,
+            successLow: e.grey700,
+            warningLow: e.grey700,
+            errorLow: e.grey700,
+            promoLow: e.grey700,
+            brandLow: e.blueDark,
+            successHigh: e.emeraldHigh,
+            warningHigh: e.yellow400,
+            errorHigh: e.red,
+            promoHigh: e.red,
+            successHighInverse: e.green700,
+            successHighNegative: e.green700,
+            successHighBrand: e.green700,
+            warningHighInverse: e.yellowHigh,
+            warningHighNegative: e.yellowHigh,
+            warningHighBrand: e.yellowHigh,
+            errorHighInverse: e.red,
+            errorHighNegative: e.red,
+            errorHighBrand: e.red,
+            promoHighInverse: e.red,
+            promoHighNegative: e.red,
+            promoHighBrand: e.red,
+            textNavigationBarPrimary: e.grey200,
+            textNavigationBarSecondary: e.grey400,
+            textNavigationSearchBarHint: e.grey400,
+            textNavigationSearchBarText: e.grey200,
+            textAppBar: e.grey400,
             textAppBarSelected: e.movistarBlue,
             iosGlassAppBar: e.white,
-            iosGlassAppBarSelected: e.white,
+            iosGlassAppBarSelected: e.blue200,
             customTabsBackground: e.darkModeBlack,
-            tagTextPromo: e.white,
-            tagTextActive: e.movistarBlue,
-            tagTextInactive: e.darkModeGrey3,
-            tagTextInfo: e.white,
-            tagTextSuccess: e.movistarGreen40,
-            tagTextWarning: e.egg40,
-            tagTextError: e.pepper45,
-            tagBackgroundPromo: e.pepper70,
-            tagBackgroundActive: e.darkModeGrey7,
-            tagBackgroundInactive: e.darkModeGrey7,
-            tagBackgroundInfo: e.darkModeGrey7,
-            tagBackgroundSuccess: e.darkModeGrey7,
-            tagBackgroundWarning: e.darkModeGrey7,
-            tagBackgroundError: e.darkModeGrey7,
-            tagTextPromoInverse: e.white,
-            tagTextPromoNegative: e.white,
-            tagTextPromoBrand: e.white,
-            tagTextActiveInverse: e.movistarBlue,
-            tagTextActiveNegative: e.movistarBlue,
-            tagTextActiveBrand: e.movistarBlue,
-            tagTextInactiveInverse: e.darkModeGrey3,
-            tagTextInactiveNegative: e.darkModeGrey3,
-            tagTextInactiveBrand: e.darkModeGrey3,
-            tagTextInfoInverse: e.white,
-            tagTextInfoNegative: e.white,
-            tagTextInfoBrand: e.white,
-            tagTextSuccessInverse: e.movistarGreen40,
-            tagTextSuccessNegative: e.movistarGreen40,
-            tagTextSuccessBrand: e.movistarGreen40,
-            tagTextWarningInverse: e.egg40,
-            tagTextWarningNegative: e.egg40,
-            tagTextWarningBrand: e.egg40,
-            tagTextErrorInverse: e.pepper45,
-            tagTextErrorNegative: e.pepper45,
-            tagTextErrorBrand: e.pepper45,
-            tagBackgroundPromoInverse: e.pepper70,
-            tagBackgroundPromoNegative: e.pepper70,
-            tagBackgroundPromoBrand: e.pepper70,
-            tagBackgroundActiveInverse: e.darkModeGrey7,
-            tagBackgroundActiveNegative: e.darkModeGrey7,
-            tagBackgroundActiveBrand: e.darkModeGrey7,
-            tagBackgroundInactiveInverse: e.darkModeGrey7,
-            tagBackgroundInactiveNegative: e.darkModeGrey7,
-            tagBackgroundInactiveBrand: e.darkModeGrey7,
-            tagBackgroundInfoInverse: e.darkModeGrey7,
-            tagBackgroundInfoNegative: e.darkModeGrey7,
-            tagBackgroundInfoBrand: e.darkModeGrey7,
-            tagBackgroundSuccessInverse: e.darkModeGrey7,
-            tagBackgroundSuccessNegative: e.darkModeGrey7,
-            tagBackgroundSuccessBrand: e.darkModeGrey7,
-            tagBackgroundWarningInverse: e.darkModeGrey7,
-            tagBackgroundWarningNegative: e.darkModeGrey7,
-            tagBackgroundWarningBrand: e.darkModeGrey7,
-            tagBackgroundErrorInverse: e.darkModeGrey7,
-            tagBackgroundErrorNegative: e.darkModeGrey7,
-            tagBackgroundErrorBrand: e.darkModeGrey7,
+            tagTextPromo: e.movistarWhite,
+            tagTextActive: e.blue300,
+            tagTextInactive: e.grey300,
+            tagTextInfo: e.blue300,
+            tagTextSuccess: e.green400,
+            tagTextWarning: e.yellow400,
+            tagTextError: e.red350,
+            tagBackgroundPromo: e.redHigh,
+            tagBackgroundActive: e.grey700,
+            tagBackgroundInactive: e.grey700,
+            tagBackgroundInfo: e.grey700,
+            tagBackgroundSuccess: e.grey700,
+            tagBackgroundWarning: e.grey700,
+            tagBackgroundError: e.grey700,
+            tagTextPromoInverse: e.movistarWhite,
+            tagTextPromoNegative: e.movistarWhite,
+            tagTextPromoBrand: e.movistarWhite,
+            tagTextActiveInverse: e.blue300,
+            tagTextActiveNegative: e.blue300,
+            tagTextActiveBrand: e.blue300,
+            tagTextInactiveInverse: e.grey300,
+            tagTextInactiveNegative: e.grey300,
+            tagTextInactiveBrand: e.grey300,
+            tagTextInfoInverse: e.blue300,
+            tagTextInfoNegative: e.blue300,
+            tagTextInfoBrand: e.blue300,
+            tagTextSuccessInverse: e.green400,
+            tagTextSuccessNegative: e.green400,
+            tagTextSuccessBrand: e.green400,
+            tagTextWarningInverse: e.yellow400,
+            tagTextWarningNegative: e.yellow400,
+            tagTextWarningBrand: e.yellow400,
+            tagTextErrorInverse: e.red350,
+            tagTextErrorNegative: e.red350,
+            tagTextErrorBrand: e.red350,
+            tagBackgroundPromoInverse: e.redHigh,
+            tagBackgroundPromoNegative: e.redHigh,
+            tagBackgroundPromoBrand: e.redHigh,
+            tagBackgroundActiveInverse: e.grey700,
+            tagBackgroundActiveNegative: e.grey700,
+            tagBackgroundActiveBrand: e.grey700,
+            tagBackgroundInactiveInverse: e.grey700,
+            tagBackgroundInactiveNegative: e.grey700,
+            tagBackgroundInactiveBrand: e.grey700,
+            tagBackgroundInfoInverse: e.grey700,
+            tagBackgroundInfoNegative: e.grey700,
+            tagBackgroundInfoBrand: e.grey700,
+            tagBackgroundSuccessInverse: e.grey700,
+            tagBackgroundSuccessNegative: e.grey700,
+            tagBackgroundSuccessBrand: e.grey700,
+            tagBackgroundWarningInverse: e.grey700,
+            tagBackgroundWarningNegative: e.grey700,
+            tagBackgroundWarningBrand: e.grey700,
+            tagBackgroundErrorInverse: e.grey700,
+            tagBackgroundErrorNegative: e.grey700,
+            tagBackgroundErrorBrand: e.grey700,
             cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
             cardFooterOverlay: r(e.black, 0.7)
         },
@@ -638,9 +633,8 @@ const e = {
             container: "16px",
             indicator: "24px",
             chip: "24px",
-            tag: "24px",
+            tag: "0px",
             input: "12px",
-            legacyDisplay: "16px",
             popup: "8px",
             sheet: "16px",
             mediaSmall: "8px"
@@ -651,61 +645,61 @@ const e = {
             },
             cardDescriptionDefault: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
             cardDescriptionSnap: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
             cardPretitleDefault: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
             cardPretitleSnap: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
             cardSubtitleDefault: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
             cardSubtitleSnap: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
@@ -714,21 +708,21 @@ const e = {
             },
             cardTitleDefault: {
                 lineHeight: {
-                    desktop: 28,
-                    mobile: 24
+                    desktop: 24,
+                    mobile: 22
                 },
                 size: {
-                    desktop: 20,
-                    mobile: 18
+                    desktop: 18,
+                    mobile: 16
                 }
             },
             cardTitleSnap: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 20,
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 14,
                     mobile: 14
                 }
             },
@@ -738,18 +732,18 @@ const e = {
                     mobile: 20
                 },
                 size: {
-                    desktop: 16,
+                    desktop: 18,
                     mobile: 14
                 },
                 weight: "medium"
             },
             drawerTitle: {
                 lineHeight: {
-                    desktop: 32,
-                    mobile: 24
+                    desktop: 26,
+                    mobile: 26
                 },
                 size: {
-                    desktop: 28,
+                    desktop: 20,
                     mobile: 20
                 },
                 weight: "bold"
@@ -760,11 +754,11 @@ const e = {
             inputHelperText: {
                 lineHeight: {
                     desktop: 20,
-                    mobile: 16
+                    mobile: 20
                 },
                 size: {
                     desktop: 14,
-                    mobile: 12
+                    mobile: 14
                 }
             },
             inputLabel: {
@@ -779,11 +773,11 @@ const e = {
             },
             inputValue: {
                 lineHeight: {
-                    desktop: 24,
-                    mobile: 24
+                    desktop: 22,
+                    mobile: 22
                 },
                 size: {
-                    desktop: 18,
+                    desktop: 16,
                     mobile: 16
                 }
             },
@@ -792,28 +786,28 @@ const e = {
             },
             loadingScreenTitle: {
                 lineHeight: {
-                    desktop: 28,
-                    mobile: 24
+                    desktop: 32,
+                    mobile: 28
                 },
                 size: {
-                    desktop: 20,
-                    mobile: 18
+                    desktop: 28,
+                    mobile: 24
                 }
             },
             navigationBar: {
                 weight: "medium"
             },
             rowTitle: {
-                weight: "regular"
+                weight: "medium"
             },
             stepperStepLabel: {
                 lineHeight: {
-                    desktop: 24,
-                    mobile: 20
+                    desktop: 20,
+                    mobile: 16
                 },
                 size: {
-                    desktop: 16,
-                    mobile: 14
+                    desktop: 14,
+                    mobile: 12
                 }
             },
             tabsLabel: {
@@ -839,7 +833,7 @@ const e = {
             },
             text2: {
                 lineHeight: {
-                    desktop: 24,
+                    desktop: 22,
                     mobile: 20
                 },
                 size: {
@@ -850,7 +844,7 @@ const e = {
             text3: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 24
+                    mobile: 22
                 },
                 size: {
                     desktop: 18,
@@ -859,7 +853,7 @@ const e = {
             },
             text4: {
                 lineHeight: {
-                    desktop: 28,
+                    desktop: 26,
                     mobile: 24
                 },
                 size: {
@@ -869,85 +863,85 @@ const e = {
             },
             text5: {
                 lineHeight: {
-                    desktop: 32,
-                    mobile: 24
+                    desktop: 28,
+                    mobile: 26
                 },
                 size: {
-                    desktop: 28,
+                    desktop: 24,
                     mobile: 20
                 },
                 weight: "bold"
             },
             text6: {
                 lineHeight: {
-                    desktop: 40,
-                    mobile: 32
+                    desktop: 32,
+                    mobile: 28
                 },
                 size: {
-                    desktop: 32,
+                    desktop: 28,
                     mobile: 24
                 },
                 weight: "bold"
             },
             text7: {
                 lineHeight: {
-                    desktop: 48,
+                    desktop: 38,
                     mobile: 32
                 },
                 size: {
-                    desktop: 40,
+                    desktop: 32,
                     mobile: 28
                 },
                 weight: "bold"
             },
             text8: {
                 lineHeight: {
-                    desktop: 56,
-                    mobile: 40
+                    desktop: 48,
+                    mobile: 38
                 },
                 size: {
-                    desktop: 48,
+                    desktop: 40,
                     mobile: 32
                 },
                 weight: "bold"
             },
             text9: {
                 lineHeight: {
-                    desktop: 64,
+                    desktop: 56,
                     mobile: 48
                 },
                 size: {
-                    desktop: 56,
+                    desktop: 48,
                     mobile: 40
                 },
                 weight: "bold"
             },
             text10: {
                 lineHeight: {
-                    desktop: 72,
+                    desktop: 64,
                     mobile: 56
                 },
                 size: {
-                    desktop: 64,
+                    desktop: 56,
                     mobile: 48
                 },
                 weight: "bold"
             },
             title1: {
                 lineHeight: {
-                    desktop: 20,
-                    mobile: 16
+                    desktop: 22,
+                    mobile: 20
                 },
                 size: {
-                    desktop: 14,
-                    mobile: 12
+                    desktop: 16,
+                    mobile: 14
                 },
                 weight: "medium"
             },
             title2: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 24
+                    mobile: 22
                 },
                 size: {
                     desktop: 18,
@@ -957,29 +951,29 @@ const e = {
             },
             title3: {
                 lineHeight: {
-                    desktop: 32,
+                    desktop: 26,
                     mobile: 24
                 },
                 size: {
-                    desktop: 28,
-                    mobile: 20
+                    desktop: 20,
+                    mobile: 18
                 },
                 weight: "bold"
             },
             title4: {
                 lineHeight: {
-                    desktop: 40,
-                    mobile: 32
+                    desktop: 28,
+                    mobile: 26
                 },
                 size: {
-                    desktop: 32,
-                    mobile: 24
+                    desktop: 24,
+                    mobile: 20
                 },
                 weight: "bold"
             }
         },
         themeVariants: {
-            successFeedback: "default",
+            successFeedback: "inverse",
             brandLoadingScreen: "default"
         },
         spacing: {
@@ -995,106 +989,106 @@ const e = {
             },
             buttonSmallPadding: {
                 left: {
-                    mobile: 12,
+                    mobile: 8,
                     desktop: 12
                 },
                 right: {
-                    mobile: 12,
+                    mobile: 8,
                     desktop: 12
                 }
             },
             cardDefaultPadding: {
                 top: {
                     mobile: 16,
-                    desktop: 24
+                    desktop: 16
                 },
                 bottom: {
                     mobile: 16,
-                    desktop: 24
+                    desktop: 16
                 },
                 left: {
                     mobile: 16,
-                    desktop: 24
+                    desktop: 16
                 },
                 right: {
                     mobile: 16,
-                    desktop: 24
+                    desktop: 16
                 }
             },
             inputPadding: {
                 top: {
-                    mobile: 8,
-                    desktop: 8
+                    mobile: 9,
+                    desktop: 3
                 },
                 bottom: {
-                    mobile: 8,
-                    desktop: 8
+                    mobile: 9,
+                    desktop: 3
                 }
             },
             tagPadding: {
                 top: {
-                    mobile: 4,
-                    desktop: 4
+                    mobile: 2,
+                    desktop: 2
                 },
                 bottom: {
-                    mobile: 4,
-                    desktop: 4
+                    mobile: 2,
+                    desktop: 2
                 }
             },
             feedbackScreenPadding: {
                 top: {
                     mobile: 64,
-                    desktop: 64
+                    desktop: 40
                 },
                 bottom: {
                     mobile: 16,
-                    desktop: 64
+                    desktop: 40
                 },
                 left: {
                     mobile: 16,
-                    desktop: 64
+                    desktop: 40
                 },
                 right: {
                     mobile: 16,
-                    desktop: 64
+                    desktop: 40
                 }
             },
             heroPadding: {
                 top: {
-                    mobile: 24,
+                    mobile: 16,
                     desktop: 56
                 },
                 bottom: {
-                    mobile: 24,
+                    mobile: 16,
                     desktop: 56
                 }
             },
             headerPadding: {
                 top: {
-                    mobile: 24,
+                    mobile: 16,
                     desktop: 48
                 },
                 bottom: {
-                    mobile: 24,
+                    mobile: 16,
                     desktop: 48
                 }
             },
             drawerPadding: {
                 top: {
                     mobile: 32,
-                    desktop: 40
+                    desktop: 32
                 },
                 bottom: {
                     mobile: 16,
-                    desktop: 24
+                    desktop: 32
                 },
                 left: {
                     mobile: 16,
-                    desktop: 40
+                    desktop: 24
                 },
                 right: {
                     mobile: 16,
-                    desktop: 40
+                    desktop: 24
                 }
             }
         }