@telefonica/mistica 16.26.0 → 16.27.0

package/dist/skins/blau.js

@@ -35,55 +35,59 @@ const e = {
     blauYellow10: "#FFF6E9",
     blauYellow40: "#FFC364",
     blauYellow60: "#F09500",
+    blauYellow65: "#D28200",
     blauYellow70: "#996614",
     blauGreen: "#30D300",
     blauGreen10: "#EAFBE5",
     blauGreen30: "#97E980",
     blauGreen70: "#1D7F00",
-    blauRed: "#F64417",
+    blauRed: "#D12937",
     blauRed10: "#FEECE8",
     blauRed20: "#FCC7B9",
     blauRed30: "#FA9E87",
     blauRed40: "#F97C5D",
-    blauRed70: "#C93712",
-    grey1: "#F5F9FA",
-    grey2: "#E7E7E7",
-    grey3: "#B8B8B8",
-    grey4: "#A0A0A0",
-    grey5: "#808285",
+    blauRed70: "#BC3310",
+    grey1: "#F6F6F6",
+    grey2: "#F2F2F2",
+    grey3: "#DDDDDD",
+    grey4: "#8A8C90",
+    grey5: "#666666",
     grey6: "#000000",
     white: "#FFFFFF",
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
+    darkModeGrey5: "#6D7D88",
     darkModeGrey6: "#313235"
 }, d = ()=>({
         name: _constants.BLAU_SKIN,
         colors: {
+            background: e.white,
+            backgroundAlternative: e.blauBluePrimary20,
             backgroundBrand: e.blauBluePrimary,
             backgroundBrandSecondary: e.blauBluePrimary,
-            appBarBackground: e.white,
-            background: e.white,
             backgroundContainer: e.white,
             backgroundContainerError: e.blauRed10,
             backgroundContainerHover: (0, _color.applyAlpha)(e.blauBlueSecondary, 0.05),
             backgroundContainerPressed: (0, _color.applyAlpha)(e.blauBlueSecondary, 0.08),
-            backgroundContainerBrand: e.blauBluePrimary,
+            backgroundContainerBrand: e.blauBlueSecondary,
             backgroundContainerBrandHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.2),
             backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: e.blauBlueSecondary,
+            backgroundContainerBrandOverInverse: e.blauBlueSecondary60,
             backgroundContainerAlternative: e.blauBluePrimary20,
             backgroundOverlay: (0, _color.applyAlpha)(e.blauBlueSecondary, 0.75),
-            backgroundSkeleton: e.grey2,
+            backgroundSkeleton: e.grey3,
             backgroundSkeletonInverse: e.blauBlueSecondary,
-            navigationBarBackground: e.blauBluePrimary,
-            backgroundAlternative: e.blauBluePrimary20,
             backgroundBrandTop: e.blauBluePrimary,
             backgroundBrandBottom: e.blauBluePrimary,
+            appBarBackground: e.white,
+            navigationBarBackground: e.blauBluePrimary,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
-            border: e.grey2,
+            border: e.grey3,
             borderHigh: e.grey5,
             borderSelected: e.blauBlueSecondary60,
+            completedStep: e.blauBlueSecondary,
+            completedStepInverse: e.blauBlueSecondary60,
             coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
             coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.blauRed,
@@ -120,28 +124,28 @@ const e = {
             textLinkSnackbar: e.blauPurple30,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBluePrimary,
-            inputBorder: e.grey5,
-            control: e.grey5,
+            inputBorder: e.grey4,
+            control: e.grey4,
             controlActivated: e.blauBlueSecondary,
             controlInverse: e.blauBluePrimary30,
             controlActivatedInverse: e.white,
             controlError: e.blauRed,
-            barTrack: e.grey2,
+            barTrack: e.grey3,
             barTrackInverse: (0, _color.applyAlpha)(e.grey6, 0.2),
             loadingBar: e.blauBlueSecondary,
-            loadingBarBackground: e.blauBlueSecondary10,
+            loadingBarBackground: e.blauBlueSecondary20,
             toggleAndroidInactive: e.grey2,
-            toggleAndroidBackgroundActive: e.blauBlueSecondary10,
+            toggleAndroidBackgroundActive: e.blauBlueSecondary30,
             iosControlKnob: e.white,
             controlKnobInverse: e.blauBlueSecondary,
-            divider: e.grey2,
+            divider: e.grey3,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.blauBluePrimary,
             badge: e.blauRed,
             feedbackErrorBackground: e.blauRed,
             feedbackInfoBackground: e.grey6,
             brand: e.blauBluePrimary,
-            brandHigh: e.blauBlueSecondary,
+            brandHigh: e.blauBlueSecondary60,
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
@@ -155,15 +159,15 @@ const e = {
             error: e.blauRed,
             textError: e.blauRed,
             textErrorInverse: e.white,
-            success: e.blauGreen,
-            warning: e.blauYellow,
+            success: e.blauGreen70,
+            warning: e.blauYellow65,
             promo: e.blauPurple,
             highlight: e.blauBluePrimary,
             successLow: e.blauGreen10,
             warningLow: e.blauYellow10,
             errorLow: e.blauRed10,
             promoLow: e.blauPurple10,
-            brandLow: e.blauBlueSecondary10,
+            brandLow: e.blauBluePrimary20,
             successHigh: e.blauGreen70,
             warningHigh: e.blauYellow70,
             errorHigh: e.blauRed70,
@@ -172,38 +176,38 @@ const e = {
             warningHighInverse: e.blauYellow70,
             errorHighInverse: e.blauRed70,
             promoHighInverse: e.blauPurple,
-            textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.blauBlueSecondary20,
-            textNavigationSearchBarHint: e.blauBlueSecondary20,
-            textNavigationSearchBarText: e.white,
+            textNavigationBarPrimary: e.grey6,
+            textNavigationBarSecondary: e.grey6,
+            textNavigationSearchBarHint: e.grey6,
+            textNavigationSearchBarText: e.grey6,
             textAppBar: e.grey5,
             textAppBarSelected: e.blauBlueSecondary60,
             customTabsBackground: e.blauBluePrimary,
             tagTextPromo: e.blauPurple,
-            tagTextActive: e.blauBluePrimary,
+            tagTextActive: e.blauBlueSecondary,
             tagTextInactive: e.grey5,
-            tagTextInfo: e.blauBluePrimary,
+            tagTextInfo: e.blauBlueSecondary,
             tagTextSuccess: e.blauGreen70,
             tagTextWarning: e.blauYellow70,
             tagTextError: e.blauRed70,
             tagBackgroundPromo: e.blauPurple10,
-            tagBackgroundActive: e.blauBlueSecondary10,
+            tagBackgroundActive: e.blauBluePrimary20,
             tagBackgroundInactive: e.grey1,
-            tagBackgroundInfo: e.blauBlueSecondary10,
+            tagBackgroundInfo: e.blauBluePrimary20,
             tagBackgroundSuccess: e.blauGreen10,
             tagBackgroundWarning: e.blauYellow10,
             tagBackgroundError: e.blauRed10,
             tagTextPromoInverse: e.blauPurple,
-            tagTextActiveInverse: e.blauBluePrimary,
+            tagTextActiveInverse: e.blauBlueSecondary,
             tagTextInactiveInverse: e.grey5,
-            tagTextInfoInverse: e.blauBluePrimary,
+            tagTextInfoInverse: e.blauBlueSecondary,
             tagTextSuccessInverse: e.blauGreen70,
             tagTextWarningInverse: e.blauYellow70,
             tagTextErrorInverse: e.blauRed70,
             tagBackgroundPromoInverse: e.blauPurple10,
-            tagBackgroundActiveInverse: e.blauBlueSecondary10,
+            tagBackgroundActiveInverse: e.blauBluePrimary20,
             tagBackgroundInactiveInverse: e.grey1,
-            tagBackgroundInfoInverse: e.blauBlueSecondary10,
+            tagBackgroundInfoInverse: e.blauBluePrimary20,
             tagBackgroundSuccessInverse: e.blauGreen10,
             tagBackgroundWarningInverse: e.blauYellow10,
             tagBackgroundErrorInverse: e.blauRed10,
@@ -235,18 +239,20 @@ const e = {
             border: e.darkModeGrey,
             borderHigh: e.grey5,
             borderSelected: e.blauBlueSecondary60,
+            completedStep: e.blauBlueSecondary,
+            completedStepInverse: e.blauBlueSecondary,
             coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
             coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundPressed: e.blauRed70,
             buttonDangerBackgroundHover: e.blauRed70,
-            buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
+            buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.blauRed, 0.3),
             buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
             buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
             buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
             buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
             buttonPrimaryBackground: e.blauBlueSecondary,
-            buttonPrimaryBackgroundInverse: e.blauBluePrimary,
+            buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
             buttonPrimaryBackgroundHover: e.blauBlueSecondary60,
             buttonPrimaryBackgroundInversePressed: e.blauBlueSecondary60,
@@ -267,25 +273,25 @@ const e = {
             textButtonSecondaryInversePressed: e.grey2,
             textLink: e.blauPurple30,
             textLinkInverse: e.blauPurple30,
-            textLinkDanger: e.blauRed,
+            textLinkDanger: e.blauRed40,
             textLinkSnackbar: e.blauPurple30,
-            textActivated: e.blauBlueSecondary,
+            textActivated: e.blauBluePrimary,
             textBrand: e.blauBluePrimary,
-            inputBorder: e.grey5,
-            control: e.darkModeGrey6,
+            inputBorder: e.darkModeGrey5,
+            control: e.grey4,
             controlActivated: e.blauBlueSecondary,
-            controlInverse: e.darkModeGrey6,
+            controlInverse: e.grey4,
             controlActivatedInverse: e.blauBlueSecondary,
             controlError: e.blauRed,
-            barTrack: e.darkModeGrey6,
-            barTrackInverse: e.darkModeGrey6,
+            barTrack: e.grey5,
+            barTrackInverse: e.grey5,
             loadingBar: e.blauBluePrimary,
-            loadingBarBackground: e.darkModeGrey,
-            toggleAndroidInactive: e.grey5,
-            toggleAndroidBackgroundActive: e.blauBlueSecondary30,
+            loadingBarBackground: e.grey5,
+            toggleAndroidInactive: e.grey3,
+            toggleAndroidBackgroundActive: e.blauBluePrimary30,
             iosControlKnob: e.grey2,
             controlKnobInverse: e.grey2,
-            divider: (0, _color.applyAlpha)(e.white, 0.05),
+            divider: (0, _color.applyAlpha)(e.white, 0.09),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
             badge: e.blauRed,
@@ -295,8 +301,8 @@ const e = {
             brandHigh: (0, _color.applyAlpha)(e.white, 0.05),
             inverse: e.grey2,
             neutralHigh: e.grey2,
-            neutralMedium: e.grey5,
-            neutralMediumInverse: e.grey5,
+            neutralMedium: e.grey4,
+            neutralMediumInverse: e.grey4,
             neutralLow: e.darkModeGrey6,
             neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.grey2,
@@ -304,8 +310,8 @@ const e = {
             textSecondary: e.grey4,
             textSecondaryInverse: e.grey4,
             error: e.blauRed,
-            textError: e.blauRed,
-            textErrorInverse: e.blauRed,
+            textError: e.blauRed40,
+            textErrorInverse: e.blauRed40,
             success: e.blauGreen,
             warning: e.blauYellow,
             promo: e.blauPurple,
@@ -332,7 +338,7 @@ const e = {
             customTabsBackground: e.darkModeBlack,
             tagTextPromo: e.blauPurple30,
             tagTextActive: e.blauBluePrimary,
-            tagTextInactive: e.grey5,
+            tagTextInactive: e.grey4,
             tagTextInfo: e.blauBluePrimary,
             tagTextSuccess: e.blauGreen30,
             tagTextWarning: e.blauYellow40,
@@ -346,7 +352,7 @@ const e = {
             tagBackgroundError: e.darkModeGrey6,
             tagTextPromoInverse: e.blauPurple30,
             tagTextActiveInverse: e.blauBluePrimary,
-            tagTextInactiveInverse: e.grey5,
+            tagTextInactiveInverse: e.grey4,
             tagTextInfoInverse: e.blauBluePrimary,
             tagTextSuccessInverse: e.blauGreen30,
             tagTextWarningInverse: e.blauYellow40,
@@ -523,5 +529,9 @@ const e = {
                 },
                 weight: "light"
             }
+        },
+        themeVariants: {
+            successFeedback: "default",
+            brandLoadingScreen: "default"
         }
     });

package/dist/skins/defaults.d.ts

@@ -1,3 +1,4 @@
-import type { BorderRadiiConfig, TextPresetsConfig } from './types';
+import type { BorderRadiiConfig, TextPresetsConfig, ThemeVariantsConfig } from './types';
 export declare const defaultTextPresetsConfig: TextPresetsConfig;
 export declare const defaultBorderRadiiConfig: BorderRadiiConfig;
+export declare const defaultThemeVariantsConfig: ThemeVariantsConfig;

package/dist/skins/defaults.js

@@ -14,6 +14,9 @@ _export(exports, {
     },
     defaultTextPresetsConfig: function() {
         return e;
+    },
+    defaultThemeVariantsConfig: function() {
+        return t;
     }
 });
 const e = {
@@ -178,4 +181,7 @@ const e = {
     bar: "999px",
     avatar: "50%",
     mediaSmall: "8px"
+}, t = {
+    brandLoadingScreen: "inverse",
+    successFeedback: "inverse"
 };

package/dist/skins/esimflag.js

@@ -127,6 +127,8 @@ const e = {
             textActivated: e.blue,
             textBrand: e.blue,
             inputBorder: e.grey4,
+            completedStep: e.blue,
+            completedStepInverse: e.blue80,
             control: e.grey4,
             controlActivated: e.blue,
             controlInverse: e.blue20,
@@ -278,6 +280,8 @@ const e = {
             textActivated: e.blue30,
             textBrand: e.blue30,
             inputBorder: e.grey4,
+            completedStep: e.blue,
+            completedStepInverse: e.blue,
             control: e.grey4,
             controlActivated: e.blue,
             controlInverse: e.grey4,
@@ -529,5 +533,9 @@ const e = {
                 },
                 weight: "bold"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });

package/dist/skins/movistar.js

@@ -139,6 +139,8 @@ const e = {
             textActivated: e.movistarBlueHC,
             textBrand: e.movistarBlueHC,
             inputBorder: e.grey4,
+            completedStep: e.movistarBlueHC,
+            completedStepInverse: e.movistarBlue55,
             control: e.grey4,
             controlActivated: e.movistarBlue,
             controlInverse: e.movistarBlue20,
@@ -290,6 +292,8 @@ const e = {
             textActivated: e.movistarBlue,
             textBrand: e.movistarBlue,
             inputBorder: e.darkModeGrey4,
+            completedStep: e.movistarBlueHC,
+            completedStepInverse: e.movistarBlueHC,
             control: e.darkModeGrey4,
             controlActivated: e.movistarBlue,
             controlInverse: e.darkModeGrey4,

package/dist/skins/o2-new.js

@@ -130,6 +130,8 @@ const e = {
             textActivated: e.beyondBlue,
             textBrand: e.beyondBlue,
             inputBorder: e.grey45,
+            completedStep: e.beyondBlue,
+            completedStepInverse: e.beyondBlue70,
             control: e.grey45,
             controlActivated: e.beyondBlue,
             controlInverse: e.white,
@@ -281,6 +283,8 @@ const e = {
             textActivated: e.beyondBlue30,
             textBrand: e.beyondBlue30,
             inputBorder: e.grey45,
+            completedStep: e.darkModeBeyondBlue,
+            completedStepInverse: e.darkModeBeyondBlue,
             control: e.grey45,
             controlActivated: e.darkModeBeyondBlue,
             controlInverse: e.grey45,
@@ -532,5 +536,9 @@ const e = {
                 },
                 weight: "bold"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });

package/dist/skins/o2.js

@@ -126,6 +126,8 @@ const e = {
             textActivated: e.o2BluePrimary,
             textBrand: e.o2BluePrimary,
             inputBorder: e.grey3,
+            completedStep: e.o2BluePrimary,
+            completedStepInverse: e.o2BluePrimary70,
             control: e.grey3,
             controlActivated: e.o2BluePrimary,
             controlInverse: e.o2BluePrimary30,
@@ -277,6 +279,8 @@ const e = {
             textActivated: e.o2BluePrimary30,
             textBrand: e.o2BluePrimary30,
             inputBorder: e.darkModeGrey6,
+            completedStep: e.darkModeO2BluePrimary,
+            completedStepInverse: e.darkModeO2BluePrimary,
             control: e.darkModeGrey6,
             controlActivated: e.o2BluePrimary30,
             controlInverse: e.darkModeGrey6,
@@ -528,5 +532,9 @@ const e = {
                 },
                 weight: "light"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });