@telefonica/mistica 14.46.0 → 14.47.0

package/dist/skins/telefonica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     getTelefonicaSkin: function() {
-        return i;
+        return c;
     },
     palette: function() {
         return e;
@@ -54,7 +54,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, i = ()=>({
+}, c = ()=>({
         name: _constants.TELEFONICA_SKIN,
         colors: {
             appBarBackground: e.white,
@@ -74,7 +74,8 @@ const e = {
             backgroundSkeletonInverse: e.telefonicaBlue70,
             navigationBarBackground: e.telefonicaBlue,
             backgroundAlternative: e.grey1,
-            backgroundFeedbackBottom: e.telefonicaBlue,
+            backgroundBrandTop: e.telefonicaBlue,
+            backgroundBrandBottom: e.telefonicaBlue,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey2,
@@ -116,7 +117,7 @@ const e = {
             textLinkSnackbar: e.telefonicaBlue30,
             control: e.grey3,
             controlActivated: e.telefonicaBlue,
-            controlInverse: e.white,
+            controlInverse: e.grey1,
             controlActivatedInverse: e.white,
             controlError: e.coral,
             barTrack: e.grey3,
@@ -167,7 +168,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.telefonicaBlue,
-            customTabsBackground: e.telefonicaBlue
+            customTabsBackground: e.telefonicaBlue,
+            tagTextPromo: e.orchid70,
+            tagTextActive: e.telefonicaBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.turquoise70,
+            tagTextWarning: e.ambar70,
+            tagTextError: e.coral70,
+            tagBackgroundPromo: e.orchid10,
+            tagBackgroundActive: e.telefonicaBlue10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.turquoise10,
+            tagBackgroundWarning: e.ambar10,
+            tagBackgroundError: e.coral10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -185,7 +198,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey6,
             backgroundSkeletonInverse: e.grey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -280,7 +294,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.orchid40,
+            tagTextActive: e.telefonicaBlue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.turquoise40,
+            tagTextWarning: e.ambar40,
+            tagTextError: e.coral40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",

package/dist/skins/tu.d.ts

@@ -22,10 +22,6 @@ export declare const palette: {
     red55: string;
     red70: string;
     red80: string;
-    purple: string;
-    purple10: string;
-    purple40: string;
-    purple70: string;
     green: string;
     green10: string;
     green40: string;

package/dist/skins/tu.js

@@ -41,10 +41,6 @@ const e = {
     red55: "#BB4736",
     red70: "#8E3629",
     red80: "#5B231A",
-    purple: "#7274E7",
-    purple10: "#F1F1FD",
-    purple40: "#9C9EEE",
-    purple70: "#5051A2",
     green: "#00D19D",
     green10: "#E5FAF5",
     green40: "#A1DFCF",
@@ -82,7 +78,8 @@ const e = {
             backgroundSkeletonInverse: e.primary65,
             navigationBarBackground: e.primary,
             backgroundAlternative: e.grey1,
-            backgroundFeedbackBottom: e.primary,
+            backgroundBrandTop: e.primary,
+            backgroundBrandBottom: e.primary,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey2,
@@ -135,13 +132,12 @@ const e = {
             iosControlKnob: e.white,
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
-            navigationBarDivider: e.grey2,
+            navigationBarDivider: e.primary,
             badge: e.blue,
             feedbackErrorBackground: e.red,
             feedbackInfoBackground: e.primary,
             brand: e.blue,
             brandHigh: e.blue70,
-            brandLow: e.blue10,
             inverse: e.white,
             neutralHigh: e.grey9,
             neutralMedium: e.grey5,
@@ -161,6 +157,7 @@ const e = {
             warningLow: e.orange20,
             errorLow: e.red10,
             promoLow: e.blue10,
+            brandLow: e.blue10,
             successHigh: e.green75,
             warningHigh: e.orange70,
             errorHigh: e.red70,
@@ -175,7 +172,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey6,
             textAppBarSelected: e.primary,
-            customTabsBackground: e.white
+            customTabsBackground: e.white,
+            tagTextPromo: e.blue,
+            tagTextActive: e.blue,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.green75,
+            tagTextWarning: e.orange70,
+            tagTextError: e.red70,
+            tagBackgroundPromo: e.blue10,
+            tagBackgroundActive: e.blue10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.green10,
+            tagBackgroundWarning: e.orange20,
+            tagBackgroundError: e.red10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -193,7 +202,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -206,13 +216,16 @@ const e = {
             buttonDangerBackground: e.red,
             buttonDangerBackgroundSelected: e.red80,
             buttonDangerBackgroundHover: e.red80,
+            buttonLinkDangerBackgroundSelected: e.red10,
+            buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundInverseSelected: e.red10,
             buttonLinkBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.grey2,
             buttonPrimaryBackgroundInverse: e.grey2,
             buttonPrimaryBackgroundSelected: e.grey3,
             buttonPrimaryBackgroundHover: e.grey3,
-            buttonPrimaryBackgroundInverseSelected: e.blue70,
+            buttonPrimaryBackgroundInverseSelected: e.grey3,
             buttonSecondaryBackgroundSelected: (0, _color.applyAlpha)(e.grey2, 0.15),
             buttonSecondaryBorder: e.grey2,
             buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.grey2, 0.15),
@@ -237,8 +250,9 @@ const e = {
             controlInverse: e.darkModeGrey6,
             controlActivatedInverse: e.blue30,
             controlError: e.red,
-            loadingBar: e.blue,
-            loadingBarBackground: e.blue20,
+            barTrack: e.darkModeGrey6,
+            loadingBar: e.green40,
+            loadingBarBackground: e.green,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.blue20,
             iosControlKnob: e.grey2,
@@ -284,7 +298,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.blue30,
+            tagTextActive: e.blue30,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.green40,
+            tagTextWarning: e.orange55,
+            tagTextError: e.red40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",

package/dist/skins/types/colors.d.ts

@@ -1,8 +1,6 @@
 export type Colors = {
+    appBarBackground: string;
     background: string;
-    backgroundAlternative: string;
-    backgroundBrand: string;
-    backgroundBrandSecondary: string;
     backgroundContainer: string;
     backgroundContainerHover: string;
     backgroundContainerPressed: string;
@@ -11,12 +9,15 @@ export type Colors = {
     backgroundContainerBrandPressed: string;
     backgroundContainerBrandOverInverse: string;
     backgroundContainerAlternative: string;
+    backgroundBrand: string;
+    backgroundBrandSecondary: string;
     backgroundOverlay: string;
     backgroundSkeleton: string;
     backgroundSkeletonInverse: string;
-    backgroundFeedbackBottom: string;
-    appBarBackground: string;
     navigationBarBackground: string;
+    backgroundAlternative: string;
+    backgroundBrandTop: string;
+    backgroundBrandBottom: string;
     skeletonWave: string;
     borderLow: string;
     border: string;
@@ -85,9 +86,9 @@ export type Colors = {
     textPrimaryInverse: string;
     textSecondary: string;
     textSecondaryInverse: string;
+    error: string;
     success: string;
     warning: string;
-    error: string;
     promo: string;
     highlight: string;
     successLow: string;
@@ -110,4 +111,16 @@ export type Colors = {
     textAppBar: string;
     textAppBarSelected: string;
     customTabsBackground: string;
+    tagTextPromo: string;
+    tagTextActive: string;
+    tagTextInactive: string;
+    tagTextSuccess: string;
+    tagTextWarning: string;
+    tagTextError: string;
+    tagBackgroundPromo: string;
+    tagBackgroundActive: string;
+    tagBackgroundInactive: string;
+    tagBackgroundSuccess: string;
+    tagBackgroundWarning: string;
+    tagBackgroundError: string;
 };

package/dist/skins/vivo-new.js

@@ -72,7 +72,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.grey6, 0.6),
             backgroundSkeleton: e.grey4,
             backgroundSkeletonInverse: e.vivoPurpleDark,
-            backgroundFeedbackBottom: e.vivoPurple,
+            backgroundBrandTop: e.vivoPurple,
+            backgroundBrandBottom: e.vivoPurple,
             appBarBackground: e.white,
             navigationBarBackground: e.vivoPurple,
             skeletonWave: e.grey2,
@@ -116,7 +117,7 @@ const e = {
             textLinkSnackbar: e.vivoPurpleLight20,
             control: e.grey4,
             controlActivated: e.vivoPurple,
-            controlInverse: e.white,
+            controlInverse: e.vivoPurpleLight50,
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
@@ -167,7 +168,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.vivoPurple,
-            customTabsBackground: e.white
+            customTabsBackground: e.white,
+            tagTextPromo: e.vivoPurple,
+            tagTextActive: e.vivoPurple,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.vivoGreenDark,
+            tagTextWarning: e.orangeDark,
+            tagTextError: e.pepperDark80,
+            tagBackgroundPromo: e.vivoPurpleLight10,
+            tagBackgroundActive: e.vivoPurpleLight10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.vivoGreenLight10,
+            tagBackgroundWarning: e.orangeLight10,
+            tagBackgroundError: e.pepperLight10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -185,7 +198,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -280,7 +294,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.vivoPurpleLight50,
+            tagTextActive: e.vivoPurpleLight80,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.vivoGreenLight30,
+            tagTextWarning: e.orangeLight40,
+            tagTextError: e.pepperLight40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",

package/dist/skins/vivo.js

@@ -72,7 +72,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.vivoPurpleDark,
-            backgroundFeedbackBottom: e.vivoPurple,
+            backgroundBrandTop: e.vivoPurple,
+            backgroundBrandBottom: e.vivoPurple,
             appBarBackground: e.white,
             navigationBarBackground: e.vivoPurple,
             skeletonWave: e.grey2,
@@ -116,7 +117,7 @@ const e = {
             textLinkSnackbar: e.vivoPurpleLight50,
             control: e.grey3,
             controlActivated: e.vivoPurple,
-            controlInverse: e.white,
+            controlInverse: e.vivoPurpleLight50,
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
@@ -167,7 +168,19 @@ const e = {
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
             textAppBarSelected: e.vivoPurple,
-            customTabsBackground: e.vivoPurple
+            customTabsBackground: e.vivoPurple,
+            tagTextPromo: e.vivoPurple,
+            tagTextActive: e.vivoPurple,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.vivoGreenDark,
+            tagTextWarning: e.orangeDark,
+            tagTextError: e.pepperDark80,
+            tagBackgroundPromo: e.vivoPurpleLight10,
+            tagBackgroundActive: e.vivoPurpleLight10,
+            tagBackgroundInactive: e.grey2,
+            tagBackgroundSuccess: e.vivoGreenLight10,
+            tagBackgroundWarning: e.orangeLight10,
+            tagBackgroundError: e.pepperLight10
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -185,7 +198,8 @@ const e = {
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
-            backgroundFeedbackBottom: e.darkModeBlack,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
@@ -280,7 +294,19 @@ const e = {
             textNavigationSearchBarText: e.grey2,
             textAppBar: e.grey5,
             textAppBarSelected: e.grey2,
-            customTabsBackground: e.darkModeBlack
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.vivoPurpleLight50,
+            tagTextActive: e.vivoPurpleLight80,
+            tagTextInactive: e.grey5,
+            tagTextSuccess: e.vivoGreenLight30,
+            tagTextWarning: e.orangeLight40,
+            tagTextError: e.pepperLight40,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6
         },
         borderRadii: {
             avatar: "50%",

package/dist/slider.css-mistica.js

@@ -13,13 +13,13 @@ _export(exports, {
         return n;
     },
     defaultThumb: function() {
-        return f;
+        return h;
     },
     disabled: function() {
-        return y;
+        return f;
     },
     input: function() {
-        return h;
+        return y;
     },
     iosThumb: function() {
         return r;
@@ -28,7 +28,7 @@ _export(exports, {
         return a;
     },
     thumbContainer: function() {
-        return j;
+        return k;
     },
     thumbHover: function() {
         return t;
@@ -39,4 +39,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./slider.css.ts.vanilla.css-mistica.js");
-var n = "_1j1wlhk1 _1y2v1nfh5 _1y2v1nfgc _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", f = "_1j1wlhk7 _1y2v1nfhd _1y2v1nfht _1y2v1nfj1 _1y2v1nf4e", y = "_1j1wlhk2", h = "_1j1wlhkd _1y2v1nfgd _1y2v1nfjp", r = "_1j1wlhk9 _1y2v1nf4n _1y2v1nfj1", a = "_1j1wlhkb", j = "_1j1wlhk5 _1y2v1nfgd _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr", t = "_1j1wlhka", i = "_1y2v1nfh5 _1y2v1nfhp _1y2v1nfjf";
+var n = "_1j1wlhk1 _1y2v1nfhv _1y2v1nfh2 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfk8", h = "_1j1wlhk7 _1y2v1nfi3 _1y2v1nfij _1y2v1nfjr _1y2v1nf4s", f = "_1j1wlhk2", y = "_1j1wlhkd _1y2v1nfh3 _1y2v1nfkf", r = "_1j1wlhk9 _1y2v1nf51 _1y2v1nfjr", a = "_1j1wlhkb", k = "_1j1wlhk5 _1y2v1nfh3 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh", t = "_1j1wlhka", i = "_1y2v1nfhv _1y2v1nfif _1y2v1nfk5";

package/dist/snackbar.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     TRANSITION_TIME_IN_MS: function() {
-        return r;
+        return _;
     },
     button: function() {
-        return _;
+        return r;
     },
     content: function() {
         return f;
@@ -22,33 +22,33 @@ _export(exports, {
         return y;
     },
     dismissIcon: function() {
-        return a;
+        return h;
     },
     longButton: function() {
-        return b;
+        return a;
     },
     snackbar: function() {
-        return o;
+        return b;
     },
     snackbarOpen: function() {
-        return g;
+        return o;
     },
     wrapper: function() {
         return t;
     },
     wrapperCritical: function() {
-        return i;
+        return p;
     },
     wrapperInfo: function() {
-        return p;
+        return e;
     },
     wrapperOpen: function() {
-        return e;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var r = 300, _ = "o7bjb0a", f = "_1y2v1nfgi _1y2v1nfgu", y = {
-    centered: "o7bjb0e _1y2v1nfgi _1y2v1nfgd _1y2v1nfgx _1y2v1nfgr _1y2v1nfkm",
-    topRight: "_1y2v1nfgi _1y2v1nfgd _1y2v1nfgx _1y2v1nfgr _1y2v1nfkm _1y2v1nfjs"
-}, a = "o7bjb0h _1y2v1nfhf _1y2v1nfhv _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfj1", b = "o7bjb0b", o = "o7bjb01 _1y2v1nfh5 _1y2v1nfgi _1y2v1nfgr", g = "o7bjb02", t = "o7bjb04 _1y2v1nfge _1y2v1nfjb", i = "_1y2v1nf4s", p = "_1y2v1nf4t", e = "o7bjb07";
+var _ = 300, r = "o7bjb0a", f = "_1y2v1nfh8 _1y2v1nfhk", y = {
+    centered: "o7bjb0e _1y2v1nfh8 _1y2v1nfh3 _1y2v1nfhn _1y2v1nfhh _1y2v1nflc",
+    topRight: "_1y2v1nfh8 _1y2v1nfh3 _1y2v1nfhn _1y2v1nfhh _1y2v1nflc _1y2v1nfki"
+}, h = "o7bjb0h _1y2v1nfi5 _1y2v1nfil _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh _1y2v1nfjr", a = "o7bjb0b", b = "o7bjb01 _1y2v1nfhv _1y2v1nfh8 _1y2v1nfhh", o = "o7bjb02", t = "o7bjb04 _1y2v1nfh4 _1y2v1nfk1", p = "_1y2v1nf56", e = "_1y2v1nf57", i = "o7bjb07";

package/dist/spinner.css-mistica.js

@@ -10,18 +10,18 @@ function _export(target, all) {
 }
 _export(exports, {
     spinnerDefault: function() {
-        return t;
+        return a;
     },
     spinnerDefaultPath: function() {
-        return f;
+        return t;
     },
     spinnerIos: function() {
-        return v;
+        return f;
     },
     spinnerIosSvgPath: function() {
-        return a;
+        return h;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./spinner.css.ts.vanilla.css-mistica.js");
-var t = "_1fthc594 _1y2v1nfh0 _1y2v1nfgk", f = "_1fthc595", v = "_1y2v1nfh0 _1y2v1nfgk", a = "_1fthc597";
+var a = "_1fthc594 _1y2v1nfhq _1y2v1nfha", t = "_1fthc595", f = "_1y2v1nfhq _1y2v1nfha", h = "_1fthc597";