@telefonica/mistica 16.26.0 → 16.28.0

package/dist-es/skeletons.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./skeletons.css.ts.vanilla.css-mistica.js";
-var n = "v16_26_zopolw6 v16_26_1y2v1nfio", r = {
-    default: "v16_26_1y2v1nf4l",
-    inverse: "v16_26_1y2v1nf4m"
-}, o = "v16_26_1y2v1nfj4 v16_26_1y2v1nfj6", a = "v16_26_zopolwa v16_26_1y2v1nfj5", f = "v16_26_1y2v1nfim v16_26_1y2v1nfj1 v16_26_1y2v1nfiv";
-export { n as animation, r as background, o as circle, a as line, f as row };
+var n = "v16_28_zopolw6 v16_28_1y2v1nfiu", r = {
+    default: "v16_28_1y2v1nf4o",
+    inverse: "v16_28_1y2v1nf4p"
+}, a = "v16_28_1y2v1nfja v16_28_1y2v1nfjc", o = "v16_28_zopolwa v16_28_1y2v1nfjb", f = "v16_28_1y2v1nfis v16_28_1y2v1nfj7 v16_28_1y2v1nfj1";
+export { n as animation, r as background, a as circle, o as line, f as row };

package/dist-es/skins/blau.js

@@ -17,55 +17,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: a,
         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: r(e.blauBlueSecondary, 0.05),
             backgroundContainerPressed: r(e.blauBlueSecondary, 0.08),
