@telefonica/mistica 10.18.0 → 10.22.0

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') {

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

@@ -1,14 +1,18 @@
 import { applyAlpha } from '../utils/color';
 import { O2_CLASSIC_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/classicO2-constants.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/classicO2-skin-schema.json
 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',
@@ -16,14 +20,24 @@ 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',
@@ -63,24 +77,24 @@ export var getO2ClassicSkin = function() {
             borderSelected: palette.o2Gem,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundSelected: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
+            buttonDangerBackgroundSelected: palette.pepper55,
+            buttonDangerBackgroundHover: palette.pepper55,
             buttonLinkBackgroundSelected: palette.o2SkyBlueLight10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2SkyBlue,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.o2SkyBlueDark,
-            buttonPrimaryBackgroundHover: palette.o2SkyBlueDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlueLight50,
+            buttonPrimaryBackgroundSelected: palette.o2SkyBlue55,
+            buttonPrimaryBackgroundHover: palette.o2SkyBlue55,
+            buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlueLight45,
             buttonSecondaryBackground: palette.o2SkyBlue,
-            buttonSecondaryBackgroundSelected: palette.o2SkyBlueDark,
+            buttonSecondaryBackgroundSelected: palette.o2SkyBlue55,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.o2SkyBlueLight50,
+            buttonSecondaryBorderSelectedInverse: palette.o2SkyBlueLight45,
             textButtonPrimary: palette.white,
             textButtonPrimaryInverse: palette.o2SkyBlue,
             textButtonPrimaryInverseSelected: palette.o2SkyBlue,
             textButtonSecondary: palette.o2SkyBlue,
-            textButtonSecondarySelected: palette.o2SkyBlueDark,
+            textButtonSecondarySelected: palette.o2SkyBlue55,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.o2SkyBlue,
@@ -103,12 +117,12 @@ export var getO2ClassicSkin = function() {
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.o2Blue,
             // FEEDBACKS
-            badge: palette.pepperDark,
+            badge: palette.pepper55,
             feedbackErrorBackground: palette.pepper,
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.o2Blue,
-            brandDark: palette.o2BlueDark,
+            brandDark: palette.o2Blue55,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralLow: palette.grey3,
@@ -126,11 +140,24 @@ export var getO2ClassicSkin = function() {
             warning: palette.orange,
             // BARS TEXTS
             textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.o2BlueLight60,
-            textNavigationSearchBarHint: palette.o2BlueLight60,
+            textNavigationBarSecondary: palette.o2Blue45,
+            textNavigationSearchBarHint: palette.o2Blue45,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.o2Blue
+            textAppBarSelected: palette.o2Blue,
+            // TAGS
+            tagBackgroundSuccess: palette.o2Green10,
+            tagBackgroundWarning: palette.orange10,
+            tagBackgroundError: palette.pepper10,
+            tagBackgroundPromo: palette.pink10,
+            tagBackgroundActive: palette.o2Blue10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.o2Green75,
+            textTagWarning: palette.orange80,
+            textTagError: palette.pepper70,
+            textTagPromo: palette.pink60,
+            textTagActive: palette.o2Blue,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -151,9 +178,9 @@ export var getO2ClassicSkin = function() {
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.o2SkyBlue,
-            buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlueDark,
+            buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlue55,
             buttonSecondaryBorderInverse: palette.o2SkyBlue,
-            buttonSecondaryBorderSelectedInverse: palette.o2SkyBlueDark,
+            buttonSecondaryBorderSelectedInverse: palette.o2SkyBlue55,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryInverse: palette.grey2,
             textButtonPrimaryInverseSelected: palette.grey2,
@@ -187,13 +214,26 @@ export var getO2ClassicSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2SkyBlueLight50,
+            textAmount: palette.o2SkyBlueLight45,
             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.o2Green40,
+            textTagWarning: palette.orange40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.pink40,
+            textTagActive: palette.o2Blue30,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist-es/skins/o2.js

@@ -1,31 +1,35 @@
 import { applyAlpha } from '../utils/color';
 import { O2_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/o2-constants.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/o2-skin-schema.json
 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',
@@ -63,30 +67,30 @@ export var getO2Skin = function() {
             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: 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,
@@ -96,19 +100,19 @@ export var getO2Skin = function() {
             loadingBarBackgroundInverse: palette.grey1,
             loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.o2BluePrimaryLight10,
+            toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
             // DIVIDERS
             divider: palette.grey2,
             dividerInverse: 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,
@@ -126,11 +130,24 @@ export var getO2Skin = function() {
             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,
@@ -166,10 +183,10 @@ export var getO2Skin = function() {
             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,
@@ -181,7 +198,7 @@ export var getO2Skin = function() {
             dividerInverse: 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,
@@ -191,13 +208,26 @@ export var getO2Skin = function() {
             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: 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.o2Green40,
+            textTagWarning: palette.o2Orange40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.o2Purple30,
+            textTagActive: palette.o2BluePrimary15,
+            textTagInactive: palette.grey4
         }
     };
 };