@telefonica/mistica 14.9.0 → 14.11.0

package/dist/skins/o2-classic.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getO2ClassicSkin: ()=>a,
+    getO2ClassicSkin: ()=>d,
     palette: ()=>e
 });
 const _colorJs = require("../utils/color.js");
@@ -64,13 +64,17 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, a = ()=>({
+}, d = ()=>({
         name: _constantsJs.O2_CLASSIC_SKIN,
         colors: {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
+            backgroundContainerHover: e.white,
+            backgroundContainerPressed: e.white,
             backgroundContainerBrand: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
+            backgroundContainerBrandHover: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
+            backgroundContainerBrandPressed: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
             backgroundContainerBrandOverInverse: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
             backgroundContainerAlternative: e.grey1,
             backgroundBrand: `linear-gradient(to bottom, ${e.o2Blue}, ${e.o2GradientSecond} 51%, ${e.o2GradientThird} 72%, ${e.o2GradientFourth})`,
@@ -86,6 +90,8 @@ const e = {
             border: e.grey3,
             borderHigh: e.grey5,
             borderSelected: e.o2Gem,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper55,
             buttonDangerBackgroundHover: e.pepper55,
@@ -164,13 +170,18 @@ const e = {
             warningHighInverse: e.orange80,
             errorHighInverse: e.pepper70,
             promoHighInverse: e.pink60,
-            neutralMediumInverse: e.grey5
+            neutralMediumInverse: e.grey5,
+            customTabsBackground: e.o2Blue
         },
         darkModeColors: {
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
+            backgroundContainerHover: e.darkModeGrey,
+            backgroundContainerPressed: e.darkModeGrey,
             backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandHover: e.darkModeGrey,
+            backgroundContainerBrandPressed: e.darkModeGrey,
             backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
@@ -249,6 +260,7 @@ const e = {
             warningHighInverse: e.orange80,
             errorHighInverse: e.pepper70,
             promoHighInverse: e.pink60,
-            neutralMediumInverse: e.grey5
+            neutralMediumInverse: e.grey5,
+            customTabsBackground: e.darkModeBlack
         }
     });

package/dist/skins/o2.d.ts

@@ -1,43 +1,45 @@
 import type { GetKnownSkin } from './types';
 export declare const palette: {
-    readonly o2BluePrimary: "#0019A5";
-    readonly o2BluePrimary70: "#000066";
-    readonly o2BluePrimary30: "#808CD2";
-    readonly o2BluePrimary15: "#CCD1ED";
-    readonly o2BluePrimary10: "#E5E8F6";
-    readonly o2BlueMid: "#0090D0";
-    readonly o2BlueLight: "#41B6E6";
-    readonly o2BlueLight30: "#C6E9F7";
-    readonly o2Teal: "#01B7B4";
-    readonly o2Green: "#91C90E";
-    readonly o2Green10: "#F4FAE7";
-    readonly o2Green40: "#B2D956";
-    readonly o2Green80: "#415A06";
-    readonly o2Yellow: "#FEDB00";
-    readonly o2Orange: "#FF7F41";
-    readonly o2Orange10: "#FFF2EC";
-    readonly o2Orange40: "#FFA57A";
-    readonly o2Orange75: "#A6522A";
-    readonly o2Pink: "#E45DBF";
-    readonly o2Purple: "#952D98";
-    readonly o2Purple10: "#F4EAF5";
-    readonly o2Purple30: "#CA9ACB";
-    readonly pepper: "#FF374A";
-    readonly pepper10: "#FEEBED";
-    readonly pepper20: "#FCC3C9";
-    readonly pepper40: "#FF7380";
-    readonly pepper60: "#C32B3D";
-    readonly grey1: "#F6F6F6";
-    readonly grey2: "#EEEEEE";
-    readonly grey3: "#DDDDDD";
-    readonly grey4: "#999999";
-    readonly grey5: "#707070";
-    readonly grey6: "#000033";
-    readonly white: "#FFFFFF";
-    readonly darkModeBlack: "#191919";
-    readonly darkModeGrey: "#242424";
-    readonly darkModeGrey6: "#313235";
-    readonly darkModeO2BluePrimary: "#0020D6";
-    readonly darkModeO2BluePrimaryDark: "#000099";
+    o2BluePrimary: string;
+    o2BluePrimary70: string;
+    o2BluePrimary90: string;
+    o2BluePrimary30: string;
+    o2BluePrimary15: string;
+    o2BluePrimary10: string;
+    o2BlueMid: string;
+    o2BlueLight: string;
+    o2BlueLight30: string;
+    o2BlueLight35: string;
+    o2Teal: string;
+    o2Green: string;
+    o2Green10: string;
+    o2Green40: string;
+    o2Green80: string;
+    o2Yellow: string;
+    o2Orange: string;
+    o2Orange10: string;
+    o2Orange40: string;
+    o2Orange75: string;
+    o2Pink: string;
+    o2Purple: string;
+    o2Purple10: string;
+    o2Purple30: string;
+    pepper: string;
+    pepper10: string;
+    pepper20: string;
+    pepper40: string;
+    pepper60: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    grey5: string;
+    grey6: string;
+    white: string;
+    darkModeBlack: string;
+    darkModeGrey: string;
+    darkModeGrey6: string;
+    darkModeO2BluePrimary: string;
+    darkModeO2BluePrimaryDark: string;
 };
 export declare const getO2Skin: GetKnownSkin;

package/dist/skins/o2.js

@@ -9,20 +9,22 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getO2Skin: ()=>t,
+    getO2Skin: ()=>d,
     palette: ()=>e
 });
-const _colorJs = require("../utils/color.js");
 const _constantsJs = require("./constants.js");
+const _colorJs = require("../utils/color.js");
 const e = {
     o2BluePrimary: "#0019A5",
     o2BluePrimary70: "#000066",
+    o2BluePrimary90: "#000033",
     o2BluePrimary30: "#808CD2",
     o2BluePrimary15: "#CCD1ED",
     o2BluePrimary10: "#E5E8F6",
     o2BlueMid: "#0090D0",
     o2BlueLight: "#41B6E6",
     o2BlueLight30: "#C6E9F7",
+    o2BlueLight35: "#8DD3F0",
     o2Teal: "#01B7B4",
     o2Green: "#91C90E",
     o2Green10: "#F4FAE7",
@@ -37,7 +39,7 @@ const e = {
     o2Purple: "#952D98",
     o2Purple10: "#F4EAF5",
     o2Purple30: "#CA9ACB",
-    pepper: "#FF374A",
+    pepper: "#F4364C",
     pepper10: "#FEEBED",
     pepper20: "#FCC3C9",
     pepper40: "#FF7380",
@@ -54,33 +56,39 @@ const e = {
     darkModeGrey6: "#313235",
     darkModeO2BluePrimary: "#0020D6",
     darkModeO2BluePrimaryDark: "#000099"
-}, t = ()=>({
+}, d = ()=>({
         name: _constantsJs.O2_SKIN,
         colors: {
-            appBarBackground: e.white,
             background: e.white,
+            backgroundAlternative: e.grey1,
+            backgroundBrand: e.o2BluePrimary,
+            backgroundBrandSecondary: e.o2BluePrimary,
             backgroundContainer: e.white,
+            backgroundContainerHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.03),
+            backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.05),
             backgroundContainerBrand: e.o2BluePrimary,
+            backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverInverse: e.o2BluePrimary70,
             backgroundContainerAlternative: e.grey1,
-            backgroundBrand: e.o2BluePrimary,
-            backgroundBrandSecondary: e.o2BluePrimary,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
             backgroundSkeletonInverse: e.o2BluePrimary70,
-            navigationBarBackground: e.o2BluePrimary,
-            backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.o2BluePrimary,
+            appBarBackground: e.white,
+            navigationBarBackground: e.o2BluePrimary,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
             borderHigh: e.grey5,
             borderSelected: e.o2BluePrimary,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper60,
             buttonDangerBackgroundHover: e.pepper60,
             buttonLinkBackgroundSelected: e.o2BluePrimary10,
-            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.2),
+            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.o2BluePrimary,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundSelected: e.o2BluePrimary70,
@@ -88,10 +96,10 @@ const e = {
             buttonPrimaryBackgroundInverseSelected: e.o2BluePrimary30,
             buttonSecondaryBorder: e.o2BluePrimary,
             buttonSecondaryBorderSelected: e.o2BluePrimary70,
-            buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundHover: e.o2BluePrimary10,
             buttonSecondaryBackgroundSelected: e.o2BluePrimary10,
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderInverseSelected: e.o2BluePrimary30,
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             textButtonPrimary: e.white,
@@ -124,23 +132,18 @@ const e = {
             inverse: e.white,
             neutralHigh: e.grey6,
             neutralMedium: e.grey5,
+            neutralMediumInverse: e.grey5,
             neutralLow: e.grey1,
             neutralLowAlternative: e.grey2,
-            promo: e.o2Purple,
-            highlight: e.o2Pink,
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
             textSecondaryInverse: e.o2BluePrimary15,
-            error: e.pepper,
             success: e.o2Green,
             warning: e.o2Orange,
-            textNavigationBarPrimary: e.white,
-            textNavigationBarSecondary: e.o2BluePrimary30,
-            textNavigationSearchBarHint: e.o2BluePrimary30,
-            textNavigationSearchBarText: e.white,
-            textAppBar: e.grey4,
-            textAppBarSelected: e.o2BluePrimary,
+            error: e.pepper,
+            promo: e.o2Purple,
+            highlight: e.o2Pink,
             successLow: e.o2Green10,
             warningLow: e.o2Orange10,
             errorLow: e.pepper10,
@@ -154,41 +157,56 @@ const e = {
             warningHighInverse: e.o2Orange75,
             errorHighInverse: e.pepper60,
             promoHighInverse: e.o2Purple,
-            neutralMediumInverse: e.grey5
+            textNavigationBarPrimary: e.white,
+            textNavigationBarSecondary: e.o2BluePrimary30,
+            textNavigationSearchBarHint: e.o2BluePrimary30,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey4,
+            textAppBarSelected: e.o2BluePrimary,
+            customTabsBackground: e.o2BluePrimary
         },
         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.darkModeO2BluePrimary,
-            buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
+            borderSelected: e.o2BluePrimary30,
+            coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.pepper,
+            buttonDangerBackgroundSelected: e.pepper60,
+            buttonDangerBackgroundHover: e.pepper60,
+            buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.darkModeO2BluePrimary,
             buttonPrimaryBackgroundInverse: e.darkModeO2BluePrimary,
             buttonPrimaryBackgroundSelected: e.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundHover: e.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundInverseSelected: e.darkModeO2BluePrimaryDark,
+            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,
@@ -200,34 +218,39 @@ const e = {
             textButtonSecondaryInverseSelected: e.grey2,
             textLink: e.o2BluePrimary30,
             textLinkInverse: e.o2BluePrimary30,
+            textLinkDanger: e.pepper,
+            textLinkSnackbar: e.o2BluePrimary30,
             control: e.darkModeGrey6,
             controlActivated: e.o2BluePrimary30,
+            controlError: e.pepper,
             loadingBar: e.darkModeO2BluePrimary,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.o2BlueLight30,
             iosControlKnob: e.grey2,
+            badge: e.pepper60,
+            feedbackErrorBackground: e.pepper,
+            feedbackInfoBackground: e.darkModeGrey6,
             divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
-            feedbackInfoBackground: e.darkModeGrey6,
             brand: e.o2BluePrimary30,
-            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,
             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.o2Green,
+            warning: e.o2Orange,
+            error: e.pepper,
+            promo: e.o2Purple,
+            highlight: e.o2Pink,
             successLow: e.darkModeGrey6,
             warningLow: e.darkModeGrey6,
             errorLow: e.darkModeGrey6,
@@ -241,6 +264,47 @@ const e = {
             warningHighInverse: e.o2Orange75,
             errorHighInverse: e.pepper60,
             promoHighInverse: e.o2Purple,
-            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"
+            }
         }
     });