@telefonica/mistica 10.18.0 → 10.22.0

package/dist/skins/o2-classic.js.flow

@@ -3,13 +3,15 @@
 import type { GetSkin } from "./types";
 declare export var palette: {
   +o2Blue: "#032B5A",
-  +o2BlueDark: "#04264E",
-  +o2BlueLight60: "#6C8BAF",
+  +o2Blue10: "#E6EAEE",
+  +o2Blue30: "#8195AC",
+  +o2Blue45: "#6C8BAF",
+  +o2Blue55: "#04264E",
   +o2SkyBlue: "#0090D0",
-  +o2SkyBlueDark: "#057DB2",
+  +o2SkyBlue55: "#057DB2",
   +o2SkyBlueLight: "#65B4E4",
-  +o2SkyBlueLight50: "#80C7E7",
-  +o2SkyBlueLight30: "#D0E8F6",
+  +o2SkyBlueLight45: "#80C7E7",
+  +o2SkyBlueLight20: "#D0E8F6",
   +o2SkyBlueLight10: "#E9F5FB",
   +o2DeepSkyBlue: "#7FD4FE",
   +o2Gem: "#01B7B4",
@@ -17,14 +19,24 @@ declare export var palette: {
   +o2GemLight30: "#99E2E1",
   +o2Yellow: "#FFCC00",
   +o2Green: "#84B50F",
-  +o2GreenLight: "#DAE8B7",
+  +o2Green10: "#F3F8E7",
+  +o2Green40: "#A9CB57",
+  +o2Green75: "#4D621D",
   +pepper: "#FF374A",
-  +pepperDark: "#D73241",
-  +pepperLight30: "#FFC3C8",
+  +pepper10: "#FFEBED",
+  +pepper20: "#FFC3C8",
+  +pepper40: "#FF7380",
+  +pepper55: "#D73241",
+  +pepper70: "#B22634",
   +orange: "#FF7F41",
-  +orangeLight: "#FFD6C2",
+  +orange10: "#FFF2EC",
+  +orange40: "#FFA57A",
+  +orange80: "#73391D",
   +coral: "#FF706E",
   +pink: "#EB3C7D",
+  +pink10: "#FDEBF2",
+  +pink40: "#F59DBE",
+  +pink60: "#BC3064",
   +o2GradientFirst: "#102550",
   +o2GradientSecond: "#0B4680",
   +o2GradientThird: "#0D71AD",

package/dist/skins/o2.d.ts

@@ -1,30 +1,32 @@
 import type { GetSkin } from './types';
 export declare const palette: {
     readonly o2BluePrimary: "#0019A5";
-    readonly o2BluePrimaryDark: "#000066";
-    readonly o2BluePrimaryLight50: "#808CD2";
-    readonly o2BluePrimaryLight10: "#CCD1ED";
-    readonly o2BlueMid: "#007BB2";
-    readonly o2BlueMidDark: "#006795";
+    readonly o2BluePrimary70: "#000066";
+    readonly o2BluePrimary30: "#808CD2";
+    readonly o2BluePrimary15: "#CCD1ED";
+    readonly o2BluePrimary10: "#E5E8F6";
+    readonly o2BlueMid: "#0090D0";
     readonly o2BlueLight: "#41B6E6";
-    readonly o2BlueLight60: "#8DD3F0";
     readonly o2BlueLight30: "#C6E9F7";
-    readonly o2BlueLight10: "#ECF7FC";
     readonly o2Teal: "#01B7B4";
-    readonly o2TealDark: "#099E9B";
-    readonly o2TealLight: "#B1E4E3";
     readonly o2Green: "#91C90E";
-    readonly o2GreenLight: "#DEEEB7";
+    readonly o2Green10: "#F4FAE7";
+    readonly o2Green40: "#B2D956";
+    readonly o2Green80: "#415A06";
     readonly o2Yellow: "#FEDB00";
-    readonly o2YellowLight: "#FEF6C3";
     readonly o2Orange: "#FF7F41";
-    readonly o2OrangeLight: "#FFD6C2";
-    readonly o2Coral: "#FF706E";
-    readonly o2Pink: "#CB31A0";
-    readonly o2Purple: "#953698";
+    readonly o2Orange10: "#FFF2EC";
+    readonly o2Orange40: "#FFA57A";
+    readonly o2Orange75: "#A6522A";
+    readonly o2Pink: "#E45DBF";
+    readonly o2Purple: "#952D98";
+    readonly o2Purple10: "#F4EAF5";
+    readonly o2Purple30: "#CA9ACB";
     readonly pepper: "#FF374A";
-    readonly pepperDark: "#D73241";
-    readonly pepperLight30: "#FFC3C8";
+    readonly pepper10: "#FEEBED";
+    readonly pepper20: "#FCC3C9";
+    readonly pepper40: "#FF7380";
+    readonly pepper60: "#C32B3D";
     readonly grey1: "#F6F6F6";
     readonly grey2: "#EEEEEE";
     readonly grey3: "#DDDDDD";

package/dist/skins/o2.js

@@ -7,30 +7,32 @@ var _color = require("../utils/color");
 var _constants = require("./constants");
 var palette = {
     o2BluePrimary: '#0019A5',
-    o2BluePrimaryDark: '#000066',
-    o2BluePrimaryLight50: '#808CD2',
-    o2BluePrimaryLight10: '#CCD1ED',
-    o2BlueMid: '#007BB2',
-    o2BlueMidDark: '#006795',
+    o2BluePrimary70: '#000066',
+    o2BluePrimary30: '#808CD2',
+    o2BluePrimary15: '#CCD1ED',
+    o2BluePrimary10: '#E5E8F6',
+    o2BlueMid: '#0090D0',
     o2BlueLight: '#41B6E6',
-    o2BlueLight60: '#8DD3F0',
     o2BlueLight30: '#C6E9F7',
-    o2BlueLight10: '#ECF7FC',
     o2Teal: '#01B7B4',
-    o2TealDark: '#099E9B',
-    o2TealLight: '#B1E4E3',
     o2Green: '#91C90E',
-    o2GreenLight: '#DEEEB7',
+    o2Green10: '#F4FAE7',
+    o2Green40: '#B2D956',
+    o2Green80: '#415A06',
     o2Yellow: '#FEDB00',
-    o2YellowLight: '#FEF6C3',
     o2Orange: '#FF7F41',
-    o2OrangeLight: '#FFD6C2',
-    o2Coral: '#FF706E',
-    o2Pink: '#CB31A0',
-    o2Purple: '#953698',
+    o2Orange10: '#FFF2EC',
+    o2Orange40: '#FFA57A',
+    o2Orange75: '#A6522A',
+    o2Pink: '#E45DBF',
+    o2Purple: '#952D98',
+    o2Purple10: '#F4EAF5',
+    o2Purple30: '#CA9ACB',
     pepper: '#FF374A',
-    pepperDark: '#D73241',
-    pepperLight30: '#FFC3C8',
+    pepper10: '#FEEBED',
+    pepper20: '#FCC3C9',
+    pepper40: '#FF7380',
+    pepper60: '#C32B3D',
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
@@ -69,30 +71,30 @@ var getO2Skin = function getO2Skin() {
             borderSelected: palette.o2BluePrimary,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundSelected: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
-            buttonLinkBackgroundSelected: palette.o2BluePrimaryLight10,
+            buttonDangerBackgroundSelected: palette.pepper60,
+            buttonDangerBackgroundHover: palette.pepper60,
+            buttonLinkBackgroundSelected: palette.o2BluePrimary15,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.o2BluePrimaryDark,
-            buttonPrimaryBackgroundHover: palette.o2BluePrimaryDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.o2BluePrimaryLight50,
+            buttonPrimaryBackgroundSelected: palette.o2BluePrimary70,
+            buttonPrimaryBackgroundHover: palette.o2BluePrimary70,
+            buttonPrimaryBackgroundSelectedInverse: palette.o2BluePrimary30,
             buttonSecondaryBackground: palette.o2BluePrimary,
-            buttonSecondaryBackgroundSelected: palette.o2BluePrimaryDark,
+            buttonSecondaryBackgroundSelected: palette.o2BluePrimary70,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.o2BluePrimaryLight50,
+            buttonSecondaryBorderSelectedInverse: palette.o2BluePrimary30,
             textButtonPrimary: palette.white,
             textButtonPrimaryInverse: palette.o2BluePrimary,
-            textButtonPrimaryInverseSelected: palette.o2BluePrimaryDark,
+            textButtonPrimaryInverseSelected: palette.o2BluePrimary70,
             textButtonSecondary: palette.o2BluePrimary,
-            textButtonSecondarySelected: palette.o2BluePrimaryDark,
+            textButtonSecondarySelected: palette.o2BluePrimary70,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.o2BluePrimary,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkSnackbar: palette.o2BluePrimaryLight50,
+            textLinkSnackbar: palette.o2BluePrimary30,
             // CONTROLS
             control: palette.grey3,
             controlActivated: palette.o2BluePrimary,
@@ -102,19 +104,19 @@ var getO2Skin = function getO2Skin() {
             loadingBarBackgroundInverse: palette.grey1,
             loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.o2BluePrimaryLight10,
+            toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
             // DIVIDERS
             divider: palette.grey2,
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.o2BluePrimary,
             // FEEDBACKS
-            badge: palette.pepperDark,
+            badge: palette.pepper60,
             feedbackErrorBackground: palette.pepper,
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.o2BluePrimary,
-            brandDark: palette.o2BluePrimaryDark,
+            brandDark: palette.o2BluePrimary70,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
@@ -132,11 +134,24 @@ var getO2Skin = function getO2Skin() {
             warning: palette.o2Orange,
             // BARS TEXTS
             textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.o2BluePrimaryLight50,
-            textNavigationSearchBarHint: palette.o2BluePrimaryLight50,
+            textNavigationBarSecondary: palette.o2BluePrimary30,
+            textNavigationSearchBarHint: palette.o2BluePrimary30,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.o2BluePrimary
+            textAppBarSelected: palette.o2BluePrimary,
+            // TAGS
+            tagBackgroundSuccess: palette.o2Green10,
+            tagBackgroundWarning: palette.o2Orange10,
+            tagBackgroundError: palette.pepper10,
+            tagBackgroundPromo: palette.o2Purple10,
+            tagBackgroundActive: palette.o2BluePrimary10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.o2Green80,
+            textTagWarning: palette.o2Orange75,
+            textTagError: palette.pepper60,
+            textTagPromo: palette.o2Purple,
+            textTagActive: palette.o2BluePrimary,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -172,10 +187,10 @@ var getO2Skin = function getO2Skin() {
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
             textButtonSecondaryInverseSelected: palette.grey4,
-            textLink: palette.o2BluePrimaryLight50,
-            textLinkInverse: palette.o2BluePrimaryLight50,
+            textLink: palette.o2BluePrimary30,
+            textLinkInverse: palette.o2BluePrimary30,
             control: palette.darkModeGrey6,
-            controlActivated: palette.o2BluePrimaryLight50,
+            controlActivated: palette.o2BluePrimary30,
             loadingBar: palette.darkModeO2BluePrimary,
             loadingBarBackground: palette.darkModeGrey6,
             loadingBarBackgroundInverse: palette.grey1,
@@ -187,7 +202,7 @@ var getO2Skin = function getO2Skin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
-            brand: palette.o2BluePrimaryLight50,
+            brand: palette.o2BluePrimary30,
             brandDark: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
@@ -197,13 +212,26 @@ var getO2Skin = function getO2Skin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2BluePrimaryLight10,
+            textAmount: palette.o2BluePrimary15,
             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.o2Green40,
+            textTagWarning: palette.o2Orange40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.o2Purple30,
+            textTagActive: palette.o2BluePrimary15,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist/skins/o2.js.flow

@@ -3,30 +3,32 @@
 import type { GetSkin } from "./types";
 declare export var palette: {
   +o2BluePrimary: "#0019A5",
-  +o2BluePrimaryDark: "#000066",
-  +o2BluePrimaryLight50: "#808CD2",
-  +o2BluePrimaryLight10: "#CCD1ED",
-  +o2BlueMid: "#007BB2",
-  +o2BlueMidDark: "#006795",
+  +o2BluePrimary70: "#000066",
+  +o2BluePrimary30: "#808CD2",
+  +o2BluePrimary15: "#CCD1ED",
+  +o2BluePrimary10: "#E5E8F6",
+  +o2BlueMid: "#0090D0",
   +o2BlueLight: "#41B6E6",
-  +o2BlueLight60: "#8DD3F0",
   +o2BlueLight30: "#C6E9F7",
-  +o2BlueLight10: "#ECF7FC",
   +o2Teal: "#01B7B4",
-  +o2TealDark: "#099E9B",
-  +o2TealLight: "#B1E4E3",
   +o2Green: "#91C90E",
-  +o2GreenLight: "#DEEEB7",
+  +o2Green10: "#F4FAE7",
+  +o2Green40: "#B2D956",
+  +o2Green80: "#415A06",
   +o2Yellow: "#FEDB00",
-  +o2YellowLight: "#FEF6C3",
   +o2Orange: "#FF7F41",
-  +o2OrangeLight: "#FFD6C2",
-  +o2Coral: "#FF706E",
-  +o2Pink: "#CB31A0",
-  +o2Purple: "#953698",
+  +o2Orange10: "#FFF2EC",
+  +o2Orange40: "#FFA57A",
+  +o2Orange75: "#A6522A",
+  +o2Pink: "#E45DBF",
+  +o2Purple: "#952D98",
+  +o2Purple10: "#F4EAF5",
+  +o2Purple30: "#CA9ACB",
   +pepper: "#FF374A",
-  +pepperDark: "#D73241",
-  +pepperLight30: "#FFC3C8",
+  +pepper10: "#FEEBED",
+  +pepper20: "#FCC3C9",
+  +pepper40: "#FF7380",
+  +pepper60: "#C32B3D",
   +grey1: "#F6F6F6",
   +grey2: "#EEEEEE",
   +grey3: "#DDDDDD",

package/dist/skins/telefonica.d.ts

@@ -1,23 +1,27 @@
 import type { GetSkin } from './types';
 export declare const palette: {
     readonly telefonicaBlue: "#0066FF";
-    readonly telefonicaBlueDark: "#0356C9";
-    readonly telefonicaBlueLight50: "#80B2FF";
-    readonly telefonicaBlueLight30: "#B3D1FF";
-    readonly telefonicaBlueLight20: "#EBF3FF";
+    readonly telefonicaBlue10: "#E5F0FF";
+    readonly telefonicaBlue20: "#B2D1FF";
+    readonly telefonicaBlue30: "#80B3FF";
+    readonly telefonicaBlue70: "#0356C9";
     readonly ambar: "#EAC344";
-    readonly ambarLight: "#F5E98A";
-    readonly ambarDark: "#AD842D";
+    readonly ambar10: "#FDF9EC";
+    readonly ambar40: "#F0D57C";
+    readonly ambar70: "#69581F";
     readonly coral: "#E66C64";
-    readonly coralLight: "#E3A19A";
-    readonly coralDark: "#912C31";
+    readonly coral10: "#FDF0EF";
+    readonly coral40: "#E3A19A";
+    readonly coral70: "#D50000";
+    readonly coral80: "#912C31";
     readonly orchid: "#C466EF";
-    readonly orchidDark: "#8A1A93";
-    readonly orchidLight: "#E7C2F8";
+    readonly orchid10: "#F9F0FD";
+    readonly orchid40: "#D694F4";
+    readonly orchid70: "#8947A7";
     readonly turquoise: "#59C2C9";
-    readonly turquoiseLight: "#67E0E5";
-    readonly turquoiseDark: "#3E8A8A";
-    readonly white: "#FFFFFF";
+    readonly turquoise10: "#EEF9FA";
+    readonly turquoise40: "#8BD4D9";
+    readonly turquoise70: "#3E888D";
     readonly grey1: "#F2F4FF";
     readonly grey2: "#D1D5E4";
     readonly grey3: "#B0B6CA";
@@ -27,6 +31,7 @@ export declare const palette: {
     readonly grey7: "#414B61";
     readonly grey8: "#2B3447";
     readonly grey9: "#031A34";
+    readonly white: "#FFFFFF";
     readonly darkModeBlack: "#191919";
     readonly darkModeGrey: "#242424";
 };

package/dist/skins/telefonica.js

@@ -7,23 +7,27 @@ var _color = require("../utils/color");
 var _constants = require("./constants");
 var palette = {
     telefonicaBlue: '#0066FF',
-    telefonicaBlueDark: '#0356C9',
-    telefonicaBlueLight50: '#80B2FF',
-    telefonicaBlueLight30: '#B3D1FF',
-    telefonicaBlueLight20: '#EBF3FF',
+    telefonicaBlue10: '#E5F0FF',
+    telefonicaBlue20: '#B2D1FF',
+    telefonicaBlue30: '#80B3FF',
+    telefonicaBlue70: '#0356C9',
     ambar: '#EAC344',
-    ambarLight: '#F5E98A',
-    ambarDark: '#AD842D',
+    ambar10: '#FDF9EC',
+    ambar40: '#F0D57C',
+    ambar70: '#69581F',
     coral: '#E66C64',
-    coralLight: '#E3A19A',
-    coralDark: '#912C31',
+    coral10: '#FDF0EF',
+    coral40: '#E3A19A',
+    coral70: '#D50000',
+    coral80: '#912C31',
     orchid: '#C466EF',
-    orchidDark: '#8A1A93',
-    orchidLight: '#E7C2F8',
+    orchid10: '#F9F0FD',
+    orchid40: '#D694F4',
+    orchid70: '#8947A7',
     turquoise: '#59C2C9',
-    turquoiseLight: '#67E0E5',
-    turquoiseDark: '#3E8A8A',
-    white: '#FFFFFF',
+    turquoise10: '#EEF9FA',
+    turquoise40: '#8BD4D9',
+    turquoise70: '#3E888D',
     grey1: '#F2F4FF',
     grey2: '#D1D5E4',
     grey3: '#B0B6CA',
@@ -33,6 +37,7 @@ var palette = {
     grey7: '#414B61',
     grey8: '#2B3447',
     grey9: '#031A34',
+    white: '#FFFFFF',
     // specific for dark mode:
     darkModeBlack: '#191919',
     darkModeGrey: '#242424'
@@ -49,7 +54,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             backgroundBrand: palette.telefonicaBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey1,
-            backgroundSkeletonInverse: palette.telefonicaBlueDark,
+            backgroundSkeletonInverse: palette.telefonicaBlue70,
             navigationBarBackground: palette.telefonicaBlue,
             backgroundAlternative: palette.grey1,
             backgroundFeedbackBottom: palette.telefonicaBlue,
@@ -62,48 +67,48 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             // BUTTONS
             buttonDangerBackground: palette.coral,
             buttonDangerBackgroundDisabled: palette.grey2,
-            buttonDangerBackgroundSelected: palette.coralDark,
-            buttonDangerBackgroundHover: palette.coralDark,
+            buttonDangerBackgroundSelected: palette.coral80,
+            buttonDangerBackgroundHover: palette.coral80,
             buttonLinkBackgroundSelected: palette.grey1,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.telefonicaBlue,
             buttonPrimaryBackgroundDisabled: palette.grey2,
-            buttonPrimaryBackgroundDisabledInverse: palette.telefonicaBlueLight50,
+            buttonPrimaryBackgroundDisabledInverse: palette.telefonicaBlue30,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundHover: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlueLight50,
+            buttonPrimaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundHover: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlue30,
             buttonSecondaryBackground: palette.telefonicaBlue,
             buttonSecondaryBackgroundDisabled: palette.grey2,
-            buttonSecondaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonSecondaryBorderDisabledInverse: palette.telefonicaBlueLight50,
+            buttonSecondaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonSecondaryBorderDisabledInverse: palette.telefonicaBlue30,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlueLight50,
+            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlue30,
             textButtonPrimary: palette.white,
             textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.telefonicaBlue,
-            textButtonPrimaryInverseDisabled: palette.telefonicaBlueLight30,
+            textButtonPrimaryInverseDisabled: palette.telefonicaBlue20,
             textButtonPrimaryInverseSelected: palette.telefonicaBlue,
             textButtonSecondary: palette.telefonicaBlue,
             textButtonSecondaryDisabled: palette.grey2,
-            textButtonSecondarySelected: palette.telefonicaBlueDark,
+            textButtonSecondarySelected: palette.telefonicaBlue70,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.telefonicaBlueLight50,
-            textButtonSecondaryInverseSelected: palette.telefonicaBlueLight50,
+            textButtonSecondaryInverseDisabled: palette.telefonicaBlue30,
+            textButtonSecondaryInverseSelected: palette.telefonicaBlue30,
             textLink: palette.telefonicaBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.coral,
             textLinkDangerDisabled: palette.grey2,
             textLinkDisabled: palette.grey2,
-            textLinkSnackbar: palette.telefonicaBlueLight50,
+            textLinkSnackbar: palette.telefonicaBlue30,
             // CONTROLS
             control: palette.grey3,
             controlActivated: palette.telefonicaBlue,
             controlError: palette.coral,
-            loadingBar: palette.telefonicaBlueLight50,
-            loadingBarBackground: palette.telefonicaBlueDark,
-            loadingBarBackgroundInverse: palette.telefonicaBlueDark,
-            loadingBarInverse: palette.telefonicaBlueLight50,
+            loadingBar: palette.telefonicaBlue30,
+            loadingBarBackground: palette.telefonicaBlue70,
+            loadingBarBackgroundInverse: palette.telefonicaBlue70,
+            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -112,18 +117,18 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coralDark,
+            badge: palette.coral80,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
             brand: palette.telefonicaBlue,
-            brandDark: palette.telefonicaBlueDark,
+            brandDark: palette.telefonicaBlue70,
             inverse: palette.white,
             neutralHigh: palette.grey9,
             neutralMedium: palette.grey5,
             neutralLow: palette.grey1,
             promo: palette.orchid,
-            highlight: palette.coralLight,
+            highlight: palette.coral40,
             textPrimary: palette.grey9,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
@@ -140,7 +145,20 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textNavigationSearchBarHint: palette.grey1,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.telefonicaBlue
+            textAppBarSelected: palette.telefonicaBlue,
+            // TAGS
+            tagBackgroundSuccess: palette.turquoise10,
+            tagBackgroundWarning: palette.ambar10,
+            tagBackgroundError: palette.coral10,
+            tagBackgroundPromo: palette.orchid10,
+            tagBackgroundActive: palette.grey1,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.turquoise70,
+            textTagWarning: palette.ambar70,
+            textTagError: palette.coral70,
+            textTagPromo: palette.orchid70,
+            textTagActive: palette.telefonicaBlue,
+            textTagInactive: palette.grey6
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -163,15 +181,15 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             buttonPrimaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.telefonicaBlue,
-            buttonPrimaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundHover: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlueDark,
+            buttonPrimaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundHover: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlue70,
             buttonSecondaryBackground: palette.telefonicaBlue,
             buttonSecondaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
-            buttonSecondaryBackgroundSelected: palette.telefonicaBlueDark,
+            buttonSecondaryBackgroundSelected: palette.telefonicaBlue70,
             buttonSecondaryBorderDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.telefonicaBlue,
-            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlueDark,
+            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlue70,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryDisabled: palette.grey7,
             textButtonPrimaryInverse: palette.grey2,
@@ -190,8 +208,8 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlueDark,
-            loadingBarInverse: palette.telefonicaBlueLight50,
+            loadingBarBackgroundInverse: palette.telefonicaBlue70,
+            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,
@@ -209,13 +227,26 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
             textDisabled: palette.grey5,
-            textAmount: palette.telefonicaBlueLight50,
+            textAmount: palette.telefonicaBlue30,
             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.turquoise40,
+            textTagWarning: palette.ambar40,
+            textTagError: palette.coral40,
+            textTagPromo: palette.orchid40,
+            textTagActive: palette.telefonicaBlue30,
+            textTagInactive: palette.grey4
         }
     };
 };