@telefonica/mistica 16.51.0 → 16.53.0

package/dist-es/skins/o2-new.js

@@ -75,6 +75,14 @@ const e = {
             backgroundBrandBottom: e.beyondBlue45,
             appBarBackground: e.white,
             navigationBarBackground: e.darkBlue,
+            backgroundDropZoneHover: r(e.beyondBlue, 0.05),
+            backgroundDropZoneDragover: r(e.beyondBlue, 0.08),
+            backgroundDropZoneBrandHover: r(e.beyondBlue90, 0.2),
+            backgroundDropZoneBrandDragover: r(e.beyondBlue90, 0.4),
+            backgroundDropZoneNegativeHover: r(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
+            backgroundDropZoneMediaHover: r(e.beyondBlue90, 0.2),
+            backgroundDropZoneMediaDragover: r(e.beyondBlue90, 0.4),
             skeletonWave: e.grey30,
             borderLow: e.grey20,
             border: e.grey30,
@@ -351,6 +359,14 @@ const e = {
             backgroundBrandTop: e.darkModeBlack,
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
+            backgroundDropZoneHover: r(e.white, 0.05),
+            backgroundDropZoneDragover: r(e.white, 0.08),
+            backgroundDropZoneBrandHover: r(e.white, 0.03),
+            backgroundDropZoneBrandDragover: r(e.white, 0.05),
+            backgroundDropZoneNegativeHover: r(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.05),
+            backgroundDropZoneMediaHover: r(e.white, 0.03),
+            backgroundDropZoneMediaDragover: r(e.white, 0.05),
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey80,
             borderLow: e.darkModeBlack,
@@ -954,6 +970,122 @@ const e = {
         themeVariants: {
             successFeedback: "inverse",
             brandLoadingScreen: "inverse"
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 12,
+                    desktop: 12
+                },
+                right: {
+                    mobile: 12,
+                    desktop: 12
+                }
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            },
+            inputPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
+            tagPadding: {
+                top: {
+                    mobile: 4,
+                    desktop: 4
+                },
+                bottom: {
+                    mobile: 4,
+                    desktop: 4
+                }
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 64
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 64
+                }
+            },
+            heroPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 56
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 56
+                }
+            },
+            headerPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 48
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 48
+                }
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 40
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40
+                }
+            }
         }
     });
 export { d as getO2NewSkin, e as palette };

package/dist-es/skins/o2.js

@@ -1,4 +1,4 @@
-import { O2_SKIN as a } from "./constants.js";
+import { O2_SKIN as o } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     o2BluePrimary: "#0019A5",
@@ -44,7 +44,7 @@ const e = {
     darkModeO2BluePrimary: "#0020D6",
     darkModeO2BluePrimaryDark: "#000099"
 }, i = ()=>({
-        name: a,
+        name: o,
         colors: {
             background: e.white,
             backgroundAlternative: e.grey1,
@@ -71,6 +71,14 @@ const e = {
             backgroundBrandBottom: e.o2BluePrimary,
             appBarBackground: e.white,
             navigationBarBackground: e.o2BluePrimary,
+            backgroundDropZoneHover: r(e.o2BluePrimary90, 0.05),
+            backgroundDropZoneDragover: r(e.o2BluePrimary90, 0.08),
+            backgroundDropZoneBrandHover: r(e.o2BluePrimary90, 0.4),
+            backgroundDropZoneBrandDragover: r(e.o2BluePrimary90, 0.8),
+            backgroundDropZoneNegativeHover: r(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
+            backgroundDropZoneMediaHover: r(e.o2BluePrimary90, 0.4),
+            backgroundDropZoneMediaDragover: r(e.o2BluePrimary90, 0.8),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -348,6 +356,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: r(e.white, 0.03),
+            backgroundDropZoneDragover: r(e.white, 0.05),
+            backgroundDropZoneBrandHover: r(e.white, 0.03),
+            backgroundDropZoneBrandDragover: r(e.white, 0.05),
+            backgroundDropZoneNegativeHover: r(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.05),
+            backgroundDropZoneMediaHover: r(e.white, 0.03),
+            backgroundDropZoneMediaDragover: r(e.white, 0.05),
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -950,6 +966,122 @@ const e = {
         themeVariants: {
             successFeedback: "inverse",
             brandLoadingScreen: "inverse"
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 12,
+                    desktop: 12
+                },
+                right: {
+                    mobile: 12,
+                    desktop: 12
+                }
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            },
+            inputPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
+            tagPadding: {
+                top: {
+                    mobile: 4,
+                    desktop: 4
+                },
+                bottom: {
+                    mobile: 4,
+                    desktop: 4
+                }
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 64
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 64
+                }
+            },
+            heroPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 56
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 56
+                }
+            },
+            headerPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 48
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 48
+                }
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 40
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40
+                }
+            }
         }
     });
 export { i as getO2Skin, e as palette };