@telefonica/mistica 14.9.0 → 14.11.0

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

@@ -1,23 +1,29 @@
 export type Colors = {
-    appBarBackground: string;
     background: string;
+    backgroundAlternative: string;
+    backgroundBrand: string;
+    backgroundBrandSecondary: string;
     backgroundContainer: string;
+    backgroundContainerHover: string;
+    backgroundContainerPressed: string;
     backgroundContainerBrand: string;
+    backgroundContainerBrandHover: string;
+    backgroundContainerBrandPressed: string;
     backgroundContainerBrandOverInverse: string;
     backgroundContainerAlternative: string;
-    backgroundBrand: string;
-    backgroundBrandSecondary: string;
     backgroundOverlay: string;
     backgroundSkeleton: string;
     backgroundSkeletonInverse: string;
-    backgroundAlternative: string;
     backgroundFeedbackBottom: string;
+    appBarBackground: string;
     navigationBarBackground: string;
     skeletonWave: string;
-    border: string;
     borderLow: string;
+    border: string;
     borderHigh: string;
     borderSelected: string;
+    coverBackgroundHover: string;
+    coverBackgroundPressed: string;
     buttonDangerBackground: string;
     buttonDangerBackgroundSelected: string;
     buttonDangerBackgroundHover: string;
@@ -26,16 +32,27 @@ export type Colors = {
     buttonPrimaryBackground: string;
     buttonPrimaryBackgroundInverse: string;
     buttonPrimaryBackgroundSelected: string;
-    buttonPrimaryBackgroundInverseSelected: string;
     buttonPrimaryBackgroundHover: string;
+    buttonPrimaryBackgroundInverseSelected: string;
     buttonSecondaryBorder: string;
     buttonSecondaryBorderSelected: string;
-    buttonSecondaryBorderInverse: string;
-    buttonSecondaryBorderInverseSelected: string;
     buttonSecondaryBackgroundHover: string;
     buttonSecondaryBackgroundSelected: string;
+    buttonSecondaryBorderInverse: string;
+    buttonSecondaryBorderInverseSelected: string;
     buttonSecondaryBackgroundInverseHover: string;
     buttonSecondaryBackgroundInverseSelected: string;
+    textButtonPrimary: string;
+    textButtonPrimaryInverse: string;
+    textButtonPrimaryInverseSelected: string;
+    textButtonSecondary: string;
+    textButtonSecondarySelected: string;
+    textButtonSecondaryInverse: string;
+    textButtonSecondaryInverseSelected: string;
+    textLink: string;
+    textLinkInverse: string;
+    textLinkDanger: string;
+    textLinkSnackbar: string;
     control: string;
     controlActivated: string;
     controlError: string;
@@ -54,36 +71,19 @@ export type Colors = {
     brandHigh: string;
     inverse: string;
     neutralHigh: string;
-    neutralLow: string;
-    neutralLowAlternative: string;
     neutralMedium: string;
     neutralMediumInverse: string;
-    promo: string;
-    error: string;
-    highlight: string;
-    success: string;
-    warning: string;
+    neutralLow: string;
+    neutralLowAlternative: string;
     textPrimary: string;
     textPrimaryInverse: string;
     textSecondary: string;
     textSecondaryInverse: string;
-    textButtonPrimary: string;
-    textButtonPrimaryInverse: string;
-    textButtonPrimaryInverseSelected: string;
-    textButtonSecondary: string;
-    textButtonSecondarySelected: string;
-    textButtonSecondaryInverse: string;
-    textButtonSecondaryInverseSelected: string;
-    textLink: string;
-    textLinkInverse: string;
-    textLinkDanger: string;
-    textLinkSnackbar: string;
-    textNavigationBarPrimary: string;
-    textNavigationBarSecondary: string;
-    textNavigationSearchBarHint: string;
-    textNavigationSearchBarText: string;
-    textAppBar: string;
-    textAppBarSelected: string;
+    success: string;
+    warning: string;
+    error: string;
+    promo: string;
+    highlight: string;
     successLow: string;
     warningLow: string;
     errorLow: string;
@@ -97,4 +97,11 @@ export type Colors = {
     warningHighInverse: string;
     errorHighInverse: string;
     promoHighInverse: string;
+    textNavigationBarPrimary: string;
+    textNavigationBarSecondary: string;
+    textNavigationSearchBarHint: string;
+    textNavigationSearchBarText: string;
+    textAppBar: string;
+    textAppBarSelected: string;
+    customTabsBackground: string;
 };

package/dist/skins/vivo.d.ts

@@ -1,37 +1,39 @@
 import type { GetKnownSkin } from './types';
 export declare const palette: {
-    readonly vivoPurple: "#660099";
-    readonly vivoPurpleDark: "#461E5F";
-    readonly vivoPurpleLight90: "#751AA3";
-    readonly vivoPurpleLight80: "#8433AD";
-    readonly vivoPurpleLight50: "#B280CC";
-    readonly vivoPurpleLight20: "#E0CCEB";
-    readonly vivoPurpleLight10: "#EFE5F4";
-    readonly vivoGreen: "#99CC33";
-    readonly vivoGreenDark: "#225C3D";
-    readonly vivoGreenLight30: "#91AE9E";
-    readonly vivoGreenLight10: "#EDF8E8";
-    readonly vivoBlue: "#00ABDB";
-    readonly orange: "#FF9900";
-    readonly orangeDark: "#972A1D";
-    readonly orangeLight10: "#FFEFE1";
-    readonly orangeLight40: "#FFB84C";
-    readonly pink: "#EB3D7D";
-    readonly pepper: "#CC1F59";
-    readonly pepperDark: "#B71D63";
-    readonly pepperDark80: "#8F2052";
-    readonly pepperLight40: "#DB628B";
-    readonly pepperLight30: "#F7B1CB";
-    readonly pepperLight10: "#FCE4EF";
-    readonly grey1: "#F6F6F6";
-    readonly grey2: "#EEEEEE";
-    readonly grey3: "#DDDDDD";
-    readonly grey4: "#999999";
-    readonly grey5: "#666666";
-    readonly grey6: "#000000";
-    readonly white: "#FFFFFF";
-    readonly darkModeBlack: "#191919";
-    readonly darkModeGrey: "#242424";
-    readonly darkModeGrey6: "#313235";
+    vivoPurple: string;
+    vivoPurpleDark: string;
+    vivoPurpleLight10: string;
+    vivoPurpleLight20: string;
+    vivoPurpleLight50: string;
+    vivoPurpleLight80: string;
+    vivoPurpleLight90: string;
+    vivoGreen: string;
+    vivoGreenDark: string;
+    vivoGreenLight10: string;
+    vivoGreen25: string;
+    vivoGreenLight30: string;
+    vivoBlue: string;
+    orange: string;
+    orange25: string;
+    orangeDark: string;
+    orangeLight10: string;
+    orangeLight40: string;
+    pink: string;
+    pepper: string;
+    pepperDark: string;
+    pepperDark80: string;
+    pepperLight10: string;
+    pepperLight30: string;
+    pepperLight40: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    grey5: string;
+    grey6: string;
+    white: string;
+    darkModeBlack: string;
+    darkModeGrey: string;
+    darkModeGrey6: string;
 };
 export declare const getVivoSkin: GetKnownSkin;

package/dist/skins/vivo.js

@@ -9,25 +9,27 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getVivoSkin: ()=>a,
+    getVivoSkin: ()=>i,
     palette: ()=>e
 });
-const _colorJs = require("../utils/color.js");
 const _constantsJs = require("./constants.js");
+const _colorJs = require("../utils/color.js");
 const e = {
     vivoPurple: "#660099",
     vivoPurpleDark: "#461E5F",
-    vivoPurpleLight90: "#751AA3",
-    vivoPurpleLight80: "#8433AD",
-    vivoPurpleLight50: "#B280CC",
-    vivoPurpleLight20: "#E0CCEB",
     vivoPurpleLight10: "#EFE5F4",
+    vivoPurpleLight20: "#E0CCEB",
+    vivoPurpleLight50: "#B280CC",
+    vivoPurpleLight80: "#8433AD",
+    vivoPurpleLight90: "#751AA3",
     vivoGreen: "#99CC33",
     vivoGreenDark: "#225C3D",
-    vivoGreenLight30: "#91AE9E",
     vivoGreenLight10: "#EDF8E8",
+    vivoGreen25: "#D6EBAD",
+    vivoGreenLight30: "#91AE9E",
     vivoBlue: "#00ABDB",
     orange: "#FF9900",
+    orange25: "#FFD699",
     orangeDark: "#972A1D",
     orangeLight10: "#FFEFE1",
     orangeLight40: "#FFB84C",
@@ -35,9 +37,9 @@ const e = {
     pepper: "#CC1F59",
     pepperDark: "#B71D63",
     pepperDark80: "#8F2052",
-    pepperLight40: "#DB628B",
-    pepperLight30: "#F7B1CB",
     pepperLight10: "#FCE4EF",
+    pepperLight30: "#F7B1CB",
+    pepperLight40: "#DB628B",
     grey1: "#F6F6F6",
     grey2: "#EEEEEE",
     grey3: "#DDDDDD",
@@ -48,33 +50,39 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, a = ()=>({
+}, i = ()=>({
         name: _constantsJs.VIVO_SKIN,
         colors: {
-            appBarBackground: e.white,
             background: e.white,
+            backgroundAlternative: e.grey1,
+            backgroundBrand: e.vivoPurple,
+            backgroundBrandSecondary: e.vivoPurple,
             backgroundContainer: e.white,
-            backgroundContainerAlternative: e.grey1,
+            backgroundContainerHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.03),
+            backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.05),
             backgroundContainerBrand: e.vivoPurple,
+            backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverInverse: e.vivoPurpleDark,
-            backgroundBrand: e.vivoPurple,
-            backgroundBrandSecondary: e.vivoPurple,
+            backgroundContainerAlternative: e.grey1,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.vivoPurpleDark,
             backgroundFeedbackBottom: e.vivoPurple,
+            appBarBackground: e.white,
             navigationBarBackground: e.vivoPurple,
-            backgroundAlternative: e.grey1,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
             borderHigh: e.grey5,
             borderSelected: e.vivoPurple,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepperDark,
             buttonDangerBackgroundHover: e.pepperDark,
             buttonLinkBackgroundSelected: e.vivoPurpleLight10,
-            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.2),
+            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.1),
             buttonPrimaryBackground: e.vivoPurple,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundSelected: e.vivoPurpleDark,
@@ -82,10 +90,10 @@ const e = {
             buttonPrimaryBackgroundInverseSelected: e.vivoPurpleLight50,
             buttonSecondaryBorder: e.vivoPurple,
             buttonSecondaryBorderSelected: e.vivoPurpleDark,
-            buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
             buttonSecondaryBackgroundSelected: e.vivoPurpleLight10,
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             textButtonPrimary: e.white,
@@ -118,23 +126,18 @@ const e = {
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
+            neutralMediumInverse: e.grey5,
             neutralLow: e.grey1,
             neutralLowAlternative: e.grey2,
-            promo: e.vivoPurple,
-            highlight: e.pink,
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
             textSecondaryInverse: e.vivoPurpleLight20,
-            error: e.pepper,
             success: e.vivoGreen,
             warning: e.orange,
-            textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.vivoPurpleLight50,
-            textNavigationSearchBarHint: e.vivoPurpleLight50,
-            textNavigationSearchBarText: e.white,
-            textAppBar: e.grey4,
-            textAppBarSelected: e.vivoPurple,
+            error: e.pepper,
+            promo: e.vivoPurple,
+            highlight: e.pink,
             successLow: e.vivoGreenLight10,
             warningLow: e.orangeLight10,
             errorLow: e.pepperLight10,
@@ -148,41 +151,56 @@ const e = {
             warningHighInverse: e.orangeDark,
             errorHighInverse: e.pepperDark80,
             promoHighInverse: e.vivoPurple,
-            neutralMediumInverse: e.grey5
+            textNavigationBarPrimary: e.white,
+            textNavigationBarSecondary: e.vivoPurpleLight50,
+            textNavigationSearchBarHint: e.vivoPurpleLight50,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey4,
+            textAppBarSelected: e.vivoPurple,
+            customTabsBackground: e.vivoPurple
         },
         darkModeColors: {
-            appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
+            backgroundAlternative: e.darkModeBlack,
+            backgroundBrand: e.darkModeBlack,
+            backgroundBrandSecondary: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
+            backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
             backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
+            backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
             backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
-            backgroundBrand: e.darkModeBlack,
-            backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey6,
             backgroundSkeletonInverse: e.darkModeGrey6,
-            navigationBarBackground: e.darkModeBlack,
-            backgroundAlternative: e.darkModeBlack,
             backgroundFeedbackBottom: e.darkModeBlack,
+            appBarBackground: e.darkModeGrey,
+            navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             borderHigh: e.grey5,
-            borderSelected: e.vivoPurpleLight80,
-            buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
+            borderSelected: e.vivoPurple,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.pepper,
+            buttonDangerBackgroundSelected: e.pepperDark,
+            buttonDangerBackgroundHover: e.pepperDark,
+            buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.vivoPurpleLight80,
             buttonPrimaryBackgroundInverse: e.vivoPurpleLight80,
             buttonPrimaryBackgroundSelected: e.vivoPurpleDark,
             buttonPrimaryBackgroundHover: e.vivoPurpleDark,
             buttonPrimaryBackgroundInverseSelected: e.vivoPurpleDark,
+            buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBorder: e.white,
             buttonSecondaryBorderSelected: e.white,
             buttonSecondaryBorderInverse: e.white,
             buttonSecondaryBorderInverseSelected: e.white,
-            buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
-            buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             textButtonPrimary: e.grey2,
@@ -194,8 +212,11 @@ const e = {
             textButtonSecondaryInverseSelected: e.grey2,
             textLink: e.vivoPurpleLight50,
             textLinkInverse: e.vivoPurpleLight50,
+            textLinkDanger: e.pepper,
+            textLinkSnackbar: e.vivoPurpleLight50,
             control: e.darkModeGrey6,
             controlActivated: e.vivoPurpleLight80,
+            controlError: e.pepper,
             loadingBar: e.vivoPurpleLight80,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey4,
@@ -204,25 +225,26 @@ const e = {
             divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
-            feedbackInfoBackground: e.darkModeGrey6,
+            badge: e.pepperDark,
+            feedbackErrorBackground: e.pepper,
+            feedbackInfoBackground: e.grey6,
             brand: e.vivoPurpleLight80,
-            brandHigh: e.darkModeGrey6,
+            brandHigh: (0, _colorJs.applyAlpha)(e.white, 0.05),
             inverse: e.grey2,
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
+            neutralMediumInverse: e.grey5,
             neutralLow: e.darkModeGrey6,
             neutralLowAlternative: e.darkModeGrey6,
-            promo: e.vivoPurpleLight80,
             textPrimary: e.grey2,
             textPrimaryInverse: e.grey2,
             textSecondary: e.grey4,
             textSecondaryInverse: e.grey4,
-            textNavigationBarPrimary: e.grey2,
-            textNavigationBarSecondary: e.grey4,
-            textNavigationSearchBarHint: e.grey4,
-            textNavigationSearchBarText: e.grey2,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.grey2,
+            success: e.vivoGreen,
+            warning: e.orange,
+            error: e.pepper,
+            promo: e.vivoPurpleLight80,
+            highlight: e.pink,
             successLow: e.darkModeGrey6,
             warningLow: e.darkModeGrey6,
             errorLow: e.darkModeGrey6,
@@ -236,6 +258,47 @@ const e = {
             warningHighInverse: e.orangeDark,
             errorHighInverse: e.pepperDark80,
             promoHighInverse: e.vivoPurple,
-            neutralMediumInverse: e.grey5
+            textNavigationBarPrimary: e.grey2,
+            textNavigationBarSecondary: e.grey4,
+            textNavigationSearchBarHint: e.grey4,
+            textNavigationSearchBarText: e.grey2,
+            textAppBar: e.grey5,
+            textAppBarSelected: e.grey2,
+            customTabsBackground: e.darkModeBlack
+        },
+        borderRadii: {
+            avatar: "50%",
+            bar: "999px",
+            button: "4px",
+            checkbox: "2px",
+            container: "8px",
+            indicator: "999px",
+            input: "8px",
+            legacyDisplay: "16px",
+            popup: "8px",
+            sheet: "8px"
+        },
+        textPresets: {
+            cardTitle: {
+                weight: "light"
+            },
+            text5: {
+                weight: "light"
+            },
+            text6: {
+                weight: "light"
+            },
+            text7: {
+                weight: "light"
+            },
+            text8: {
+                weight: "light"
+            },
+            text9: {
+                weight: "light"
+            },
+            text10: {
+                weight: "light"
+            }
         }
     });

package/dist/snackbar.css-mistica.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TRANSITION_TIME_IN_MS: ()=>a,
+    TRANSITION_TIME_IN_MS: ()=>n,
     button: ()=>v,
     buttonCritical: ()=>b,
     buttonInfo: ()=>o,
@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./snackbar.css.ts.vanilla.js");
-var a = 300, v = "o7bjb09", b = "_1y2v1nf1t", o = "_1y2v1nf26", t = "_1y2v1nf5q _1y2v1nf62", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf7x _1y2v1nf5q _1y2v1nf5z", p = "o7bjb02", y = "o7bjb04 _1y2v1nf5n _1y2v1nf9z", e = "_1y2v1nf45", i = "_1y2v1nf46", j = "o7bjb07";
+var n = 300, v = "o7bjb09", b = "_1y2v1nf1x", o = "_1y2v1nf2a", t = "_1y2v1nf64 _1y2v1nf6g", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf8b _1y2v1nf64 _1y2v1nf6d", p = "o7bjb02", y = "o7bjb04 _1y2v1nf61 _1y2v1nfad", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";

package/dist/spinner.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./spinner.css.ts.vanilla.js");
-var t = "_1fthc594 _1y2v1nf68", a = "_1fthc595", e = "_1y2v1nf68", f = "_1fthc597";
+var t = "_1fthc594 _1y2v1nf6m", a = "_1fthc595", e = "_1y2v1nf6m", f = "_1fthc597";