@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/skins/movistar-new.tsx

@@ -0,0 +1,735 @@
+import {MOVISTAR_NEW_SKIN} from './constants';
+import {applyAlpha} from '../utils/color';
+
+import type {GetKnownSkin, KnownSkin} from './types';
+
+export const palette = {
+    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',
+    grey100: '#FAF7F5',
+    grey200: '#F3EEEA',
+    grey300: '#DFDBD6',
+    grey400: '#9F9C99',
+    grey500: '#807D7B',
+    grey600: '#605E5C',
+    grey700: '#403F3D',
+    white: '#FFFFFF',
+    white100: '#FFFAF5',
+    black: '#000000',
+    darkModeBlack: '#070706',
+    darkModeGrey: '#151414',
+    darkModeMovistarBlue: '#227AFF',
+};
+
+export const getMovistarNewSkin: GetKnownSkin = () => {
+    const skin: KnownSkin = {
+        name: MOVISTAR_NEW_SKIN,
+        colors: {
+            background: palette.white,
+            backgroundAlternative: palette.movistarWhite,
+            backgroundBrand: palette.movistarBlue,
+            backgroundNegative: palette.movistarBlack,
+            backgroundBrandSecondary: palette.movistarBlack,
+            backgroundContainer: palette.white,
+            backgroundContainerError: palette.salmon100,
+            backgroundContainerHover: applyAlpha(palette.movistarBlack, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.movistarBlack, 0.08),
+            backgroundContainerBrand: palette.movistarBlue,
+            backgroundContainerBrandHover: applyAlpha(palette.movistarBlack, 0.2),
+            backgroundContainerBrandPressed: applyAlpha(palette.movistarBlack, 0.4),
+            backgroundContainerBrandOverInverse: palette.blue800,
+            backgroundContainerNegative: applyAlpha(palette.movistarBlack, 0.2),
+            backgroundContainerBrandOverBrand: palette.blue800,
+            backgroundContainerAlternative: palette.grey100,
+            backgroundOverlay: applyAlpha(palette.movistarBlack, 0.6),
+            backgroundSkeleton: palette.grey200,
+            backgroundSkeletonInverse: palette.blue800,
+            backgroundSkeletonNegative: applyAlpha(palette.black, 0.2),
+            backgroundSkeletonBrand: palette.blue800,
+            backgroundBrandTop: palette.movistarBlue,
+            backgroundBrandBottom: palette.movistarBlue,
+            appBarBackground: palette.white,
+            navigationBarBackground: palette.movistarBlue,
+            backgroundDropZoneHover: applyAlpha(palette.movistarBlue, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.movistarBlue, 0.08),
+            backgroundDropZoneBrandHover: applyAlpha(palette.movistarBlack, 0.08),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.movistarBlack, 0.1),
+            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
+            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
+            backgroundDropZoneMediaHover: applyAlpha(palette.movistarBlack, 0.2),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.movistarBlack, 0.4),
+            skeletonWave: palette.grey200,
+            borderLow: palette.grey100,
+            border: palette.grey300,
+            borderHigh: palette.grey600,
+            borderSelected: palette.blue800,
+            coverBackgroundHover: applyAlpha(palette.movistarBlack, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.movistarBlack, 0.35),
+            buttonDangerBackground: palette.red,
+            buttonDangerBackgroundPressed: palette.redHigh,
+            buttonDangerBackgroundHover: palette.redHigh,
+            buttonLinkDangerBackgroundInverse: palette.white,
+            buttonLinkDangerBackgroundNegative: palette.white,
+            buttonLinkDangerBackgroundBrand: palette.white,
+            buttonLinkDangerBackgroundMedia: palette.white,
+            buttonLinkDangerBackgroundPressed: palette.salmon100,
+            buttonLinkDangerBackgroundInversePressed: palette.salmon100,
+            buttonLinkDangerBackgroundNegativePressed: palette.salmon100,
+            buttonLinkDangerBackgroundBrandPressed: palette.salmon100,
+            buttonLinkDangerBackgroundMediaPressed: palette.salmon100,
+            buttonLinkBackgroundPressed: palette.blue200,
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.3),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
+            buttonPrimaryBackground: palette.movistarBlue,
+            buttonPrimaryBackgroundInverse: palette.white,
+            buttonPrimaryBackgroundNegative: palette.white,
+            buttonPrimaryBackgroundBrand: palette.white,
+            buttonPrimaryBackgroundMedia: palette.white,
+            buttonPrimaryBackgroundHover: palette.blueHigh,
+            buttonPrimaryBackgroundInverseHover: palette.blue200,
+            buttonPrimaryBackgroundNegativeHover: palette.blue100,
+            buttonPrimaryBackgroundBrandHover: palette.blue100,
+            buttonPrimaryBackgroundMediaHover: palette.blue200,
+            buttonPrimaryBackgroundPressed: palette.blueHigh,
+            buttonPrimaryBackgroundInversePressed: palette.blue200,
+            buttonPrimaryBackgroundNegativePressed: palette.blue100,
+            buttonPrimaryBackgroundBrandPressed: palette.blue100,
+            buttonPrimaryBackgroundMediaPressed: palette.blue200,
+            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonSecondaryBorder: palette.movistarBlue,
+            buttonSecondaryBorderInverse: palette.white,
+            buttonSecondaryBorderNegative: palette.white,
+            buttonSecondaryBorderBrand: palette.white,
+            buttonSecondaryBorderMedia: palette.white,
+            buttonSecondaryBorderPressed: palette.blue800,
+            buttonSecondaryBorderInversePressed: palette.white,
+            buttonSecondaryBorderNegativePressed: palette.white,
+            buttonSecondaryBorderBrandPressed: palette.white,
+            buttonSecondaryBorderMediaPressed: palette.white,
+            buttonSecondaryBackgroundHover: palette.blue200,
+            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundPressed: palette.blue200,
+            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.3),
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
+            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
+            textButtonPrimary: palette.white,
+            textButtonPrimaryInverse: palette.movistarBlue,
+            textButtonPrimaryNegative: palette.movistarBlue,
+            textButtonPrimaryBrand: palette.movistarBlue,
+            textButtonPrimaryMedia: palette.movistarBlue,
+            textButtonPrimaryInversePressed: palette.blue800,
+            textButtonPrimaryNegativePressed: palette.blue800,
+            textButtonPrimaryBrandPressed: palette.blue800,
+            textButtonPrimaryMediaPressed: palette.blueHigh,
+            textButtonSecondary: palette.movistarBlue,
+            textButtonSecondaryInverse: palette.white,
+            textButtonSecondaryNegative: palette.white,
+            textButtonSecondaryBrand: palette.white,
+            textButtonSecondaryMedia: palette.white,
+            textButtonSecondaryPressed: palette.blue800,
+            textButtonSecondaryInversePressed: palette.white,
+            textButtonSecondaryNegativePressed: palette.white,
+            textButtonSecondaryBrandPressed: palette.white,
+            textButtonSecondaryMediaPressed: palette.white,
+            textLink: palette.movistarBlue,
+            textLinkInverse: palette.white,
+            textLinkNegative: palette.white,
+            textLinkBrand: palette.white,
+            textLinkMedia: palette.white,
+            textLinkDanger: palette.red,
+            textLinkDangerMedia: palette.red,
+            textLinkSnackbar: palette.blue300,
+            textActivated: palette.blueHigh,
+            textBrand: palette.blueHigh,
+            inputBorder: palette.grey500,
+            inputBorderInverse: palette.white,
+            inputBorderNegative: palette.white,
+            inputBorderBrand: palette.white,
+            completedStep: palette.movistarBlue,
+            completedStepInverse: palette.blue100,
+            completedStepNegative: palette.blue100,
+            completedStepBrand: palette.blue100,
+            control: palette.grey500,
+            controlActivated: palette.movistarBlue,
+            controlInverse: palette.blueLight,
+            controlNegative: palette.blueLight,
+            controlBrand: palette.blueLight,
+            controlActivatedInverse: palette.white,
+            controlActivatedNegative: palette.white,
+            controlActivatedBrand: palette.white,
+            controlError: palette.red,
+            chevronIndicator: palette.movistarBlue,
+            barTrack: palette.grey300,
+            barTrackInverse: applyAlpha(palette.movistarBlack, 0.14),
+            barTrackNegative: applyAlpha(palette.movistarBlack, 0.14),
+            barTrackBrand: applyAlpha(palette.movistarBlack, 0.14),
+            loadingBar: palette.blueLight,
+            loadingBarBackground: palette.blueHigh,
+            toggleAndroidInactive: palette.grey200,
+            toggleAndroidBackgroundActive: palette.blue300,
+            toggleAndroidActiveBrand: palette.white,
+            toggleAndroidInactiveBrand: palette.grey200,
+            toggleAndroidBackgroundActiveBrand: palette.blue300,
+            toggleAndroidBackgroundInactiveBrand: palette.blueLight,
+            iosControlKnob: palette.white,
+            controlKnobInverse: palette.movistarBlue,
+            controlKnobNegative: palette.movistarBlue,
+            controlKnobBrand: palette.movistarBlue,
+            divider: palette.grey200,
+            dividerInverse: applyAlpha(palette.white, 0.2),
+            dividerNegative: applyAlpha(palette.white, 0.2),
+            dividerBrand: applyAlpha(palette.white, 0.2),
+            navigationBarDivider: palette.movistarBlue,
+            badge: palette.red,
+            feedbackErrorBackground: palette.red,
+            feedbackInfoBackground: palette.blueDark,
+            brand: palette.movistarBlue,
+            brandHigh: palette.blueHigh,
+            inverse: palette.white,
+            negative: palette.white,
+            neutralHigh: palette.movistarBlack,
+            neutralHighNegative: palette.white,
+            neutralHighBrand: palette.white,
+            neutralMedium: palette.grey600,
+            neutralMediumInverse: palette.grey600,
+            neutralMediumNegative: palette.grey600,
+            neutralMediumBrand: palette.grey600,
+            neutralLow: palette.grey100,
+            neutralLowAlternative: palette.grey200,
+            textPrimary: palette.movistarBlack,
+            textPrimaryInverse: palette.white,
+            textPrimaryNegative: palette.white,
+            textPrimaryBrand: palette.white,
+            textPrimaryMedia: palette.white,
+            textSecondary: palette.grey600,
+            textSecondaryInverse: palette.movistarWhite,
+            textSecondaryNegative: palette.movistarWhite,
+            textSecondaryBrand: palette.movistarWhite,
+            textSecondaryMedia: palette.movistarWhite,
+            success: palette.emerald,
+            warning: palette.yellow600,
+            error: palette.red,
+            textError: palette.red,
+            textErrorInverse: palette.white,
+            textErrorNegative: palette.white,
+            textErrorBrand: palette.white,
+            promo: palette.redHigh,
+            highlight: palette.pink55,
+            successLow: palette.green200,
+            warningLow: palette.yellow200,
+            errorLow: palette.salmon100,
+            promoLow: palette.salmon100,
+            brandLow: palette.blueLight,
+            successHigh: palette.green700,
+            warningHigh: palette.yellowHigh,
+            errorHigh: palette.redHigh,
+            promoHigh: palette.redHigh,
+            successHighInverse: palette.emeraldHigh,
+            successHighNegative: palette.emeraldHigh,
+            successHighBrand: palette.emeraldHigh,
+            warningHighInverse: palette.yellowHigh,
+            warningHighNegative: palette.yellowHigh,
+            warningHighBrand: palette.yellowHigh,
+            errorHighInverse: palette.redHigh,
+            errorHighNegative: palette.redHigh,
+            errorHighBrand: palette.redHigh,
+            promoHighInverse: palette.redHigh,
+            promoHighNegative: palette.redHigh,
+            promoHighBrand: palette.redHigh,
+            textNavigationBarPrimary: palette.white,
+            textNavigationBarSecondary: palette.blue300,
+            textNavigationSearchBarHint: palette.blue300,
+            textNavigationSearchBarText: palette.white,
+            textAppBar: palette.grey600,
+            textAppBarSelected: palette.blue800,
+            iosGlassAppBar: palette.movistarBlack,
+            iosGlassAppBarSelected: palette.blue800,
+            customTabsBackground: palette.white,
+            tagTextPromo: palette.white,
+            tagTextActive: palette.blueHigh,
+            tagTextInactive: palette.grey600,
+            tagTextInfo: palette.blueHigh,
+            tagTextSuccess: palette.emeraldHigh,
+            tagTextWarning: palette.yellowHigh,
+            tagTextError: palette.redHigh,
+            tagBackgroundPromo: palette.redHigh,
+            tagBackgroundActive: palette.blue200,
+            tagBackgroundInactive: palette.grey200,
+            tagBackgroundInfo: palette.blue200,
+            tagBackgroundSuccess: palette.green200,
+            tagBackgroundWarning: palette.yellowLight,
+            tagBackgroundError: palette.salmon200,
+            tagTextPromoInverse: palette.redHigh,
+            tagTextPromoNegative: palette.redHigh,
+            tagTextPromoBrand: palette.redHigh,
+            tagTextActiveInverse: palette.blueHigh,
+            tagTextActiveNegative: palette.blueHigh,
+            tagTextActiveBrand: palette.blueHigh,
+            tagTextInactiveInverse: palette.grey600,
+            tagTextInactiveNegative: palette.grey600,
+            tagTextInactiveBrand: palette.grey600,
+            tagTextInfoInverse: palette.blueHigh,
+            tagTextInfoNegative: palette.blueHigh,
+            tagTextInfoBrand: palette.blueHigh,
+            tagTextSuccessInverse: palette.green700,
+            tagTextSuccessNegative: palette.green700,
+            tagTextSuccessBrand: palette.green700,
+            tagTextWarningInverse: palette.yellowHigh,
+            tagTextWarningNegative: palette.yellowHigh,
+            tagTextWarningBrand: palette.yellowHigh,
+            tagTextErrorInverse: palette.redHigh,
+            tagTextErrorNegative: palette.redHigh,
+            tagTextErrorBrand: palette.redHigh,
+            tagBackgroundPromoInverse: palette.white,
+            tagBackgroundPromoNegative: palette.white,
+            tagBackgroundPromoBrand: palette.white,
+            tagBackgroundActiveInverse: palette.white,
+            tagBackgroundActiveNegative: palette.white,
+            tagBackgroundActiveBrand: palette.white,
+            tagBackgroundInactiveInverse: palette.white,
+            tagBackgroundInactiveNegative: palette.white,
+            tagBackgroundInactiveBrand: palette.white,
+            tagBackgroundInfoInverse: palette.white,
+            tagBackgroundInfoNegative: palette.white,
+            tagBackgroundInfoBrand: palette.white,
+            tagBackgroundSuccessInverse: palette.white,
+            tagBackgroundSuccessNegative: palette.white,
+            tagBackgroundSuccessBrand: palette.white,
+            tagBackgroundWarningInverse: palette.white,
+            tagBackgroundWarningNegative: palette.white,
+            tagBackgroundWarningBrand: palette.white,
+            tagBackgroundErrorInverse: palette.white,
+            tagBackgroundErrorNegative: palette.white,
+            tagBackgroundErrorBrand: palette.white,
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.black, 0.7),
+        },
+        darkModeColors: {
+            background: palette.darkModeBlack,
+            backgroundAlternative: palette.darkModeBlack,
+            backgroundBrand: palette.darkModeBlack,
+            backgroundNegative: palette.darkModeBlack,
+            backgroundBrandSecondary: palette.darkModeBlack,
+            backgroundContainer: palette.darkModeGrey,
+            backgroundContainerError: palette.darkModeGrey,
+            backgroundContainerHover: applyAlpha(palette.white, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.white, 0.08),
+            backgroundContainerBrand: palette.darkModeGrey,
+            backgroundContainerBrandHover: applyAlpha(palette.white, 0.03),
+            backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05),
+            backgroundContainerBrandOverInverse: palette.darkModeGrey,
+            backgroundContainerNegative: palette.darkModeGrey,
+            backgroundContainerBrandOverBrand: palette.darkModeGrey,
+            backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
+            backgroundSkeleton: palette.grey600,
+            backgroundSkeletonInverse: palette.grey600,
+            backgroundSkeletonNegative: palette.grey600,
+            backgroundSkeletonBrand: palette.grey600,
+            backgroundBrandTop: palette.darkModeBlack,
+            backgroundBrandBottom: palette.darkModeBlack,
+            appBarBackground: palette.darkModeGrey,
+            navigationBarBackground: palette.darkModeBlack,
+            backgroundDropZoneHover: applyAlpha(palette.white, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.white, 0.08),
+            backgroundDropZoneBrandHover: applyAlpha(palette.white, 0.03),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.white, 0.05),
+            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.03),
+            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
+            backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            skeletonWave: palette.grey600,
+            borderLow: palette.darkModeBlack,
+            border: palette.darkModeGrey,
+            borderHigh: palette.grey500,
+            borderSelected: palette.darkModeMovistarBlue,
+            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
+            buttonDangerBackground: palette.red,
+            buttonDangerBackgroundPressed: palette.redHigh,
+            buttonDangerBackgroundHover: palette.redHigh,
+            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundMedia: palette.white,
+            buttonLinkDangerBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: palette.salmon100,
+            buttonLinkBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
+            buttonPrimaryBackground: palette.movistarBlue,
+            buttonPrimaryBackgroundInverse: palette.movistarBlue,
+            buttonPrimaryBackgroundNegative: palette.movistarBlue,
+            buttonPrimaryBackgroundBrand: palette.movistarBlue,
+            buttonPrimaryBackgroundMedia: palette.white,
+            buttonPrimaryBackgroundHover: palette.blueHigh,
+            buttonPrimaryBackgroundInverseHover: palette.blue800,
+            buttonPrimaryBackgroundNegativeHover: palette.blue800,
+            buttonPrimaryBackgroundBrandHover: palette.blue800,
+            buttonPrimaryBackgroundMediaHover: palette.blue200,
+            buttonPrimaryBackgroundPressed: palette.blue800,
+            buttonPrimaryBackgroundInversePressed: palette.blue800,
+            buttonPrimaryBackgroundNegativePressed: palette.blue800,
+            buttonPrimaryBackgroundBrandPressed: palette.blue800,
+            buttonPrimaryBackgroundMediaPressed: palette.blue200,
+            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonSecondaryBorder: palette.white,
+            buttonSecondaryBorderInverse: palette.grey200,
+            buttonSecondaryBorderNegative: palette.grey200,
+            buttonSecondaryBorderBrand: palette.grey200,
+            buttonSecondaryBorderMedia: palette.white,
+            buttonSecondaryBorderPressed: palette.white,
+            buttonSecondaryBorderInversePressed: palette.grey200,
+            buttonSecondaryBorderNegativePressed: palette.grey200,
+            buttonSecondaryBorderBrandPressed: palette.grey200,
+            buttonSecondaryBorderMediaPressed: palette.white,
+            buttonSecondaryBackgroundHover: applyAlpha(palette.white, 0.15),
+            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
+            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundPressed: applyAlpha(palette.white, 0.25),
+            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.25),
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.25),
+            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.25),
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
+            textButtonPrimary: palette.white,
+            textButtonPrimaryInverse: palette.white,
+            textButtonPrimaryNegative: palette.white,
+            textButtonPrimaryBrand: palette.white,
+            textButtonPrimaryMedia: palette.movistarBlue,
+            textButtonPrimaryInversePressed: palette.blueLight,
+            textButtonPrimaryNegativePressed: palette.blueLight,
+            textButtonPrimaryBrandPressed: palette.blueLight,
+            textButtonPrimaryMediaPressed: palette.blueHigh,
+            textButtonSecondary: palette.grey200,
+            textButtonSecondaryInverse: palette.grey200,
+            textButtonSecondaryNegative: palette.grey200,
+            textButtonSecondaryBrand: palette.grey200,
+            textButtonSecondaryMedia: palette.white,
+            textButtonSecondaryPressed: palette.grey200,
+            textButtonSecondaryInversePressed: palette.grey200,
+            textButtonSecondaryNegativePressed: palette.grey200,
+            textButtonSecondaryBrandPressed: palette.grey200,
+            textButtonSecondaryMediaPressed: palette.white,
+            textLink: palette.darkModeMovistarBlue,
+            textLinkInverse: palette.darkModeMovistarBlue,
+            textLinkNegative: palette.darkModeMovistarBlue,
+            textLinkBrand: palette.darkModeMovistarBlue,
+            textLinkMedia: palette.white,
+            textLinkDanger: palette.red350,
+            textLinkDangerMedia: palette.red,
+            textLinkSnackbar: palette.darkModeMovistarBlue,
+            textActivated: palette.blue300,
+            textBrand: palette.blue300,
+            inputBorder: palette.grey400,
+            inputBorderInverse: palette.grey400,
+            inputBorderNegative: palette.grey400,
+            inputBorderBrand: palette.grey400,
+            completedStep: palette.blue800,
+            completedStepInverse: palette.blue100,
+            completedStepNegative: palette.blue100,
+            completedStepBrand: palette.blue100,
+            control: palette.grey400,
+            controlActivated: palette.darkModeMovistarBlue,
+            controlInverse: palette.grey400,
+            controlNegative: palette.grey400,
+            controlBrand: palette.grey400,
+            controlActivatedInverse: palette.darkModeMovistarBlue,
+            controlActivatedNegative: palette.darkModeMovistarBlue,
+            controlActivatedBrand: palette.darkModeMovistarBlue,
+            controlError: palette.red,
+            chevronIndicator: palette.darkModeMovistarBlue,
+            barTrack: palette.grey600,
+            barTrackInverse: palette.grey600,
+            barTrackNegative: palette.grey600,
+            barTrackBrand: palette.grey600,
+            loadingBar: palette.darkModeMovistarBlue,
+            loadingBarBackground: palette.grey600,
+            toggleAndroidInactive: palette.grey200,
+            toggleAndroidBackgroundActive: palette.blue300,
+            toggleAndroidActiveBrand: palette.darkModeMovistarBlue,
+            toggleAndroidInactiveBrand: palette.grey200,
+            toggleAndroidBackgroundActiveBrand: palette.blue300,
+            toggleAndroidBackgroundInactiveBrand: palette.grey400,
+            iosControlKnob: palette.grey200,
+            controlKnobInverse: palette.grey200,
+            controlKnobNegative: palette.grey200,
+            controlKnobBrand: palette.grey200,
+            divider: applyAlpha(palette.movistarWhite, 0.1),
+            dividerInverse: applyAlpha(palette.movistarWhite, 0.1),
+            dividerNegative: applyAlpha(palette.movistarWhite, 0.1),
+            dividerBrand: applyAlpha(palette.movistarWhite, 0.1),
+            navigationBarDivider: palette.darkModeBlack,
+            badge: palette.red600,
+            feedbackErrorBackground: palette.red,
+            feedbackInfoBackground: palette.blueDark,
+            brand: palette.darkModeMovistarBlue,
+            brandHigh: palette.blueHigh,
+            inverse: palette.grey200,
+            negative: palette.grey200,
+            neutralHigh: palette.grey200,
+            neutralHighBrand: palette.grey200,
+            neutralHighNegative: palette.grey200,
+            neutralMedium: palette.grey500,
+            neutralMediumInverse: palette.grey500,
+            neutralMediumNegative: palette.grey500,
+            neutralMediumBrand: palette.grey500,
+            neutralLow: palette.grey700,
+            neutralLowAlternative: palette.grey700,
+            textPrimary: palette.movistarWhite,
+            textPrimaryInverse: palette.movistarWhite,
+            textPrimaryNegative: palette.movistarWhite,
+            textPrimaryBrand: palette.movistarWhite,
+            textPrimaryMedia: palette.white,
+            textSecondary: palette.grey400,
+            textSecondaryInverse: palette.grey400,
+            textSecondaryNegative: palette.grey400,
+            textSecondaryBrand: palette.grey400,
+            textSecondaryMedia: palette.white,
+            success: palette.emerald,
+            warning: palette.yellow,
+            error: palette.red350,
+            textError: palette.red350,
+            textErrorInverse: palette.red350,
+            textErrorNegative: palette.red350,
+            textErrorBrand: palette.red350,
+            promo: palette.red350,
+            highlight: palette.pink45,
+            successLow: palette.grey700,
+            warningLow: palette.grey700,
+            errorLow: palette.grey700,
+            promoLow: palette.grey700,
+            brandLow: palette.blueDark,
+            successHigh: palette.emeraldHigh,
+            warningHigh: palette.yellow400,
+            errorHigh: palette.red,
+            promoHigh: palette.red,
+            successHighInverse: palette.green700,
+            successHighNegative: palette.green700,
+            successHighBrand: palette.green700,
+            warningHighInverse: palette.yellowHigh,
+            warningHighNegative: palette.yellowHigh,
+            warningHighBrand: palette.yellowHigh,
+            errorHighInverse: palette.red,
+            errorHighNegative: palette.red,
+            errorHighBrand: palette.red,
+            promoHighInverse: palette.red,
+            promoHighNegative: palette.red,
+            promoHighBrand: palette.red,
+            textNavigationBarPrimary: palette.grey200,
+            textNavigationBarSecondary: palette.grey400,
+            textNavigationSearchBarHint: palette.grey400,
+            textNavigationSearchBarText: palette.grey200,
+            textAppBar: palette.grey400,
+            textAppBarSelected: palette.movistarBlue,
+            iosGlassAppBar: palette.white,
+            iosGlassAppBarSelected: palette.blue200,
+            customTabsBackground: palette.darkModeBlack,
+            tagTextPromo: palette.movistarWhite,
+            tagTextActive: palette.blue300,
+            tagTextInactive: palette.grey300,
+            tagTextInfo: palette.blue300,
+            tagTextSuccess: palette.green400,
+            tagTextWarning: palette.yellow400,
+            tagTextError: palette.red350,
+            tagBackgroundPromo: palette.redHigh,
+            tagBackgroundActive: palette.grey700,
+            tagBackgroundInactive: palette.grey700,
+            tagBackgroundInfo: palette.grey700,
+            tagBackgroundSuccess: palette.grey700,
+            tagBackgroundWarning: palette.grey700,
+            tagBackgroundError: palette.grey700,
+            tagTextPromoInverse: palette.movistarWhite,
+            tagTextPromoNegative: palette.movistarWhite,
+            tagTextPromoBrand: palette.movistarWhite,
+            tagTextActiveInverse: palette.blue300,
+            tagTextActiveNegative: palette.blue300,
+            tagTextActiveBrand: palette.blue300,
+            tagTextInactiveInverse: palette.grey300,
+            tagTextInactiveNegative: palette.grey300,
+            tagTextInactiveBrand: palette.grey300,
+            tagTextInfoInverse: palette.blue300,
+            tagTextInfoNegative: palette.blue300,
+            tagTextInfoBrand: palette.blue300,
+            tagTextSuccessInverse: palette.green400,
+            tagTextSuccessNegative: palette.green400,
+            tagTextSuccessBrand: palette.green400,
+            tagTextWarningInverse: palette.yellow400,
+            tagTextWarningNegative: palette.yellow400,
+            tagTextWarningBrand: palette.yellow400,
+            tagTextErrorInverse: palette.red350,
+            tagTextErrorNegative: palette.red350,
+            tagTextErrorBrand: palette.red350,
+            tagBackgroundPromoInverse: palette.redHigh,
+            tagBackgroundPromoNegative: palette.redHigh,
+            tagBackgroundPromoBrand: palette.redHigh,
+            tagBackgroundActiveInverse: palette.grey700,
+            tagBackgroundActiveNegative: palette.grey700,
+            tagBackgroundActiveBrand: palette.grey700,
+            tagBackgroundInactiveInverse: palette.grey700,
+            tagBackgroundInactiveNegative: palette.grey700,
+            tagBackgroundInactiveBrand: palette.grey700,
+            tagBackgroundInfoInverse: palette.grey700,
+            tagBackgroundInfoNegative: palette.grey700,
+            tagBackgroundInfoBrand: palette.grey700,
+            tagBackgroundSuccessInverse: palette.grey700,
+            tagBackgroundSuccessNegative: palette.grey700,
+            tagBackgroundSuccessBrand: palette.grey700,
+            tagBackgroundWarningInverse: palette.grey700,
+            tagBackgroundWarningNegative: palette.grey700,
+            tagBackgroundWarningBrand: palette.grey700,
+            tagBackgroundErrorInverse: palette.grey700,
+            tagBackgroundErrorNegative: palette.grey700,
+            tagBackgroundErrorBrand: palette.grey700,
+            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
+            cardFooterOverlay: applyAlpha(palette.black, 0.7),
+        },
+        borderRadii: {
+            avatar: '50%',
+            bar: '999px',
+            button: '4px',
+            checkbox: '4px',
+            container: '16px',
+            indicator: '24px',
+            chip: '24px',
+            tag: '0px',
+            input: '12px',
+            legacyDisplay: '16px',
+            popup: '8px',
+            sheet: '16px',
+            mediaSmall: '8px',
+        },
+        textPresets: {
+            button: {weight: 'medium'},
+            cardDescriptionDefault: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardDescriptionSnap: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardPretitleDefault: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardPretitleSnap: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardSubtitleDefault: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardSubtitleSnap: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            cardTitle: {weight: 'bold'},
+            cardTitleDefault: {lineHeight: {desktop: 24, mobile: 22}, size: {desktop: 18, mobile: 16}},
+            cardTitleSnap: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            chipLabel: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 18, mobile: 14},
+                weight: 'medium',
+            },
+            drawerTitle: {
+                lineHeight: {desktop: 26, mobile: 26},
+                size: {desktop: 20, mobile: 20},
+                weight: 'bold',
+            },
+            indicator: {weight: 'medium'},
+            inputHelperText: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
+            inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            inputValue: {lineHeight: {desktop: 22, mobile: 22}, size: {desktop: 16, mobile: 16}},
+            link: {weight: 'medium'},
+            loadingScreenTitle: {lineHeight: {desktop: 32, mobile: 28}, size: {desktop: 28, mobile: 24}},
+            navigationBar: {weight: 'medium'},
+            rowTitle: {weight: 'medium'},
+            stepperStepLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'medium',
+            },
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 22, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 22}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 26, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 28, mobile: 26}, size: {desktop: 24, mobile: 20}, weight: 'bold'},
+            text6: {lineHeight: {desktop: 32, mobile: 28}, size: {desktop: 28, mobile: 24}, weight: 'bold'},
+            text7: {lineHeight: {desktop: 38, mobile: 32}, size: {desktop: 32, mobile: 28}, weight: 'bold'},
+            text8: {lineHeight: {desktop: 48, mobile: 38}, size: {desktop: 40, mobile: 32}, weight: 'bold'},
+            text9: {lineHeight: {desktop: 56, mobile: 48}, size: {desktop: 48, mobile: 40}, weight: 'bold'},
+            text10: {lineHeight: {desktop: 64, mobile: 56}, size: {desktop: 56, mobile: 48}, weight: 'bold'},
+            title1: {
+                lineHeight: {desktop: 22, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
+            title2: {lineHeight: {desktop: 24, mobile: 22}, size: {desktop: 18, mobile: 16}, weight: 'bold'},
+            title3: {lineHeight: {desktop: 26, mobile: 24}, size: {desktop: 20, mobile: 18}, weight: 'bold'},
+            title4: {lineHeight: {desktop: 28, mobile: 26}, size: {desktop: 24, mobile: 20}, weight: 'bold'},
+        },
+        themeVariants: {
+            successFeedback: 'inverse',
+            brandLoadingScreen: 'default',
+        },
+        spacing: {
+            buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            buttonSmallPadding: {left: {mobile: 8, desktop: 12}, right: {mobile: 8, desktop: 12}},
+            cardDefaultPadding: {
+                top: {mobile: 16, desktop: 16},
+                bottom: {mobile: 16, desktop: 16},
+                left: {mobile: 16, desktop: 16},
+                right: {mobile: 16, desktop: 16},
+            },
+            inputPadding: {top: {mobile: 9, desktop: 3}, bottom: {mobile: 9, desktop: 3}},
+            tagPadding: {top: {mobile: 2, desktop: 2}, bottom: {mobile: 2, desktop: 2}},
+            feedbackScreenPadding: {
+                top: {mobile: 64, desktop: 40},
+                bottom: {mobile: 16, desktop: 40},
+                left: {mobile: 16, desktop: 40},
+                right: {mobile: 16, desktop: 40},
+            },
+            heroPadding: {top: {mobile: 16, desktop: 56}, bottom: {mobile: 16, desktop: 56}},
+            headerPadding: {top: {mobile: 16, desktop: 48}, bottom: {mobile: 16, desktop: 48}},
+            drawerPadding: {
+                top: {mobile: 32, desktop: 32},
+                bottom: {mobile: 16, desktop: 32},
+                left: {mobile: 16, desktop: 24},
+                right: {mobile: 16, desktop: 24},
+            },
+        },
+    };
+    return skin;
+};