@telefonica/mistica 16.39.0 → 16.41.0

package/dist/skins/movistar-new.js

@@ -0,0 +1,594 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getMovistarNewSkin: function() {
+        return i;
+    },
+    palette: function() {
+        return e;
+    }
+});
+const _constants = require("./constants.js");
+const _color = require("../utils/color.js");
+const e = {
+    movistarBlue: "#0066FF",
+    movistarWhite: "#FEFAF5",
+    movistarBlack: "#262423",
+    blue100: "#E5F0FF",
+    blue200: "#E8F4FA",
+    blue300: "#80B3FF",
+    blue600: "#4DBAF7",
+    blue800: "#0149B3",
+    blueLight: "#D3EEFF",
+    blueHigh: "#005EEB",
+    blueDark: "#022D67",
+    red: "#C10000",
+    red350: "#FF8A8A",
+    redHigh: "#AD0000",
+    salmon100: "#FEEEE6",
+    salmon200: "#FDE5D7",
+    salmonLight: "#FFC6A8",
+    salmonDark: "#62301A",
+    yellow: "#EDB800",
+    yellow200: "#FFF3D1",
+    yellow400: "#FFCB11",
+    yellow500: "#C59A00",
+    yellow600: "#BFA960",
+    yellowLight: "#FFE99C",
+    yellowHigh: "#5E4A09",
+    yellowDark: "#5E4A09",
+    emerald: "#048239",
+    emeraldHigh: "#036D30",
+    green200: "#EBF9DF",
+    green400: "#8DCC5B",
+    green700: "#407F0F",
+    greenLight: "#CEF7BF",
+    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"
+}, i = ()=>({
+        name: _constants.MOVISTAR_NEW_SKIN,
+        colors: {
+            background: e.white,
+            backgroundAlternative: e.movistarWhite,
+            backgroundBrand: e.movistarBlue,
+            backgroundBrandSecondary: e.movistarBlack,
+            backgroundContainer: e.white,
+            backgroundContainerError: e.salmon100,
+            backgroundContainerHover: (0, _color.applyAlpha)(e.movistarBlack, 0.02),
+            backgroundContainerPressed: (0, _color.applyAlpha)(e.movistarBlack, 0.02),
+            backgroundContainerBrand: e.movistarBlue,
+            backgroundContainerBrandHover: (0, _color.applyAlpha)(e.movistarBlack, 0.1),
+            backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.movistarBlack, 0.2),
+            backgroundContainerBrandOverInverse: e.blue800,
+            backgroundContainerAlternative: e.grey100,
+            backgroundOverlay: (0, _color.applyAlpha)(e.movistarBlack, 0.6),
+            backgroundSkeleton: e.grey200,
+            backgroundSkeletonInverse: e.blue800,
+            backgroundBrandTop: e.movistarBlue,
+            backgroundBrandBottom: e.movistarBlue,
+            appBarBackground: e.white,
+            navigationBarBackground: e.movistarBlue,
+            skeletonWave: e.grey200,
+            borderLow: e.grey100,
+            border: e.grey300,
+            borderHigh: e.grey600,
+            borderSelected: e.blue800,
+            coverBackgroundHover: (0, _color.applyAlpha)(e.movistarBlack, 0.25),
+            coverBackgroundPressed: (0, _color.applyAlpha)(e.movistarBlack, 0.35),
+            buttonDangerBackground: e.red,
+            buttonDangerBackgroundPressed: e.redHigh,
+            buttonDangerBackgroundHover: e.redHigh,
+            buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.salmon100,
+            buttonLinkDangerBackgroundInversePressed: e.salmon100,
+            buttonLinkDangerBackgroundMediaPressed: e.salmon100,
+            buttonLinkBackgroundPressed: e.blue100,
+            buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.3),
+            buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.3),
+            buttonPrimaryBackground: e.movistarBlue,
+            buttonPrimaryBackgroundInverse: e.white,
+            buttonPrimaryBackgroundMedia: e.white,
+            buttonPrimaryBackgroundHover: e.blueHigh,
+            buttonPrimaryBackgroundInverseHover: e.blue100,
+            buttonPrimaryBackgroundMediaHover: e.blue100,
+            buttonPrimaryBackgroundPressed: e.blueHigh,
+            buttonPrimaryBackgroundInversePressed: e.blue100,
+            buttonPrimaryBackgroundMediaPressed: e.blue100,
+            buttonSecondaryBorder: e.movistarBlue,
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.blue800,
+            buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.blue100,
+            buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.2),
+            buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: e.blue100,
+            buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.3),
+            buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.3),
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.movistarBlue,
+            textButtonPrimaryMedia: e.movistarBlue,
+            textButtonPrimaryInversePressed: e.blue800,
+            textButtonPrimaryMediaPressed: e.blueHigh,
+            textButtonSecondary: e.movistarBlue,
+            textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.blue800,
+            textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
+            textLink: e.movistarBlue,
+            textLinkInverse: e.white,
+            textLinkMedia: e.white,
+            textLinkDanger: e.red,
+            textLinkDangerMedia: e.red,
+            textLinkSnackbar: e.blue300,
+            textActivated: e.blueHigh,
+            textBrand: e.blueHigh,
+            inputBorder: e.grey500,
+            inputBorderInverse: e.white,
+            completedStep: e.movistarBlue,
+            completedStepInverse: e.blue200,
+            control: e.grey500,
+            controlActivated: e.movistarBlue,
+            controlInverse: e.blueLight,
+            controlActivatedInverse: e.white,
+            controlError: e.red,
+            barTrack: e.grey300,
+            barTrackInverse: (0, _color.applyAlpha)(e.movistarBlack, 0.14),
+            loadingBar: e.blueLight,
+            loadingBarBackground: e.blueHigh,
+            toggleAndroidInactive: e.grey200,
+            toggleAndroidBackgroundActive: e.blue300,
+            iosControlKnob: e.white,
+            controlKnobInverse: e.movistarBlue,
+            divider: e.grey300,
+            dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
+            navigationBarDivider: e.movistarBlue,
+            badge: e.red,
+            feedbackErrorBackground: e.red,
+            feedbackInfoBackground: e.blueDark,
+            brand: e.movistarBlue,
+            brandHigh: e.blue800,
+            inverse: e.white,
+            neutralHigh: e.movistarBlack,
+            neutralMedium: e.grey600,
+            neutralMediumInverse: e.grey600,
+            neutralLow: e.grey100,
+            neutralLowAlternative: e.grey200,
+            textPrimary: e.movistarBlack,
+            textPrimaryInverse: e.white,
+            textPrimaryMedia: e.white,
+            textSecondary: e.grey600,
+            textSecondaryInverse: e.movistarWhite,
+            textSecondaryMedia: e.movistarWhite,
+            success: e.emerald,
+            warning: e.yellow600,
+            error: e.red,
+            textError: e.red,
+            textErrorInverse: e.white,
+            promo: e.redHigh,
+            highlight: e.pink55,
+            successLow: e.green200,
+            warningLow: e.yellow200,
+            errorLow: e.salmon100,
+            promoLow: e.salmon100,
+            brandLow: e.blue100,
+            successHigh: e.green700,
+            warningHigh: e.yellowHigh,
+            errorHigh: e.redHigh,
+            promoHigh: e.redHigh,
+            successHighInverse: e.emeraldHigh,
+            warningHighInverse: e.yellowHigh,
+            errorHighInverse: e.redHigh,
+            promoHighInverse: e.redHigh,
+            textNavigationBarPrimary: e.white,
+            textNavigationBarSecondary: e.blue300,
+            textNavigationSearchBarHint: e.blue300,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey600,
+            textAppBarSelected: e.blue800,
+            customTabsBackground: e.white,
+            tagTextPromo: e.white,
+            tagTextActive: e.blueHigh,
+            tagTextInactive: e.grey600,
+            tagTextInfo: e.blueHigh,
+            tagTextSuccess: e.emeraldHigh,
+            tagTextWarning: e.yellowHigh,
+            tagTextError: e.redHigh,
+            tagBackgroundPromo: e.redHigh,
+            tagBackgroundActive: e.blue100,
+            tagBackgroundInactive: e.grey200,
+            tagBackgroundInfo: e.blue100,
+            tagBackgroundSuccess: e.green200,
+            tagBackgroundWarning: e.yellowLight,
+            tagBackgroundError: e.salmon200,
+            tagTextPromoInverse: e.redHigh,
+            tagTextActiveInverse: e.blueHigh,
+            tagTextInactiveInverse: e.grey600,
+            tagTextInfoInverse: e.blueHigh,
+            tagTextSuccessInverse: e.green700,
+            tagTextWarningInverse: e.yellowHigh,
+            tagTextErrorInverse: e.redHigh,
+            tagBackgroundPromoInverse: e.white,
+            tagBackgroundActiveInverse: e.white,
+            tagBackgroundInactiveInverse: e.white,
+            tagBackgroundInfoInverse: e.white,
+            tagBackgroundSuccessInverse: e.white,
+            tagBackgroundWarningInverse: e.white,
+            tagBackgroundErrorInverse: e.white,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: (0, _color.applyAlpha)(e.black, 0.7)
+        },
+        darkModeColors: {
+            background: e.darkModeBlack,
+            backgroundAlternative: e.darkModeBlack,
+            backgroundBrand: e.darkModeBlack,
+            backgroundBrandSecondary: e.darkModeBlack,
+            backgroundContainer: e.darkModeGrey,
+            backgroundContainerError: e.darkModeGrey,
+            backgroundContainerHover: (0, _color.applyAlpha)(e.white, 0.08),
+            backgroundContainerPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundContainerBrandOverInverse: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
+            backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
+            backgroundSkeleton: e.grey600,
+            backgroundSkeletonInverse: e.grey600,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
+            appBarBackground: e.darkModeGrey,
+            navigationBarBackground: e.darkModeBlack,
+            skeletonWave: e.grey600,
+            borderLow: e.darkModeBlack,
+            border: e.darkModeGrey,
+            borderHigh: e.grey500,
+            borderSelected: e.darkModeMovistarBlue,
+            coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.red,
+            buttonDangerBackgroundPressed: e.redHigh,
+            buttonDangerBackgroundHover: e.redHigh,
+            buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.salmon100,
+            buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.2),
+            buttonPrimaryBackground: e.movistarBlue,
+            buttonPrimaryBackgroundInverse: e.movistarBlue,
+            buttonPrimaryBackgroundMedia: e.white,
+            buttonPrimaryBackgroundHover: e.blueHigh,
+            buttonPrimaryBackgroundInverseHover: e.blue800,
+            buttonPrimaryBackgroundMediaHover: e.blue100,
+            buttonPrimaryBackgroundPressed: e.blue800,
+            buttonPrimaryBackgroundInversePressed: e.blue800,
+            buttonPrimaryBackgroundMediaPressed: e.blue100,
+            buttonSecondaryBorder: e.white,
+            buttonSecondaryBorderInverse: e.grey200,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
+            buttonSecondaryBorderInversePressed: e.grey200,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: (0, _color.applyAlpha)(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.25),
+            buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.25),
+            buttonSecondaryBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.3),
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.white,
+            textButtonPrimaryMedia: e.movistarBlue,
+            textButtonPrimaryInversePressed: e.blueLight,
+            textButtonPrimaryMediaPressed: e.blueHigh,
+            textButtonSecondary: e.grey200,
+            textButtonSecondaryInverse: e.grey200,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey200,
+            textButtonSecondaryInversePressed: e.grey200,
+            textButtonSecondaryMediaPressed: e.white,
+            textLink: e.darkModeMovistarBlue,
+            textLinkInverse: e.darkModeMovistarBlue,
+            textLinkMedia: e.white,
+            textLinkDanger: e.red350,
+            textLinkDangerMedia: e.red,
+            textLinkSnackbar: e.darkModeMovistarBlue,
+            textActivated: e.blue300,
+            textBrand: e.blue300,
+            inputBorder: e.grey400,
+            inputBorderInverse: e.grey400,
+            completedStep: e.blue800,
+            completedStepInverse: e.blue200,
+            control: e.grey400,
+            controlActivated: e.darkModeMovistarBlue,
+            controlInverse: e.grey400,
+            controlActivatedInverse: e.darkModeMovistarBlue,
+            controlError: e.red,
+            barTrack: e.grey600,
+            barTrackInverse: e.grey600,
+            loadingBar: e.darkModeMovistarBlue,
+            loadingBarBackground: e.grey600,
+            toggleAndroidInactive: e.grey200,
+            toggleAndroidBackgroundActive: e.blue300,
+            iosControlKnob: e.grey200,
+            controlKnobInverse: e.grey200,
+            divider: (0, _color.applyAlpha)(e.movistarWhite, 0.1),
+            dividerInverse: (0, _color.applyAlpha)(e.movistarWhite, 0.1),
+            navigationBarDivider: e.darkModeBlack,
+            badge: e.red,
+            feedbackErrorBackground: e.red,
+            feedbackInfoBackground: e.blueDark,
+            brand: e.darkModeMovistarBlue,
+            brandHigh: e.blueHigh,
+            inverse: e.grey200,
+            neutralHigh: e.grey200,
+            neutralMedium: e.grey500,
+            neutralMediumInverse: e.grey500,
+            neutralLow: e.grey700,
+            neutralLowAlternative: e.grey700,
+            textPrimary: e.movistarWhite,
+            textPrimaryInverse: e.movistarWhite,
+            textPrimaryMedia: e.white,
+            textSecondary: e.grey400,
+            textSecondaryInverse: e.grey400,
+            textSecondaryMedia: e.white,
+            success: e.emerald,
+            warning: e.yellow,
+            error: e.red350,
+            textError: e.red350,
+            textErrorInverse: e.red350,
+            promo: e.redHigh,
+            highlight: e.pink45,
+            successLow: e.grey700,
+            warningLow: e.grey700,
+            errorLow: e.grey700,
+            promoLow: e.grey700,
+            brandLow: e.blueDark,
+            successHigh: e.emeraldHigh,
+            warningHigh: e.yellow400,
+            errorHigh: e.redHigh,
+            promoHigh: e.redHigh,
+            successHighInverse: e.green700,
+            warningHighInverse: e.yellowHigh,
+            errorHighInverse: e.redHigh,
+            promoHighInverse: e.redHigh,
+            textNavigationBarPrimary: e.grey200,
+            textNavigationBarSecondary: e.grey400,
+            textNavigationSearchBarHint: e.grey400,
+            textNavigationSearchBarText: e.grey200,
+            textAppBar: e.grey400,
+            textAppBarSelected: e.movistarBlue,
+            customTabsBackground: e.darkModeBlack,
+            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,
+            tagTextActiveInverse: e.blue300,
+            tagTextInactiveInverse: e.grey300,
+            tagTextInfoInverse: e.blue300,
+            tagTextSuccessInverse: e.green400,
+            tagTextWarningInverse: e.yellow400,
+            tagTextErrorInverse: e.red350,
+            tagBackgroundPromoInverse: e.redHigh,
+            tagBackgroundActiveInverse: e.grey700,
+            tagBackgroundInactiveInverse: e.grey700,
+            tagBackgroundInfoInverse: e.grey700,
+            tagBackgroundSuccessInverse: e.grey700,
+            tagBackgroundWarningInverse: e.grey700,
+            tagBackgroundErrorInverse: e.grey700,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: (0, _color.applyAlpha)(e.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"
+            },
+            cardTitle: {
+                weight: "bold"
+            },
+            indicator: {
+                weight: "medium"
+            },
+            link: {
+                weight: "medium"
+            },
+            navigationBar: {
+                weight: "medium"
+            },
+            rowTitle: {
+                weight: "medium"
+            },
+            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: {
+                weight: "medium"
+            },
+            title2: {
+                weight: "bold"
+            },
+            title3: {
+                lineHeight: {
+                    desktop: 28,
+                    mobile: 26
+                },
+                size: {
+                    desktop: 24,
+                    mobile: 20
+                },
+                weight: "bold"
+            }
+        },
+        themeVariants: {
+            successFeedback: "default",
+            brandLoadingScreen: "default"
+        }
+    });

