@telefonica/mistica 10.16.0 → 10.20.0

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

package/dist/skins/movistar.js.flow

@@ -3,21 +3,32 @@
 import type { GetSkin } from "./types";
 declare 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",
@@ -32,6 +43,5 @@ declare export var palette: {
   +movistarProminentBlueLight70: "#546874",
   +darkModeBlack: "#191919",
   +darkModeGrey: "#242424",
-  +darkModeMovistarBlueDark: "#4C7389",
 };
 declare export var getMovistarSkin: GetSkin;

package/dist/skins/o2-classic.d.ts

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

package/dist/skins/o2-classic.js

@@ -7,13 +7,15 @@ var _color = require("../utils/color");
 var _constants = require("./constants");
 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',
@@ -21,14 +23,24 @@ 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',
@@ -69,24 +81,24 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             borderSelected: palette.o2Gem,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundSelected: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
+            buttonDangerBackgroundSelected: palette.pepper55,
+            buttonDangerBackgroundHover: palette.pepper55,
             buttonLinkBackgroundSelected: palette.o2SkyBlueLight10,
             buttonLinkBackgroundSelectedInverse: (0, _color).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,
@@ -109,12 +121,12 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             dividerInverse: (0, _color).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,
@@ -132,11 +144,24 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             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,
@@ -157,9 +182,9 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             buttonLinkBackgroundSelected: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _color).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,
@@ -193,13 +218,26 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             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: (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.orange40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.pink40,
+            textTagActive: palette.o2Blue30,
+            textTagInactive: palette.grey4
         }
     };
 };

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";