@telefonica/mistica 14.10.0 → 14.11.0

package/dist/skeletons.css-mistica.js

@@ -11,9 +11,9 @@ function _export(target, all) {
 _export(exports, {
     animation: ()=>o,
     circle: ()=>r,
-    line: ()=>a,
-    row: ()=>f
+    line: ()=>f,
+    row: ()=>y
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./skeletons.css.ts.vanilla.js");
-var o = "zopolw2 _1y2v1nf5s", r = "_1y2v1nf68 _1y2v1nf6a", a = "zopolw6 _1y2v1nf69", f = "_1y2v1nf5q _1y2v1nf65 _1y2v1nf5z";
+var o = "zopolw2 _1y2v1nf66", r = "_1y2v1nf6m _1y2v1nf6o", f = "zopolw6 _1y2v1nf6n", y = "_1y2v1nf64 _1y2v1nf6j _1y2v1nf6d";

package/dist/skins/blau.d.ts

@@ -1,41 +1,41 @@
 import type { GetKnownSkin } from './types';
 export declare const palette: {
-    readonly blauBluePrimary: "#00B6F1";
-    readonly blauBluePrimary10: "#F7FDFF";
-    readonly blauBluePrimary20: "#E5F6FD";
-    readonly blauBluePrimary30: "#B3E9FB";
-    readonly blauBlueSecondary: "#0072BC";
-    readonly blauBlueSecondary10: "#E5F1F9";
-    readonly blauBlueSecondary20: "#B2D4EC";
-    readonly blauBlueSecondary30: "#80B7DF";
-    readonly blauBlueSecondary60: "#005A99";
-    readonly blauPurple: "#7814B3";
-    readonly blauPurple10: "#F1E7F7";
-    readonly blauPurple30: "#BB89D9";
-    readonly blauYellow: "#FFA922";
-    readonly blauYellow10: "#FFF6E9";
-    readonly blauYellow40: "#FFC364";
-    readonly blauYellow60: "#F09500";
-    readonly blauYellow70: "#996614";
-    readonly blauGreen: "#30D300";
-    readonly blauGreen10: "#EAFBE5";
-    readonly blauGreen30: "#97E980";
-    readonly blauGreen70: "#1D7F00";
-    readonly blauRed: "#F64417";
-    readonly blauRed10: "#FEECE8";
-    readonly blauRed20: "#FCC7B9";
-    readonly blauRed30: "#FA9E87";
-    readonly blauRed40: "#F97C5D";
-    readonly blauRed70: "#C93712";
-    readonly grey1: "#F5F9FA";
-    readonly grey2: "#E7E7E7";
-    readonly grey3: "#B8B8B8";
-    readonly grey4: "#A0A0A0";
-    readonly grey5: "#808285";
-    readonly grey6: "#000000";
-    readonly white: "#FFFFFF";
-    readonly darkModeBlack: "#191919";
-    readonly darkModeGrey: "#242424";
-    readonly darkModeGrey6: "#313235";
+    blauBluePrimary: string;
+    blauBluePrimary10: string;
+    blauBluePrimary20: string;
+    blauBluePrimary30: string;
+    blauBlueSecondary: string;
+    blauBlueSecondary10: string;
+    blauBlueSecondary20: string;
+    blauBlueSecondary30: string;
+    blauBlueSecondary60: string;
+    blauPurple: string;
+    blauPurple10: string;
+    blauPurple30: string;
+    blauYellow: string;
+    blauYellow10: string;
+    blauYellow40: string;
+    blauYellow60: string;
+    blauYellow70: string;
+    blauGreen: string;
+    blauGreen10: string;
+    blauGreen30: string;
+    blauGreen70: string;
+    blauRed: string;
+    blauRed10: string;
+    blauRed20: string;
+    blauRed30: string;
+    blauRed40: string;
+    blauRed70: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    grey5: string;
+    grey6: string;
+    white: string;
+    darkModeBlack: string;
+    darkModeGrey: string;
+    darkModeGrey6: string;
 };
 export declare const getBlauSkin: GetKnownSkin;

package/dist/skins/blau.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getBlauSkin: ()=>t,
+    getBlauSkin: ()=>u,
     palette: ()=>e
 });
-const _colorJs = require("../utils/color.js");
 const _constantsJs = require("./constants.js");
+const _colorJs = require("../utils/color.js");
 const e = {
     blauBluePrimary: "#00B6F1",
     blauBluePrimary10: "#F7FDFF",
@@ -52,17 +52,21 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, t = ()=>({
+}, u = ()=>({
         name: _constantsJs.BLAU_SKIN,
         colors: {
+            backgroundBrand: e.blauBluePrimary,
+            backgroundBrandSecondary: e.blauBluePrimary,
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerHover: (0, _colorJs.applyAlpha)(e.blauBluePrimary, 0.03),
+            backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.blauBluePrimary, 0.05),
             backgroundContainerBrand: e.blauBluePrimary,
+            backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverInverse: e.blauBlueSecondary,
             backgroundContainerAlternative: e.blauBluePrimary20,
-            backgroundBrand: e.blauBluePrimary,
-            backgroundBrandSecondary: e.blauBluePrimary,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.blauBlueSecondary, 0.75),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.blauBlueSecondary,
@@ -74,11 +78,13 @@ const e = {
             border: e.grey2,
             borderHigh: e.grey5,
             borderSelected: e.blauBlueSecondary60,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundSelected: e.blauRed70,
             buttonDangerBackgroundHover: e.blauRed70,
             buttonLinkBackgroundSelected: e.blauPurple10,
-            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.3),
+            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundSelected: e.blauBlueSecondary60,
@@ -87,9 +93,9 @@ const e = {
             buttonSecondaryBorder: e.blauBlueSecondary,
             buttonSecondaryBorderSelected: e.blauBlueSecondary60,
             buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundHover: e.blauBlueSecondary10,
             buttonSecondaryBackgroundSelected: e.blauBlueSecondary10,
+            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.2),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.2),
             textButtonPrimary: e.white,
@@ -122,7 +128,8 @@ const e = {
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
-            neutralLow: e.grey1,
+            neutralMediumInverse: e.grey5,
+            neutralLow: e.grey2,
             neutralLowAlternative: e.grey2,
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
@@ -133,12 +140,6 @@ const e = {
             warning: e.blauYellow,
             promo: e.blauPurple,
             highlight: e.blauBluePrimary,
-            textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.blauBlueSecondary20,
-            textNavigationSearchBarHint: e.blauBlueSecondary20,
-            textNavigationSearchBarText: e.white,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.blauBlueSecondary60,
             successLow: e.blauGreen10,
             warningLow: e.blauYellow10,
             errorLow: e.blauRed10,
@@ -152,36 +153,56 @@ const e = {
             warningHighInverse: e.blauYellow70,
             errorHighInverse: e.blauRed70,
             promoHighInverse: e.blauPurple,
-            neutralMediumInverse: e.grey5
+            textNavigationBarPrimary: e.white,
+            textNavigationBarSecondary: e.blauBlueSecondary20,
+            textNavigationSearchBarHint: e.blauBlueSecondary20,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey5,
+            textAppBarSelected: e.blauBlueSecondary60,
+            customTabsBackground: e.blauBluePrimary
         },
         darkModeColors: {
+            background: e.darkModeBlack,
+            backgroundAlternative: e.darkModeBlack,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
-            background: e.darkModeBlack,
-            appBarBackground: e.darkModeGrey,
             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,
-            backgroundAlternative: e.darkModeBlack,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.darkModeGrey6,
-            backgroundSkeletonInverse: e.darkModeGrey6,
+            backgroundSkeleton: e.darkModeGrey,
+            backgroundSkeletonInverse: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
+            appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
+            borderHigh: e.grey5,
+            borderSelected: e.blauBlueSecondary60,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.blauRed,
+            buttonDangerBackgroundSelected: e.blauRed70,
+            buttonDangerBackgroundHover: e.blauRed70,
             buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.blauPurple, 0.3),
             buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.blauPurple, 0.3),
-            buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
+            buttonPrimaryBackground: e.blauBlueSecondary,
+            buttonPrimaryBackgroundInverse: e.blauBluePrimary,
             buttonPrimaryBackgroundSelected: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundHover: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundInverseSelected: e.blauBlueSecondary60,
             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),
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             textButtonPrimary: e.grey2,
@@ -193,7 +214,11 @@ const e = {
             textButtonSecondaryInverseSelected: e.grey2,
             textLink: e.blauPurple30,
             textLinkInverse: e.blauPurple30,
+            textLinkDanger: e.blauRed,
+            textLinkSnackbar: e.blauPurple30,
             control: e.darkModeGrey6,
+            controlActivated: e.blauBlueSecondary,
+            controlError: e.blauRed,
             loadingBar: e.blauBluePrimary,
             loadingBarBackground: e.darkModeGrey,
             toggleAndroidInactive: e.grey5,
@@ -202,23 +227,26 @@ const e = {
             divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
+            badge: e.blauRed,
+            feedbackErrorBackground: e.blauRed,
+            feedbackInfoBackground: e.darkModeGrey,
             brand: e.blauBluePrimary,
-            brandHigh: e.grey5,
+            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,
             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,
+            error: e.blauRed,
+            success: e.blauGreen,
+            warning: e.blauYellow,
+            promo: e.blauPurple,
+            highlight: e.blauBluePrimary,
             successLow: e.darkModeGrey6,
             warningLow: e.darkModeGrey6,
             errorLow: e.darkModeGrey6,
@@ -232,6 +260,47 @@ const e = {
             warningHighInverse: e.blauYellow70,
             errorHighInverse: e.blauRed70,
             promoHighInverse: e.blauPurple,
-            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/skins/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const MOVISTAR_SKIN = "Movistar";
+export declare const MOVISTAR_LEGACY_SKIN = "Movistar";
 export declare const O2_SKIN = "O2";
 export declare const O2_CLASSIC_SKIN = "O2-classic";
 export declare const VIVO_SKIN = "Vivo";

package/dist/skins/constants.js

@@ -9,11 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    BLAU_SKIN: ()=>t,
+    BLAU_SKIN: ()=>_,
+    MOVISTAR_LEGACY_SKIN: ()=>I,
     MOVISTAR_SKIN: ()=>o,
-    O2_CLASSIC_SKIN: ()=>c,
-    O2_SKIN: ()=>I,
-    TELEFONICA_SKIN: ()=>S,
-    VIVO_SKIN: ()=>s
+    O2_CLASSIC_SKIN: ()=>S,
+    O2_SKIN: ()=>s,
+    TELEFONICA_SKIN: ()=>t,
+    VIVO_SKIN: ()=>c
 });
-const o = "Movistar", I = "O2", c = "O2-classic", s = "Vivo", S = "Telefonica", t = "Blau";
+const o = "Movistar", I = "Movistar", s = "O2", S = "O2-classic", c = "Vivo", t = "Telefonica", _ = "Blau";

package/dist/skins/movistar-legacy.d.ts

@@ -1,45 +1,44 @@
 import type { GetKnownSkin } from './types';
 export declare const palette: {
-    readonly movistarBlue: "#019DF4";
-    readonly movistarBlue10: "#E6F5FD";
-    readonly movistarBlue20: "#B3E1FB";
-    readonly movistarBlue30: "#80CEF9";
-    readonly movistarBlue40: "#4DBAF7";
-    readonly movistarBlue55: "#008EDD";
-    readonly movistarGreen: "#5CB615";
-    readonly movistarGreen10: "#EFF8E8";
-    readonly movistarGreen30: "#ADDA8A";
-    readonly movistarGreen40: "#8DCC5B";
-    readonly movistarGreen60: "#499110";
-    readonly movistarGreen70: "#407F0F";
-    readonly pepper: "#FF374A";
-    readonly pepper10: "#FFEBED";
-    readonly pepper20: "#FFC3C8";
-    readonly pepper40: "#FF7380";
-    readonly pepper55: "#D73241";
-    readonly pepper70: "#B22634";
-    readonly egg: "#F28D15";
-    readonly egg10: "#FEF4E8";
-    readonly egg40: "#F6AF5B";
-    readonly egg80: "#6D3F09";
-    readonly pink: "#E63780";
-    readonly purple: "#A13EA1";
-    readonly purple10: "#F6ECF6";
-    readonly purple40: "#BD78BD";
-    readonly purple70: "#712B71";
-    readonly grey1: "#F6F6F6";
-    readonly grey2: "#EEEEEE";
-    readonly grey3: "#DDDDDD";
-    readonly grey4: "#999999";
-    readonly grey5: "#86888C";
-    readonly grey6: "#313235";
-    readonly white: "#FFFFFF";
-    readonly movistarProminentBlue: "#0B2739";
-    readonly movistarProminentBlueDark: "#081F2D";
-    readonly movistarProminentBlueLight20: "#CED3D7";
-    readonly movistarProminentBlueLight50: "#85939C";
-    readonly movistarProminentBlueLight70: "#546874";
-    readonly darkModeBlack: "#191919";
-    readonly darkModeGrey: "#242424";
+    movistarBlue: string;
+    movistarBlue10: string;
+    movistarBlue20: string;
+    movistarBlue30: string;
+    movistarBlue40: string;
+    movistarBlue55: string;
+    movistarGreen: string;
+    movistarGreen10: string;
+    movistarGreen30: string;
+    movistarGreen40: string;
+    movistarGreen60: string;
+    movistarGreen70: string;
+    pepper: string;
+    pepper10: string;
+    pepper40: string;
+    pepper55: string;
+    pepper70: string;
+    egg: string;
+    egg10: string;
+    egg40: string;
+    egg80: string;
+    pink: string;
+    purple: string;
+    purple10: string;
+    purple40: string;
+    purple70: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    grey5: string;
+    grey6: string;
+    white: string;
+    movistarProminentBlue: string;
+    movistarProminentBlueDark: string;
+    movistarProminentBlueLight20: string;
+    movistarProminentBlueLight50: string;
+    movistarProminentBlueLight70: string;
+    darkModeBlack: string;
+    darkModeGrey: string;
 };
 export declare const getMovistarLegacySkin: GetKnownSkin;