@telefonica/mistica 10.16.0 → 10.20.0

package/dist-es/image.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
@@ -30,38 +31,70 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+export var useDisableBorderRadius = function() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+export var DisableBorderRadiusProvider = function(param) {
+    var children = param.children;
+    /*#__PURE__*/ return _jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
 var useStyles = createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 'unset';
+            }
         }
     };
 });
-var RATIO = {
+export var RATIO = {
     '1:1': 1,
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
-var Image = function(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["url", "aspectRatio", "alt"]);
-    var classes = useStyles();
+var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["aspectRatio", "alt"]);
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ _jsx("img", {
+        ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
     }));
-};
+});
 export default Image;

package/dist-es/index.js

@@ -56,10 +56,12 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';

package/dist-es/integer-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -110,7 +110,7 @@ var IntegerField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist-es/menu.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ESC, TAB } from './utils/key-codes';
-import Overlay from './overlay';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
+import Overlay from './overlay';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -69,6 +69,7 @@ var useStyles = createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -77,13 +78,17 @@ var useStyles = createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function(param) {
+            bottom: function(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function(param) {
-                var itemsComputedProps = param.itemsComputedProps, width = param.width;
-                return width !== null && width !== void 0 ? width : itemsComputedProps.width;
+                var width = param.width;
+                return width !== null && width !== void 0 ? width : '100%';
             },
             borderRadius: 4,
             boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
@@ -124,28 +129,27 @@ var Menu = function(param) {
             return;
         }
         var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, left = targetRect.left, right = targetRect.right, height = targetRect.height;
+        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
         var top = topTarget + height;
         var ref;
         var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue('height'))) !== null && ref !== void 0 ? ref : 0;
