@telefonica/mistica 10.19.0 → 10.20.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.20.0](https://github.com/Telefonica/mistica-web/compare/v10.19.0...v10.20.0) (2022-01-24)
+
+
+### Features
+
+* **Tags:** Tag component evolution ([#372](https://github.com/Telefonica/mistica-web/issues/372)) ([0db48b1](https://github.com/Telefonica/mistica-web/commit/0db48b15525b67c574b90c8c450b35ef155ca199))
+
 # [10.19.0](https://github.com/Telefonica/mistica-web/compare/v10.18.0...v10.19.0) (2022-01-24)
 
 

package/dist/button.js

@@ -396,6 +396,11 @@ var Button = function Button(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             maybe: true
@@ -419,22 +424,25 @@ var Button = function Button(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     var padding = 6;
@@ -491,6 +499,11 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
@@ -498,7 +511,7 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -506,7 +519,7 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -514,8 +527,11 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {

package/dist/card.js

@@ -47,8 +47,7 @@ var useCardContentStyles = (0, _jss).createUseStyles(function() {
         actions: {
             flex: 1,
             display: 'flex',
-            alignItems: 'flex-end',
-            marginTop: 16
+            alignItems: 'flex-end'
         }
     };
 });
@@ -62,32 +61,30 @@ var CardContent = function CardContent(param) {
         }
         if (typeof headline === 'string') {
             return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
-                color: theme.colors.promo,
+                type: "promo",
                 children: headline
             }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+        space: 16,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
-                space: 16,
+                space: 8,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
-                        space: 8,
-                        children: [
-                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                    (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                            space: 16,
+                            children: [
+                                renderHeadline(),
+                                /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
                                     space: 4,
                                     children: [
-                                        renderHeadline(),
-                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                                            paddingTop: 4,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                                                regular: true,
-                                                uppercase: true,
-                                                children: pretitle
-                                            })
+                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                            regular: true,
+                                            uppercase: true,
+                                            children: pretitle
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
                                             as: "h1",
@@ -100,20 +97,20 @@ var CardContent = function CardContent(param) {
                                         })
                                     ]
                                 })
-                            }),
-                            description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                as: "p",
-                                regular: true,
-                                color: theme.colors.textSecondary,
-                                children: description
-                            })
-                        ]
+                            ]
+                        })
                     }),
-                    extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                        children: extra
+                    description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                        as: "p",
+                        regular: true,
+                        color: theme.colors.textSecondary,
+                        children: description
                     })
                 ]
             }),
