@telefonica/mistica 14.10.0 → 14.11.0

package/dist-es/skins/o2.js

@@ -1,14 +1,16 @@
-import { applyAlpha as r } from "../utils/color.js";
 import { O2_SKIN as o } from "./constants.js";
+import { applyAlpha as r } from "../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",
@@ -23,7 +25,7 @@ const e = {
     o2Purple: "#952D98",
     o2Purple10: "#F4EAF5",
     o2Purple30: "#CA9ACB",
-    pepper: "#FF374A",
+    pepper: "#F4364C",
     pepper10: "#FEEBED",
     pepper20: "#FCC3C9",
     pepper40: "#FF7380",
@@ -40,33 +42,39 @@ const e = {
     darkModeGrey6: "#313235",
     darkModeO2BluePrimary: "#0020D6",
     darkModeO2BluePrimaryDark: "#000099"
-}, t = ()=>({
+}, d = ()=>({
         name: o,
         colors: {
-            appBarBackground: e.white,
             background: e.white,
+            backgroundAlternative: e.grey1,
+            backgroundBrand: e.o2BluePrimary,
+            backgroundBrandSecondary: e.o2BluePrimary,
             backgroundContainer: e.white,
+            backgroundContainerHover: r(e.darkModeBlack, 0.03),
+            backgroundContainerPressed: r(e.darkModeBlack, 0.05),
             backgroundContainerBrand: e.o2BluePrimary,
+            backgroundContainerBrandHover: r(e.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: r(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverInverse: e.o2BluePrimary70,
             backgroundContainerAlternative: e.grey1,
-            backgroundBrand: e.o2BluePrimary,
-            backgroundBrandSecondary: e.o2BluePrimary,
             backgroundOverlay: r(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: r(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: r(e.darkModeBlack, 0.35),
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper60,
             buttonDangerBackgroundHover: e.pepper60,
             buttonLinkBackgroundSelected: e.o2BluePrimary10,
-            buttonLinkBackgroundInverseSelected: r(e.white, 0.2),
+            buttonLinkBackgroundInverseSelected: r(e.white, 0.08),
             buttonPrimaryBackground: e.o2BluePrimary,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundSelected: e.o2BluePrimary70,
@@ -74,10 +82,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: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: r(e.white, 0.15),
             textButtonPrimary: e.white,
@@ -110,23 +118,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,
@@ -140,41 +143,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: r(e.white, 0.03),
+            backgroundContainerPressed: r(e.white, 0.05),
             backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandHover: r(e.white, 0.03),
+            backgroundContainerBrandPressed: r(e.white, 0.05),
             backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
-            backgroundBrand: e.darkModeBlack,
-            backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(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: r(e.white, 0.05),
-            buttonLinkBackgroundInverseSelected: r(e.white, 0.05),
+            borderSelected: e.o2BluePrimary30,
+            coverBackgroundHover: r(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: r(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.pepper,
+            buttonDangerBackgroundSelected: e.pepper60,
+            buttonDangerBackgroundHover: e.pepper60,
+            buttonLinkBackgroundSelected: r(e.white, 0.08),
+            buttonLinkBackgroundInverseSelected: r(e.white, 0.08),
             buttonPrimaryBackground: e.darkModeO2BluePrimary,
             buttonPrimaryBackgroundInverse: e.darkModeO2BluePrimary,
             buttonPrimaryBackgroundSelected: e.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundHover: e.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundInverseSelected: e.darkModeO2BluePrimaryDark,
+            buttonSecondaryBackgroundSelected: r(e.white, 0.15),
             buttonSecondaryBorder: e.white,
             buttonSecondaryBorderSelected: e.white,
             buttonSecondaryBorderInverse: e.white,
             buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundSelected: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: r(e.white, 0.15),
             textButtonPrimary: e.grey2,
@@ -186,34 +204,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: r(e.white, 0.05),
             dividerInverse: r(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
-            feedbackInfoBackground: e.darkModeGrey6,
             brand: e.o2BluePrimary30,
-            brandHigh: e.darkModeGrey6,
+            brandHigh: r(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,
@@ -227,7 +250,48 @@ 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"
+            }
         }
     });
-export { t as getO2Skin, e as palette };
+export { d as getO2Skin, e as palette };