-        var leftDirection = position === 'left' ? left : right - (width !== null && width !== void 0 ? width : widthTarget);
+        var rightDirection = position === 'left' ? 'auto' : "calc(100% - ".concat(widthTarget, "px)");
         // if it doesn't fit on bottom
         if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
             var availableSpaceBottom = window.innerHeight - top;
             if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                var newTop = topTarget - spaceTaken;
                 setItemsComputedProps({
-                    width: widthTarget,
-                    left: leftDirection,
-                    top: Math.max(newTop, MARGIN_THRESHOLD),
-                    maxHeight: topTarget - MARGIN_THRESHOLD,
+                    right: rightDirection,
+                    bottom: '100%',
+                    top: 'auto',
+                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center bottom'
                 });
             } else {
                 setItemsComputedProps({
-                    width: widthTarget,
-                    top: top,
-                    left: leftDirection,
+                    top: '100%',
+                    bottom: 'auto',
+                    right: rightDirection,
                     maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center top'
                 });
@@ -153,9 +157,9 @@ var Menu = function(param) {
         } else {
             // if it fits on bottom
             setItemsComputedProps({
-                width: widthTarget,
-                top: top,
-                left: leftDirection,
+                top: '100%',
+                bottom: 'auto',
+                right: rightDirection,
                 maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                 transformOrigin: 'center top'
             });
@@ -223,20 +227,23 @@ var Menu = function(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ _jsx(Overlay, {
                 onPress: function(e) {
-                    setIsMenuOpen(false);
                     cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist-es/month-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
@@ -113,7 +113,7 @@ var DateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalYearMonthString(min) : undefined,
         max: max ? getLocalYearMonthString(max) : undefined,

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.16.0';
+export var PACKAGE_VERSION = '10.20.0';

package/dist-es/password-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
@@ -174,7 +174,7 @@ var PasswordField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function(field) {

package/dist-es/phone-number-field.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useRifm } from 'rifm';
 import { formatAsYouType, formatToE164, parse, getRegionCodeForCountryCode } from '@telefonica/libphonenumber';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
@@ -199,7 +199,7 @@ var PhoneNumberField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist-es/search-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconSearch from './icons/icon-search';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
@@ -139,7 +139,7 @@ var SearchField = function(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ _jsx(IconSearch, {
         }),

package/dist-es/select.js

@@ -5,7 +5,7 @@ import { useAriaId, useTheme } from './hooks';
 import { DOWN, ENTER, ESC, SPACE, TAB, UP } from './utils/key-codes';
 import { FieldContainer, HelperText, Label } from './text-field-components';
 import ChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import Overlay from './overlay';
 import classNames from 'classnames';
 import { isAndroid, isIos } from './utils/platform';
@@ -515,7 +515,7 @@ var Select = function(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ _jsx(TextFieldBase, {
+                    /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

package/dist-es/skins/blau.js

@@ -1,5 +1,7 @@
 import { applyAlpha } from '../utils/color';
 import { BLAU_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-constants.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-skin-schema.json
 export var palette = {
     blauBluePrimary: '#00B6F1',
     blauBluePrimary10: '#F7FDFF',
@@ -15,16 +17,19 @@ export var palette = {
     blauPurple30: '#BB89D9',
     blauYellow: '#FFA922',
     blauYellow10: '#FFF6E9',
+    blauYellow40: '#FFC364',
     blauYellow60: '#F09500',
     blauYellow70: '#996614',
+    blauGreen: '#30D300',
+    blauGreen10: '#EAFBE5',
+    blauGreen30: '#97E980',
+    blauGreen70: '#1D7F00',
     blauRed: '#F64417',
     blauRed10: '#FEECE8',
     blauRed20: '#FCC7B9',
     blauRed30: '#FA9E87',
+    blauRed40: '#F97C5D',
     blauRed70: '#C93712',
-    blauGreen: '#30D300',
-    blauGreen10: '#EAFBE5',
-    blauGreen70: '#1D7F00',
     grey1: '#F5F9FA',
     grey2: '#E7E7E7',
     grey3: '#B8B8B8',
@@ -126,7 +131,20 @@ export var getBlauSkin = function() {
             textNavigationSearchBarHint: palette.blauBlueSecondary20,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.blauBlueSecondary60
+            textAppBarSelected: palette.blauBlueSecondary60,
+            // TAGS
+            tagBackgroundSuccess: palette.blauGreen10,
+            tagBackgroundWarning: palette.blauYellow10,
+            tagBackgroundError: palette.blauRed10,
+            tagBackgroundPromo: palette.blauPurple10,
+            tagBackgroundActive: palette.blauBlueSecondary10,
+            tagBackgroundInactive: palette.grey2,
+            textTagSuccess: palette.blauGreen70,
+            textTagWarning: palette.blauYellow70,
+            textTagError: palette.blauRed70,
+            textTagPromo: palette.blauPurple,
+            textTagActive: palette.blauBlueSecondary,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             // BACKGROUNDS
@@ -188,7 +206,20 @@ export var getBlauSkin = function() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: applyAlpha(palette.white, 0.05),
+            tagBackgroundError: applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.blauGreen30,
+            textTagWarning: palette.blauYellow40,
+            textTagError: palette.blauRed40,
+            textTagPromo: palette.blauPurple30,
+            textTagActive: palette.blauBluePrimary30,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist-es/skins/movistar.js

@@ -1,22 +1,35 @@
 import { applyAlpha } from '../utils/color';
 import { MOVISTAR_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar-skin-schema.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar-constants.json
 export var palette = {
     movistarBlue: '#019DF4',
-    movistarBlueDark: '#008EDD',
-    movistarBlueLight50: '#80CEF9',
-    movistarBlueLight30: '#B3E1FB',
-    movistarBlueLight10: '#E6F5FD',
+    movistarBlue10: '#E6F5FD',
+    movistarBlue20: '#B3E1FB',
+    movistarBlue30: '#80CEF9',
+    movistarBlue40: '#4DBAF7',
+    movistarBlue55: '#008EDD',
     movistarGreen: '#5CB615',
-    movistarGreenDark: '#499110',
-    movistarGreenLight50: '#ADDA8A',
-    movistarGreenLight30: '#CEE9B9',
+    movistarGreen10: '#EFF8E8',
+    movistarGreen30: '#ADDA8A',
+    movistarGreen40: '#8DCC5B',
+    movistarGreen60: '#499110',
+    movistarGreen70: '#407F0F',
     pepper: '#FF374A',
-    pepperDark: '#D73241',
-    pepperLight30: '#FFC3C8',
+    pepper10: '#FFEBED',
+    pepper20: '#FFC3C8',
+    pepper40: '#FF7380',
+    pepper55: '#D73241',
+    pepper70: '#B22634',
     egg: '#F28D15',
-    eggLight: '#F8D2B3',
+    egg10: '#FEF4E8',
+    egg40: '#F6AF5B',
+    egg80: '#6D3F09',
     pink: '#E63780',
     purple: '#A13EA1',
+    purple10: '#F6ECF6',
+    purple40: '#BD78BD',
+    purple70: '#712B71',
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
@@ -31,8 +44,7 @@ export var palette = {
     movistarProminentBlueLight70: '#546874',
     // specific for dark mode:
     darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeMovistarBlueDark: '#4C7389'
+    darkModeGrey: '#242424'
 };
 export var getMovistarSkin = function(variant) {
     var skin = {
@@ -45,7 +57,7 @@ export var getMovistarSkin = function(variant) {
             backgroundBrand: palette.movistarBlue,
             backgroundOverlay: applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey1,
-            backgroundSkeletonInverse: palette.movistarBlueDark,
+            backgroundSkeletonInverse: palette.movistarBlue55,
             navigationBarBackground: palette.movistarBlue,
             backgroundAlternative: palette.grey1,
             backgroundFeedbackBottom: palette.movistarBlue,
@@ -57,50 +69,50 @@ export var getMovistarSkin = function(variant) {
             borderSelected: palette.movistarGreen,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundSelected: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
-            buttonLinkBackgroundSelected: palette.movistarBlueLight10,
+            buttonDangerBackgroundSelected: palette.pepper55,
+            buttonDangerBackgroundHover: palette.pepper55,
+            buttonLinkBackgroundSelected: palette.movistarBlue10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.movistarGreen,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
-            buttonPrimaryBackgroundHover: palette.movistarGreenDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.movistarBlueLight50,
+            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
+            buttonPrimaryBackgroundHover: palette.movistarGreen60,
+            buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue30,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
+            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.movistarBlueLight50,
+            buttonSecondaryBorderSelectedInverse: palette.movistarBlue30,
             textButtonPrimary: palette.white,
             textButtonPrimaryInverse: palette.movistarBlue,
             textButtonPrimaryInverseSelected: palette.movistarBlue,
             textButtonSecondary: palette.movistarGreen,
-            textButtonSecondarySelected: palette.movistarGreenDark,
+            textButtonSecondarySelected: palette.movistarGreen60,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.movistarBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkSnackbar: palette.movistarBlueLight50,
+            textLinkSnackbar: palette.movistarBlue30,
             // CONTROLS
             control: palette.grey3,
             controlActivated: palette.movistarBlue,
             controlError: palette.pepper,
-            loadingBar: palette.movistarBlueLight50,
-            loadingBarBackground: palette.movistarBlueDark,
+            loadingBar: palette.movistarBlue30,
+            loadingBarBackground: palette.movistarBlue55,
             toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.movistarBlueLight30,
+            toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.white,
             // DIVIDERS
             divider: palette.grey2,
-            dividerInverse: palette.movistarBlueDark,
+            dividerInverse: palette.movistarBlue55,
             navigationBarDivider: palette.movistarBlue,
             // FEEDBACKS
-            badge: palette.pepperDark,
+            badge: palette.pepper55,
             feedbackErrorBackground: palette.pepper,
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.movistarBlue,
-            brandDark: palette.movistarBlueDark,
+            brandDark: palette.movistarBlue55,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
@@ -118,11 +130,24 @@ export var getMovistarSkin = function(variant) {
             warning: palette.egg,
             // BARS TEXTS
             textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.movistarBlueLight30,
-            textNavigationSearchBarHint: palette.movistarBlueLight30,
+            textNavigationBarSecondary: palette.movistarBlue20,
+            textNavigationSearchBarHint: palette.movistarBlue20,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.movistarBlue
+            textAppBarSelected: palette.movistarBlue,
+            // TAGS
+            tagBackgroundSuccess: palette.movistarGreen10,
+            tagBackgroundWarning: palette.egg10,
+            tagBackgroundError: palette.pepper10,
+            tagBackgroundPromo: palette.purple10,
+            tagBackgroundActive: palette.movistarBlue10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.movistarGreen70,
+            textTagWarning: palette.egg80,
+            textTagError: palette.pepper70,
+            textTagPromo: palette.purple70,
+            textTagActive: palette.movistarBlue,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             brand: palette.movistarBlue,
@@ -143,13 +168,13 @@ export var getMovistarSkin = function(variant) {
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.movistarGreen,
             buttonPrimaryBackgroundInverse: palette.movistarGreen,
-            buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
-            buttonPrimaryBackgroundHover: palette.movistarGreenDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.movistarGreenDark,
+            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
+            buttonPrimaryBackgroundHover: palette.movistarGreen60,
+            buttonPrimaryBackgroundSelectedInverse: palette.movistarGreen60,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
+            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
             buttonSecondaryBorderInverse: palette.movistarGreen,
-            buttonSecondaryBorderSelectedInverse: palette.movistarGreenDark,
+            buttonSecondaryBorderSelectedInverse: palette.movistarGreen60,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryInverse: palette.grey2,
             textButtonPrimaryInverseSelected: palette.grey2,
@@ -164,7 +189,7 @@ export var getMovistarSkin = function(variant) {
             loadingBar: palette.movistarBlue,
             loadingBarBackground: applyAlpha(palette.white, 0.05),
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.movistarBlueLight30,
+            toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
@@ -178,13 +203,26 @@ export var getMovistarSkin = function(variant) {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.movistarBlueLight50,
+            textAmount: palette.movistarBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: applyAlpha(palette.white, 0.05),
+            tagBackgroundError: applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.movistarGreen40,
+            textTagWarning: palette.egg40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.purple40,
+            textTagActive: palette.movistarBlue40,
+            textTagInactive: palette.grey4
         }
     };
     if (variant === 'prominent') {