package/dist/skins/movistar.js

@@ -188,8 +188,10 @@ const e = {
             neutralLowAlternative: e.grey2,
             textPrimary: e.movistarBlueDark,
             textPrimaryInverse: e.white,
+            textPrimaryMedia: e.white,
             textSecondary: e.grey5,
             textSecondaryInverse: e.movistarBlue10,
+            textSecondaryMedia: e.white,
             success: e.movistarGreen55,
             warning: e.egg55,
             error: e.pepper55,
@@ -360,8 +362,10 @@ const e = {
             neutralLowAlternative: e.darkModeGrey7,
             textPrimary: e.darkModeGrey2,
             textPrimaryInverse: e.darkModeGrey2,
+            textPrimaryMedia: e.white,
             textSecondary: e.darkModeGrey4,
             textSecondaryInverse: e.darkModeGrey4,
+            textSecondaryMedia: e.white,
             success: e.movistarGreen,
             warning: e.egg,
             error: e.pepper45,
@@ -426,7 +430,9 @@ const e = {
             button: "4px",
             checkbox: "4px",
             container: "16px",
-            indicator: "999px",
+            indicator: "24px",
+            chip: "24px",
+            tag: "24px",
             input: "12px",
             legacyDisplay: "16px",
             popup: "8px",
@@ -449,6 +455,9 @@ const e = {
             navigationBar: {
                 weight: "medium"
             },
+            rowTitle: {
+                weight: "regular"
+            },
             tabsLabel: {
                 lineHeight: {
                     desktop: 24,

package/dist/skins/o2-new.js

@@ -179,8 +179,10 @@ const e = {
             neutralLowAlternative: e.grey30,
             textPrimary: e.black,
             textPrimaryInverse: e.white,
+            textPrimaryMedia: e.white,
             textSecondary: e.grey60,
             textSecondaryInverse: e.beyondBlue10,
+            textSecondaryMedia: e.white,
             success: e.o2Green,
             warning: e.o2Orange60,
             error: e.o2Red65,
@@ -351,8 +353,10 @@ const e = {
             neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey30,
             textPrimaryInverse: e.grey30,
+            textPrimaryMedia: e.white,
             textSecondary: e.grey45,
             textSecondaryInverse: e.grey45,
+            textSecondaryMedia: e.white,
             success: e.o2Green,
             warning: e.o2Orange,
             error: e.o2Red45,
@@ -414,10 +418,12 @@ const e = {
         borderRadii: {
             avatar: "50%",
             bar: "999px",
-            button: "999px",
+            button: "32px",
             checkbox: "2px",
             container: "16px",
-            indicator: "999px",
+            indicator: "24px",
+            chip: "24px",
+            tag: "24px",
             input: "12px",
             legacyDisplay: "16px",
             popup: "8px",
@@ -440,6 +446,9 @@ const e = {
             navigationBar: {
                 weight: "medium"
             },
+            rowTitle: {
+                weight: "regular"
+            },
             tabsLabel: {
                 lineHeight: {
                     desktop: 24,