+            extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                children: extra
+            }),
             (button || buttonLink) && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.actions,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, {

package/dist/header.d.ts

@@ -6,7 +6,9 @@ import type { TextPresetProps } from './text';
 import type { NavigationBreadcrumbsProps } from './navigation-breadcrumbs';
 declare type OverridableTextProps = {
     color?: TextPresetProps['color'];
+    /** @deprecated use decoration prop */
     textDecoration?: TextPresetProps['textDecoration'];
+    decoration?: TextPresetProps['decoration'];
     truncate?: TextPresetProps['truncate'];
 };
 declare type RichText = string | ({

package/dist/header.js.flow

@@ -6,7 +6,12 @@ import { ButtonPrimary, ButtonSecondary } from "./button";
 import type { TextPresetProps } from "./text";
 declare type OverridableTextProps = {
   color?: $PropertyType<TextPresetProps, "color">,
+
+  /**
+   * @deprecated use decoration prop
+   */
   textDecoration?: $PropertyType<TextPresetProps, "textDecoration">,
+  decoration?: $PropertyType<TextPresetProps, "decoration">,
   truncate?: $PropertyType<TextPresetProps, "truncate">,
 };
 declare type RichText =

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as MasterDetailLayout } from './master-detail-layout';
 export { default as NavigationBreadcrumbs } from './navigation-breadcrumbs';
 export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8, Text9, Text10 } from './text';
 export { default as Tag } from './tag';
+export type { TagType } from './tag';
 export { default as SectionTitle } from './section-title';
 export { Placeholder, AvatarPlaceholder } from './placeholder';
 export { RowList, Row, BoxedRowList, BoxedRow } from './list';

package/dist/index.js.flow

@@ -70,6 +70,7 @@ declare export {
   Text10,
 } from "./text";
 declare export { default as Tag } from "./tag";
+export type { TagType } from "./tag";
 declare export { default as SectionTitle } from "./section-title";
 declare export { Placeholder, AvatarPlaceholder } from "./placeholder";
 declare export { RowList, Row, BoxedRowList, BoxedRow } from "./list";

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.19.0';
+var PACKAGE_VERSION = '10.20.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/skins/blau.d.ts

@@ -14,16 +14,19 @@ export declare const palette: {
     readonly blauPurple30: "#BB89D9";
     readonly blauYellow: "#FFA922";
     readonly blauYellow10: "#FFF6E9";
+    readonly blauYellow40: "#FFC364";
     readonly blauYellow60: "#F09500";
     readonly blauYellow70: "#996614";
+    readonly blauGreen: "#30D300";
+    readonly blauGreen10: "#EAFBE5";
+    readonly blauGreen30: "#97E980";
+    readonly blauGreen70: "#1D7F00";
     readonly blauRed: "#F64417";
     readonly blauRed10: "#FEECE8";
     readonly blauRed20: "#FCC7B9";
     readonly blauRed30: "#FA9E87";
+    readonly blauRed40: "#F97C5D";
     readonly blauRed70: "#C93712";
-    readonly blauGreen: "#30D300";
-    readonly blauGreen10: "#EAFBE5";
-    readonly blauGreen70: "#1D7F00";
     readonly grey1: "#F5F9FA";
     readonly grey2: "#E7E7E7";
     readonly grey3: "#B8B8B8";

package/dist/skins/blau.js

@@ -20,16 +20,19 @@ 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',
@@ -132,7 +135,20 @@ var getBlauSkin = function getBlauSkin() {
             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
@@ -194,7 +210,20 @@ var getBlauSkin = function getBlauSkin() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: (0, _color).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/skins/blau.js.flow

@@ -16,16 +16,19 @@ declare 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",

package/dist/skins/movistar.d.ts

@@ -1,21 +1,32 @@
 import type { GetSkin } from './types';
 export declare const palette: {
     readonly movistarBlue: "#019DF4";
-    readonly movistarBlueDark: "#008EDD";
-    readonly movistarBlueLight50: "#80CEF9";
-    readonly movistarBlueLight30: "#B3E1FB";
-    readonly movistarBlueLight10: "#E6F5FD";
+    readonly movistarBlue10: "#E6F5FD";
+    readonly movistarBlue20: "#B3E1FB";
+    readonly movistarBlue30: "#80CEF9";
+    readonly movistarBlue40: "#4DBAF7";
+    readonly movistarBlue55: "#008EDD";
     readonly movistarGreen: "#5CB615";
-    readonly movistarGreenDark: "#499110";
-    readonly movistarGreenLight50: "#ADDA8A";
-    readonly movistarGreenLight30: "#CEE9B9";
+    readonly movistarGreen10: "#EFF8E8";
+    readonly movistarGreen30: "#ADDA8A";
+    readonly movistarGreen40: "#8DCC5B";
+    readonly movistarGreen60: "#499110";
+    readonly movistarGreen70: "#407F0F";
     readonly pepper: "#FF374A";
-    readonly pepperDark: "#D73241";
-    readonly pepperLight30: "#FFC3C8";
+    readonly pepper10: "#FFEBED";
+    readonly pepper20: "#FFC3C8";
+    readonly pepper40: "#FF7380";
+    readonly pepper55: "#D73241";
+    readonly pepper70: "#B22634";
     readonly egg: "#F28D15";
-    readonly eggLight: "#F8D2B3";
+    readonly egg10: "#FEF4E8";
+    readonly egg40: "#F6AF5B";
+    readonly egg80: "#6D3F09";
     readonly pink: "#E63780";
     readonly purple: "#A13EA1";
+    readonly purple10: "#F6ECF6";
+    readonly purple40: "#BD78BD";
+    readonly purple70: "#712B71";
     readonly grey1: "#F6F6F6";
     readonly grey2: "#EEEEEE";
     readonly grey3: "#DDDDDD";
@@ -30,6 +41,5 @@ export declare const palette: {
     readonly movistarProminentBlueLight70: "#546874";
     readonly darkModeBlack: "#191919";
     readonly darkModeGrey: "#242424";
-    readonly darkModeMovistarBlueDark: "#4C7389";
 };
 export declare const getMovistarSkin: GetSkin;

package/dist/skins/movistar.js

@@ -7,21 +7,32 @@ var _color = require("../utils/color");
 var _constants = require("./constants");
 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',
@@ -36,8 +47,7 @@ var palette = {
     movistarProminentBlueLight70: '#546874',
     // specific for dark mode:
     darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeMovistarBlueDark: '#4C7389'
+    darkModeGrey: '#242424'
 };
 exports.palette = palette;
 var getMovistarSkin = function getMovistarSkin(variant) {
@@ -51,7 +61,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             backgroundBrand: palette.movistarBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey1,
-            backgroundSkeletonInverse: palette.movistarBlueDark,
+            backgroundSkeletonInverse: palette.movistarBlue55,
             navigationBarBackground: palette.movistarBlue,
             backgroundAlternative: palette.grey1,
             backgroundFeedbackBottom: palette.movistarBlue,
@@ -63,50 +73,50 @@ var getMovistarSkin = function getMovistarSkin(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: (0, _color).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,
@@ -124,11 +134,24 @@ var getMovistarSkin = function getMovistarSkin(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,
@@ -149,13 +172,13 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             buttonLinkBackgroundSelectedInverse: (0, _color).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,
@@ -170,7 +193,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             loadingBar: palette.movistarBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.movistarBlueLight30,
+            toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.grey2,
             divider: (0, _color).applyAlpha(palette.white, 0.05),
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),
@@ -184,13 +207,26 @@ var getMovistarSkin = function getMovistarSkin(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: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: (0, _color).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') {