@telefonica/mistica 16.52.0 → 16.53.0

package/dist/skins/skin-contract.css.d.ts

@@ -25,6 +25,14 @@ export declare const vars: {
         backgroundBrandBottom: `var(--${string})`;
         appBarBackground: `var(--${string})`;
         navigationBarBackground: `var(--${string})`;
+        backgroundDropZoneHover: `var(--${string})`;
+        backgroundDropZoneDragover: `var(--${string})`;
+        backgroundDropZoneBrandHover: `var(--${string})`;
+        backgroundDropZoneBrandDragover: `var(--${string})`;
+        backgroundDropZoneNegativeHover: `var(--${string})`;
+        backgroundDropZoneNegativeDragover: `var(--${string})`;
+        backgroundDropZoneMediaHover: `var(--${string})`;
+        backgroundDropZoneMediaDragover: `var(--${string})`;
         skeletonWave: `var(--${string})`;
         borderLow: `var(--${string})`;
         border: `var(--${string})`;
@@ -302,6 +310,14 @@ export declare const vars: {
         backgroundBrandBottom: `var(--${string})`;
         appBarBackground: `var(--${string})`;
         navigationBarBackground: `var(--${string})`;
+        backgroundDropZoneHover: `var(--${string})`;
+        backgroundDropZoneDragover: `var(--${string})`;
+        backgroundDropZoneBrandHover: `var(--${string})`;
+        backgroundDropZoneBrandDragover: `var(--${string})`;
+        backgroundDropZoneNegativeHover: `var(--${string})`;
+        backgroundDropZoneNegativeDragover: `var(--${string})`;
+        backgroundDropZoneMediaHover: `var(--${string})`;
+        backgroundDropZoneMediaDragover: `var(--${string})`;
         skeletonWave: `var(--${string})`;
         borderLow: `var(--${string})`;
         border: `var(--${string})`;
@@ -750,4 +766,48 @@ export declare const vars: {
             lineHeight: `var(--${string})`;
         };
     };
+    spacing: {
+        buttonDefaultPadding: {
+            left: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        buttonSmallPadding: {
+            left: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        cardDefaultPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+            left: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        inputPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+        };
+        tagPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+        };
+        feedbackScreenPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+            left: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        heroPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+        };
+        headerPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+        };
+        drawerPadding: {
+            top: `var(--${string})`;
+            bottom: `var(--${string})`;
+            left: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+    };
 };

package/dist/skins/telefonica.js

@@ -94,6 +94,14 @@ const e = {
             backgroundAlternative: e.grey1,
             backgroundBrandTop: e.telefonicaBlue,
             backgroundBrandBottom: e.telefonicaBlue,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.05),
+            backgroundDropZoneDragover: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.08),
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.telefonicaBlue80, 0.2),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.telefonicaBlue80, 0.4),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.17),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.telefonicaBlue80, 0.2),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.telefonicaBlue80, 0.4),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey2,
@@ -371,6 +379,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.05),
+            backgroundDropZoneDragover: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.07),
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.white, 0.05),
             skeletonWave: e.grey8,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -973,5 +989,121 @@ 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
+                }
+            }
         }
     });

package/dist/skins/tu.js

@@ -87,6 +87,14 @@ const e = {
             backgroundAlternative: e.grey1,
             backgroundBrandTop: e.primary,
             backgroundBrandBottom: e.primary,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.blue70, 0.08),
+            backgroundDropZoneDragover: e.blue10,
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.grey9, 0.2),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.grey9, 0.4),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.17),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.grey9, 0.2),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.grey9, 0.4),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey2,
@@ -364,6 +372,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneDragover: (0, _color.applyAlpha)(e.white, 0.08),
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.white, 0.05),
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -966,5 +982,121 @@ 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
+                }
+            }
         }
     });

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