-            backgroundContainerBrand: e.blauBluePrimary,
+            backgroundContainerBrand: e.blauBlueSecondary,
             backgroundContainerBrandHover: r(e.darkModeBlack, 0.2),
             backgroundContainerBrandPressed: r(e.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: e.blauBlueSecondary,
+            backgroundContainerBrandOverInverse: e.blauBlueSecondary60,
             backgroundContainerAlternative: e.blauBluePrimary20,
             backgroundOverlay: r(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: r(e.darkModeBlack, 0.25),
             coverBackgroundPressed: r(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.blauRed,
@@ -101,29 +105,30 @@ const e = {
             textLinkDanger: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
             textActivated: e.blauBlueSecondary,
-            textBrand: e.blauBluePrimary,
-            inputBorder: e.grey5,
-            control: e.grey5,
+            textBrand: e.blauBlueSecondary,
+            inputBorder: e.grey4,
+            inputBorderInverse: e.white,
+            control: e.grey4,
             controlActivated: e.blauBlueSecondary,
             controlInverse: e.blauBluePrimary30,
             controlActivatedInverse: e.white,
             controlError: e.blauRed,
-            barTrack: e.grey2,
+            barTrack: e.grey3,
             barTrackInverse: r(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: r(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,
@@ -137,15 +142,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,
@@ -154,38 +159,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,
@@ -217,18 +222,20 @@ const e = {
             border: e.darkModeGrey,
             borderHigh: e.grey5,
             borderSelected: e.blauBlueSecondary60,
+            completedStep: e.blauBlueSecondary,
+            completedStepInverse: e.blauBlueSecondary,
             coverBackgroundHover: r(e.darkModeBlack, 0.25),
             coverBackgroundPressed: r(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundPressed: e.blauRed70,
             buttonDangerBackgroundHover: e.blauRed70,
-            buttonLinkDangerBackgroundPressed: r(e.blauPurple, 0.3),
+            buttonLinkDangerBackgroundPressed: r(e.blauRed, 0.3),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
             buttonLinkDangerBackgroundInversePressed: r(e.blauPurple, 0.3),
             buttonLinkBackgroundPressed: r(e.blauPurple, 0.3),
             buttonLinkBackgroundInversePressed: r(e.blauPurple, 0.3),
             buttonPrimaryBackground: e.blauBlueSecondary,
-            buttonPrimaryBackgroundInverse: e.blauBluePrimary,
+            buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
             buttonPrimaryBackgroundHover: e.blauBlueSecondary60,
             buttonPrimaryBackgroundInversePressed: e.blauBlueSecondary60,
@@ -249,25 +256,26 @@ 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,
+            inputBorderInverse: 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: r(e.white, 0.05),
+            divider: r(e.white, 0.09),
             dividerInverse: r(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
             badge: e.blauRed,
@@ -277,8 +285,8 @@ const e = {
             brandHigh: r(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,
@@ -286,8 +294,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,
@@ -314,7 +322,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,
@@ -328,7 +336,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,
@@ -505,6 +513,10 @@ const e = {
                 },
                 weight: "light"
             }
+        },
+        themeVariants: {
+            successFeedback: "default",
+            brandLoadingScreen: "default"
         }
     });
 export { d as getBlauSkin, e as palette };

package/dist-es/skins/defaults.js

@@ -160,5 +160,8 @@ const e = {
     bar: "999px",
     avatar: "50%",
     mediaSmall: "8px"
+}, t = {
+    brandLoadingScreen: "inverse",
+    successFeedback: "inverse"
 };
-export { i as defaultBorderRadiiConfig, e as defaultTextPresetsConfig };
+export { i as defaultBorderRadiiConfig, e as defaultTextPresetsConfig, t as defaultThemeVariantsConfig };

package/dist-es/skins/esimflag.js

@@ -109,6 +109,9 @@ const e = {
             textActivated: e.blue,
             textBrand: e.blue,
             inputBorder: e.grey4,
+            inputBorderInverse: e.white,
+            completedStep: e.blue,
+            completedStepInverse: e.blue80,
             control: e.grey4,
             controlActivated: e.blue,
             controlInverse: e.blue20,
@@ -260,6 +263,9 @@ const e = {
             textActivated: e.blue30,
             textBrand: e.blue30,
             inputBorder: e.grey4,
+            inputBorderInverse: e.grey4,
+            completedStep: e.blue,
+            completedStepInverse: e.blue,
             control: e.grey4,
             controlActivated: e.blue,
             controlInverse: e.grey4,
@@ -511,6 +517,10 @@ const e = {
                 },
                 weight: "bold"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });
 export { d as getEsimflagSkin, e as palette };

package/dist-es/skins/movistar.js

@@ -121,6 +121,9 @@ const e = {
             textActivated: e.movistarBlueHC,
             textBrand: e.movistarBlueHC,
             inputBorder: e.grey4,
+            inputBorderInverse: e.white,
+            completedStep: e.movistarBlueHC,
+            completedStepInverse: e.movistarBlue55,
             control: e.grey4,
             controlActivated: e.movistarBlue,
             controlInverse: e.movistarBlue20,
@@ -272,6 +275,9 @@ const e = {
             textActivated: e.movistarBlue,
             textBrand: e.movistarBlue,
             inputBorder: e.darkModeGrey4,
+            inputBorderInverse: e.darkModeGrey4,
+            completedStep: e.movistarBlueHC,
+            completedStepInverse: e.movistarBlueHC,
             control: e.darkModeGrey4,
             controlActivated: e.movistarBlue,
             controlInverse: e.darkModeGrey4,
@@ -523,6 +529,10 @@ const e = {
                 },
                 weight: "bold"
             }
+        },
+        themeVariants: {
+            successFeedback: "default",
+            brandLoadingScreen: "default"
         }
     });
 export { d as getMovistarSkin, e as palette };

package/dist-es/skins/o2-new.js

@@ -112,6 +112,9 @@ const e = {
             textActivated: e.beyondBlue,
             textBrand: e.beyondBlue,
             inputBorder: e.grey45,
+            inputBorderInverse: e.white,
+            completedStep: e.beyondBlue,
+            completedStepInverse: e.beyondBlue70,
             control: e.grey45,
             controlActivated: e.beyondBlue,
             controlInverse: e.white,
@@ -263,6 +266,9 @@ const e = {
             textActivated: e.beyondBlue30,
             textBrand: e.beyondBlue30,
             inputBorder: e.grey45,
+            inputBorderInverse: e.grey45,
+            completedStep: e.darkModeBeyondBlue,
+            completedStepInverse: e.darkModeBeyondBlue,
             control: e.grey45,
             controlActivated: e.darkModeBeyondBlue,
             controlInverse: e.grey45,
@@ -514,6 +520,10 @@ const e = {
                 },
                 weight: "bold"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });
 export { a as getO2NewSkin, e as palette };

package/dist-es/skins/o2.js

@@ -108,6 +108,9 @@ const e = {
             textActivated: e.o2BluePrimary,
             textBrand: e.o2BluePrimary,
             inputBorder: e.grey3,
+            inputBorderInverse: e.white,
+            completedStep: e.o2BluePrimary,
+            completedStepInverse: e.o2BluePrimary70,
             control: e.grey3,
             controlActivated: e.o2BluePrimary,
             controlInverse: e.o2BluePrimary30,
@@ -259,6 +262,9 @@ const e = {
             textActivated: e.o2BluePrimary30,
             textBrand: e.o2BluePrimary30,
             inputBorder: e.darkModeGrey6,
+            inputBorderInverse: e.darkModeGrey6,
+            completedStep: e.darkModeO2BluePrimary,
+            completedStepInverse: e.darkModeO2BluePrimary,
             control: e.darkModeGrey6,
             controlActivated: e.o2BluePrimary30,
             controlInverse: e.darkModeGrey6,
@@ -510,6 +516,10 @@ const e = {
                 },
                 weight: "light"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });
 export { d as getO2Skin, e as palette };