@telefonica/mistica 17.3.0 → 17.5.0

package/dist/skins/blau.js

@@ -86,6 +86,8 @@ const e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: e.blauBluePrimary30,
             backgroundContainerAlternative: e.blauBluePrimary20,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blauBluePrimary30,
             backgroundOverlay: (0, _color.applyAlpha)(e.blauBlueSecondary, 0.75),
             backgroundSkeleton: e.grey3,
             backgroundSkeletonInverse: e.blauBlueSecondary,
@@ -132,12 +134,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkNeutralBackgroundPressed: e.grey1,
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey1,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey1,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey1,
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.white,
@@ -203,9 +205,9 @@ const e = {
             textLinkSnackbar: e.blauPurple30,
             textLinkNeutral: e.grey6,
             textLinkNeutralBrand: e.grey6,
-            textLinkNeutralNegative: e.grey6,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.grey6,
-            textLinkNeutralMedia: e.grey6,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
             inputBorder: e.grey4,
@@ -393,6 +395,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,
@@ -798,6 +802,17 @@ const e = {
                 },
                 weight: "light"
             },
+            headerPretitle: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
             indicator: {
                 weight: "medium"
             },

package/dist/skins/defaults.js

@@ -181,6 +181,17 @@ const e = {
             mobile: 14
         }
     },
+    headerPretitle: {
+        lineHeight: {
+            desktop: 24,
+            mobile: 22
+        },
+        size: {
+            desktop: 18,
+            mobile: 16
+        },
+        weight: "regular"
+    },
     cardSubtitleDefault: {
         lineHeight: {
             desktop: 24,

package/dist/skins/esimflag.js

@@ -90,6 +90,8 @@ const e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.darkModeBlack, 0.6),
             backgroundContainerBrandOverBrand: e.blue80,
             backgroundContainerAlternative: e.grey1,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blue80,
             backgroundOverlay: (0, _color.applyAlpha)(e.black, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.blue55,
@@ -132,12 +134,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkNeutralBackgroundPressed: (0, _color.applyAlpha)(e.grey3, 0.4),
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey2,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey2,
-            buttonLinkNeutralBackgroundMedia: e.grey2,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey2,
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.blue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -202,10 +204,10 @@ const e = {
             textLinkDangerMedia: e.tomato60,
             textLinkSnackbar: e.blue30,
             textLinkNeutral: e.blue85,
-            textLinkNeutralBrand: e.blue85,
-            textLinkNeutralNegative: e.blue85,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.blue85,
-            textLinkNeutralMedia: e.blue85,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blue,
             textBrand: e.blue,
             inputBorder: e.grey4,
@@ -397,6 +399,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
@@ -802,6 +806,17 @@ const e = {
                 },
                 weight: "bold"
             },
+            headerPretitle: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
             indicator: {
                 weight: "medium"
             },

package/dist/skins/movistar.js

@@ -97,6 +97,8 @@ const e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.movistarBlack, 0.2),
             backgroundContainerBrandOverBrand: e.blue800,
             backgroundContainerAlternative: e.grey100,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blue800,
             backgroundOverlay: (0, _color.applyAlpha)(e.movistarBlack, 0.6),
             backgroundSkeleton: e.grey200,
             backgroundSkeletonInverse: e.blue800,
@@ -139,12 +141,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.3),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.3),
             buttonLinkNeutralBackgroundPressed: e.grey100,
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey100,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey100,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey100,
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.3),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.3),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.3),
             buttonPrimaryBackground: e.movistarBlue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -209,10 +211,10 @@ const e = {
             textLinkDangerMedia: e.red,
             textLinkSnackbar: e.blue300,
             textLinkNeutral: e.movistarBlack,
-            textLinkNeutralBrand: e.movistarBlack,
-            textLinkNeutralNegative: e.movistarBlack,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.movistarBlack,
-            textLinkNeutralMedia: e.movistarBlack,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blueHigh,
             textBrand: e.blueHigh,
             inputBorder: e.grey500,
@@ -404,6 +406,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey600,
             backgroundSkeletonInverse: e.grey600,
@@ -809,6 +813,17 @@ const e = {
                 },
                 weight: "bold"
             },
+            headerPretitle: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 22
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
             indicator: {
                 weight: "medium"
             },

package/dist/skins/o2.js

@@ -93,6 +93,8 @@ const e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: e.beyondBlue70,
             backgroundContainerAlternative: e.grey20,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.beyondBlue70,
             backgroundOverlay: (0, _color.applyAlpha)(e.black, 0.6),
             backgroundSkeleton: e.grey30,
             backgroundSkeletonInverse: e.beyondBlue70,
@@ -135,12 +137,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkNeutralBackgroundPressed: (0, _color.applyAlpha)(e.grey30, 0.4),
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey20,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey20,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey20,
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.beyondBlue,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -205,10 +207,10 @@ const e = {
             textLinkDangerMedia: e.o2Red65,
             textLinkSnackbar: e.beyondBlue30,
             textLinkNeutral: e.black,
-            textLinkNeutralBrand: e.black,
-            textLinkNeutralNegative: e.black,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.black,
-            textLinkNeutralMedia: e.black,
+            textLinkNeutralMedia: e.white,
             textActivated: e.beyondBlue,
             textBrand: e.beyondBlue,
             inputBorder: e.grey45,
@@ -400,6 +402,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
@@ -805,6 +809,17 @@ const e = {
                 },
                 weight: "bold"
             },
+            headerPretitle: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
             indicator: {
                 weight: "medium"
             },