@@ -24,6 +24,14 @@ export type Colors = {
     backgroundBrandBottom: string;
     appBarBackground: string;
     navigationBarBackground: string;
+    backgroundDropZoneHover: string;
+    backgroundDropZoneDragover: string;
+    backgroundDropZoneBrandHover: string;
+    backgroundDropZoneBrandDragover: string;
+    backgroundDropZoneNegativeHover: string;
+    backgroundDropZoneNegativeDragover: string;
+    backgroundDropZoneMediaHover: string;
+    backgroundDropZoneMediaDragover: string;
     skeletonWave: string;
     borderLow: string;
     border: string;

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

@@ -6,6 +6,19 @@ export type KnownSkinName = 'Movistar' | 'Movistar-new' | 'O2' | 'O2-new' | 'Viv
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
 export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+type ResponsiveValue<T> = {
+    mobile: T;
+    desktop: T;
+};
+type PaddingYValues = {
+    top: ResponsiveValue<number>;
+    bottom: ResponsiveValue<number>;
+};
+type PaddingXValues = {
+    left: ResponsiveValue<number>;
+    right: ResponsiveValue<number>;
+};
+type PaddingValues = PaddingYValues & PaddingXValues;
 type TextWeightTokenConfig<PossibleFontWeights = FontWeight> = {
     weight: PossibleFontWeights;
     size?: never;
@@ -13,25 +26,13 @@ type TextWeightTokenConfig<PossibleFontWeights = FontWeight> = {
 };
 export type TextSizeTokenConfig = {
     weight?: never;
-    size: {
-        mobile: number;
-        desktop: number;
-    };
-    lineHeight: {
-        mobile: number;
-        desktop: number;
-    };
+    size: ResponsiveValue<number>;
+    lineHeight: ResponsiveValue<number>;
 };
 export type TextTokenConfig<PossibleFontWeights = FontWeight> = {
     weight: PossibleFontWeights;
-    size: {
-        mobile: number;
-        desktop: number;
-    };
-    lineHeight: {
-        mobile: number;
-        desktop: number;
-    };
+    size: ResponsiveValue<number>;
+    lineHeight: ResponsiveValue<number>;
 };
 export type TextPresetsConfig = {
     cardTitle: TextWeightTokenConfig;
@@ -91,6 +92,17 @@ export type BorderRadiiConfig = {
     mediaSmall: string;
     tag: string;
 };
+export type SpacingConfig = {
+    buttonDefaultPadding: PaddingXValues;
+    buttonSmallPadding: PaddingXValues;
+    cardDefaultPadding: PaddingValues;
+    inputPadding: PaddingYValues;
+    tagPadding: PaddingYValues;
+    feedbackScreenPadding: PaddingValues;
+    heroPadding: PaddingYValues;
+    headerPadding: PaddingYValues;
+    drawerPadding: PaddingValues;
+};
 export type ThemeVariantsConfig = {
     successFeedback: Variant;
     brandLoadingScreen: Variant;
@@ -102,6 +114,7 @@ export type Skin = {
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
     themeVariants?: ThemeVariantsConfig;
+    spacing?: SpacingConfig;
 };
 export type KnownSkin = {
     name: KnownSkinName;
@@ -110,4 +123,5 @@ export type KnownSkin = {
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
     themeVariants?: ThemeVariantsConfig;
+    spacing: SpacingConfig;
 };

package/dist/skins/vivo-new.js

@@ -83,6 +83,14 @@ const e = {
             backgroundBrandBottom: e.vivoPurple,
             appBarBackground: e.white,
             navigationBarBackground: e.vivoPurple,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.vivoPurple, 0.06),
+            backgroundDropZoneDragover: e.vivoPurpleLight10,
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.vivoPurpleDark, 0.3),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.vivoPurpleDark, 0.5),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.17),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.vivoPurpleDark, 0.3),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.vivoPurpleDark, 0.5),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -360,6 +368,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneDragover: (0, _color.applyAlpha)(e.white, 0.08),
+            backgroundDropZoneBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneBrandDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneNegativeHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundDropZoneMediaHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundDropZoneMediaDragover: (0, _color.applyAlpha)(e.white, 0.05),
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -962,5 +978,121 @@ 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
+                }
+            }
         }
     });