@telefonica/mistica 11.12.1 → 12.1.0

package/dist-es/skins/movistar.js

@@ -66,27 +66,27 @@ export var getMovistarSkin = function(variant) {
             borderLight: palette.grey1,
             border: palette.grey3,
             borderDark: palette.grey5,
-            borderSelected: palette.movistarGreen,
+            borderSelected: palette.movistarBlue,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
             buttonDangerBackgroundSelected: palette.pepper55,
             buttonDangerBackgroundHover: palette.pepper55,
             buttonLinkBackgroundSelected: palette.movistarBlue10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
-            buttonPrimaryBackground: palette.movistarGreen,
+            buttonPrimaryBackground: palette.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
-            buttonPrimaryBackgroundHover: palette.movistarGreen60,
+            buttonPrimaryBackgroundSelected: palette.movistarBlue55,
+            buttonPrimaryBackgroundHover: palette.movistarBlue55,
             buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue30,
-            buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
+            buttonSecondaryBackground: palette.movistarBlue,
+            buttonSecondaryBackgroundSelected: palette.movistarBlue55,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.movistarBlue30,
             textButtonPrimary: palette.white,
             textButtonPrimaryInverse: palette.movistarBlue,
             textButtonPrimaryInverseSelected: palette.movistarBlue,
-            textButtonSecondary: palette.movistarGreen,
-            textButtonSecondarySelected: palette.movistarGreen60,
+            textButtonSecondary: palette.movistarBlue,
+            textButtonSecondarySelected: palette.movistarBlue55,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.movistarBlue,
@@ -112,18 +112,17 @@ export var getMovistarSkin = function(variant) {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.movistarBlue,
-            brandDark: palette.movistarBlue55,
+            brandHigh: palette.movistarBlue55,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             promo: palette.purple,
             highlight: palette.pink,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.movistarBlue,
             // STATES
             error: palette.pepper,
             success: palette.movistarGreen,
@@ -136,18 +135,15 @@ export var getMovistarSkin = function(variant) {
             textAppBar: palette.grey4,
             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
+            successLow: palette.movistarGreen10,
+            warningLow: palette.egg10,
+            errorLow: palette.pepper10,
+            promoLow: palette.purple10,
+            brandLow: palette.movistarBlue10,
+            successHigh: palette.movistarGreen70,
+            warningHigh: palette.egg80,
+            errorHigh: palette.pepper70,
+            promoHigh: palette.purple70
         },
         darkModeColors: {
             brand: palette.movistarBlue,
@@ -166,15 +162,15 @@ export var getMovistarSkin = function(variant) {
             border: palette.darkModeGrey,
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackground: palette.movistarGreen,
-            buttonPrimaryBackgroundInverse: palette.movistarGreen,
-            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
-            buttonPrimaryBackgroundHover: palette.movistarGreen60,
-            buttonPrimaryBackgroundSelectedInverse: palette.movistarGreen60,
-            buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
-            buttonSecondaryBorderInverse: palette.movistarGreen,
-            buttonSecondaryBorderSelectedInverse: palette.movistarGreen60,
+            buttonPrimaryBackground: palette.movistarBlue,
+            buttonPrimaryBackgroundInverse: palette.movistarBlue,
+            buttonPrimaryBackgroundSelected: palette.movistarBlue55,
+            buttonPrimaryBackgroundHover: palette.movistarBlue55,
+            buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue55,
+            buttonSecondaryBackground: palette.movistarBlue,
+            buttonSecondaryBackgroundSelected: palette.movistarBlue55,
+            buttonSecondaryBorderInverse: palette.movistarBlue,
+            buttonSecondaryBorderSelectedInverse: palette.movistarBlue55,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryInverse: palette.grey2,
             textButtonPrimaryInverseSelected: palette.grey2,
@@ -194,7 +190,7 @@ export var getMovistarSkin = function(variant) {
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
-            brandDark: palette.grey6,
+            brandHigh: palette.grey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -203,7 +199,6 @@ export var getMovistarSkin = function(variant) {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.movistarBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -211,23 +206,40 @@ export var getMovistarSkin = function(variant) {
             textAppBar: palette.grey5,
             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
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.movistarGreen40,
+            warningHigh: palette.egg40,
+            errorHigh: palette.pepper40,
+            promoHigh: palette.purple40
+        },
+        textPresets: {
+            text5: {
+                weight: "bold"
+            },
+            text6: {
+                weight: "bold"
+            },
+            text7: {
+                weight: "bold"
+            },
+            text8: {
+                weight: "bold"
+            },
+            text9: {
+                weight: "bold"
+            },
+            text10: {
+                weight: "bold"
+            }
         }
     };
     if (variant === "prominent") {
         skin.colors.brand = palette.movistarProminentBlue;
-        skin.colors.brandDark = palette.movistarProminentBlueDark;
+        skin.colors.brandHigh = palette.movistarProminentBlueDark;
         skin.colors.backgroundBrand = palette.movistarProminentBlue;
         skin.colors.navigationBarBackground = palette.movistarProminentBlue;
         skin.colors.backgroundFeedbackBottom = palette.movistarProminentBlue;

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

@@ -120,10 +120,10 @@ export var getO2ClassicSkin = function() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.o2Blue,
-            brandDark: palette.o2Blue55,
+            brandHigh: palette.o2Blue55,
             inverse: palette.white,
             neutralHigh: palette.grey6,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             neutralMedium: palette.grey5,
             promo: palette.pink,
             highlight: palette.pink,
@@ -131,7 +131,6 @@ export var getO2ClassicSkin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.o2SkyBlue,
             // STATES
             error: palette.pepper,
             success: palette.o2Green,
@@ -144,18 +143,15 @@ export var getO2ClassicSkin = function() {
             textAppBar: palette.grey4,
             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
+            successLow: palette.o2Green10,
+            warningLow: palette.orange10,
+            errorLow: palette.pepper10,
+            promoLow: palette.pink10,
+            brandLow: palette.o2Blue10,
+            successHigh: palette.o2Green75,
+            warningHigh: palette.orange80,
+            errorHigh: palette.pepper70,
+            promoHigh: palette.pink60
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -201,7 +197,7 @@ export var getO2ClassicSkin = function() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.o2SkyBlue,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -210,7 +206,6 @@ export var getO2ClassicSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2SkyBlueLight45,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -218,18 +213,15 @@ export var getO2ClassicSkin = function() {
             textAppBar: palette.grey5,
             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
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.o2Green40,
+            warningHigh: palette.orange40,
+            errorHigh: palette.pepper40,
+            promoHigh: palette.pink40
         }
     };
 };

package/dist-es/skins/o2.js

@@ -110,18 +110,17 @@ export var getO2Skin = function() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.o2BluePrimary,
-            brandDark: palette.o2BluePrimary70,
+            brandHigh: palette.o2BluePrimary70,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             promo: palette.o2Purple,
             highlight: palette.o2Pink,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.o2BluePrimary,
             // STATES
             error: palette.pepper,
             success: palette.o2Green,
@@ -134,18 +133,15 @@ export var getO2Skin = function() {
             textAppBar: palette.grey4,
             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
+            successLow: palette.o2Green10,
+            warningLow: palette.o2Orange10,
+            errorLow: palette.pepper10,
+            promoLow: palette.o2Purple10,
+            brandLow: palette.o2BluePrimary10,
+            successHigh: palette.o2Green80,
+            warningHigh: palette.o2Orange75,
+            errorHigh: palette.pepper60,
+            promoHigh: palette.o2Purple
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -195,7 +191,7 @@ export var getO2Skin = function() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.o2BluePrimary30,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -204,7 +200,6 @@ export var getO2Skin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2BluePrimary15,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -212,18 +207,15 @@ export var getO2Skin = function() {
             textAppBar: palette.grey5,
             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
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.o2Green40,
+            warningHigh: palette.o2Orange40,
+            errorHigh: palette.pepper40,
+            promoHigh: palette.o2Purple30
         }
     };
 };

package/dist-es/skins/telefonica.js

@@ -37,7 +37,8 @@ export var palette = {
     white: "#FFFFFF",
     // specific for dark mode:
     darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 export var getTelefonicaSkin = function() {
     return {
@@ -105,7 +106,7 @@ export var getTelefonicaSkin = function() {
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
             brand: palette.telefonicaBlue,
-            brandDark: palette.telefonicaBlue70,
+            brandHigh: palette.telefonicaBlue70,
             inverse: palette.white,
             neutralHigh: palette.grey9,
             neutralMedium: palette.grey5,
@@ -116,7 +117,6 @@ export var getTelefonicaSkin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.telefonicaBlue,
             // STATES
             error: palette.coral,
             success: palette.turquoise,
@@ -129,18 +129,15 @@ export var getTelefonicaSkin = function() {
             textAppBar: palette.grey4,
             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
+            successLow: palette.turquoise10,
+            warningLow: palette.ambar10,
+            errorLow: palette.coral10,
+            promoLow: palette.orchid10,
+            brandLow: palette.grey1,
+            successHigh: palette.turquoise70,
+            warningHigh: palette.ambar70,
+            errorHigh: palette.coral70,
+            promoHigh: palette.orchid70
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -187,16 +184,15 @@ export var getTelefonicaSkin = function() {
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.grey8,
-            brandDark: palette.grey6,
+            brandHigh: palette.grey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey6,
+            neutralLow: palette.darkModeGrey6,
             textPrimary: palette.grey2,
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.telefonicaBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -204,18 +200,15 @@ export var getTelefonicaSkin = function() {
             textAppBar: palette.grey5,
             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.turquoise40,
-            textTagWarning: palette.ambar40,
-            textTagError: palette.coral40,
-            textTagPromo: palette.orchid40,
-            textTagActive: palette.telefonicaBlue30,
-            textTagInactive: palette.grey4
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.turquoise40,
+            warningHigh: palette.ambar40,
+            errorHigh: palette.coral40,
+            promoHigh: palette.orchid40
         }
     };
 };

package/dist-es/skins/vivo.js

@@ -104,18 +104,17 @@ export var getVivoSkin = function() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.vivoPurple,
-            brandDark: palette.vivoPurpleDark,
+            brandHigh: palette.vivoPurpleDark,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             promo: palette.vivoPurple,
             highlight: palette.pink,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.vivoPurple,
             // STATES
             error: palette.pepper,
             success: palette.vivoGreen,
@@ -128,18 +127,15 @@ export var getVivoSkin = function() {
             textAppBar: palette.grey4,
             textAppBarSelected: palette.vivoPurple,
             // TAGS
-            tagBackgroundSuccess: palette.vivoGreenLight10,
-            tagBackgroundWarning: palette.orangeLight10,
-            tagBackgroundError: palette.pepperLight10,
-            tagBackgroundPromo: palette.vivoPurpleLight10,
-            tagBackgroundActive: palette.vivoPurpleLight10,
-            tagBackgroundInactive: palette.grey1,
-            textTagSuccess: palette.vivoGreenDark,
-            textTagWarning: palette.orangeDark,
-            textTagError: palette.pepperDark80,
-            textTagPromo: palette.vivoPurple,
-            textTagActive: palette.vivoPurple,
-            textTagInactive: palette.grey5
+            successLow: palette.vivoGreenLight10,
+            warningLow: palette.orangeLight10,
+            errorLow: palette.pepperLight10,
+            promoLow: palette.vivoPurpleLight10,
+            brandLow: palette.vivoPurpleLight10,
+            successHigh: palette.vivoGreenDark,
+            warningHigh: palette.orangeDark,
+            errorHigh: palette.pepperDark80,
+            promoHigh: palette.vivoPurple
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -189,7 +185,7 @@ export var getVivoSkin = function() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.vivoPurpleLight80,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -199,7 +195,6 @@ export var getVivoSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.vivoPurpleLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -207,18 +202,15 @@ export var getVivoSkin = function() {
             textAppBar: palette.grey5,
             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.vivoGreenLight30,
-            textTagWarning: palette.orangeLight40,
-            textTagError: palette.pepperLight40,
-            textTagPromo: palette.vivoPurpleLight50,
-            textTagActive: palette.vivoPurpleLight50,
-            textTagInactive: palette.grey4
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.vivoGreenLight30,
+            warningHigh: palette.orangeLight40,
+            errorHigh: palette.pepperLight40,
+            promoHigh: palette.vivoPurpleLight50
         }
     };
 };

package/dist-es/snackbar.js

@@ -96,7 +96,7 @@ var useStyles = createUseStyles(function(theme) {
             minWidth: SNACKBAR_MIN_WIDTH,
             minHeight: SNACKBAR_MIN_HEIGHT,
             padding: "".concat(PADDING_Y, "px ").concat(PADDING_X, "px"),
-            borderRadius: 4,
+            borderRadius: 8,
             position: "fixed",
             bottom: 24,
             zIndex: 1000,

package/dist-es/spinner.js

@@ -211,7 +211,6 @@ var Spinner = function(param) {
                 r: "30",
                 role: "presentation",
                 stroke: color,
-                strokeLinecap: "square",
                 strokeWidth: "6"
             })
         ]

package/dist-es/tag.js

@@ -114,28 +114,28 @@ var Tag = function(param) {
     }
     var tagTypeToColors = {
         promo: [
-            colors.textTagPromo,
-            colors.tagBackgroundPromo
+            colors.promoHigh,
+            colors.promoLow
         ],
         active: [
-            colors.textTagActive,
-            colors.tagBackgroundActive
+            colors.brand,
+            colors.brandLow
         ],
         inactive: [
-            colors.textTagInactive,
-            colors.tagBackgroundInactive
+            colors.neutralMedium,
+            colors.neutralLow
         ],
         success: [
-            colors.textTagSuccess,
-            colors.tagBackgroundSuccess
+            colors.successHigh,
+            colors.successLow
         ],
         warning: [
-            colors.textTagWarning,
-            colors.tagBackgroundWarning
+            colors.warningHigh,
+            colors.warningLow
         ],
         error: [
-            colors.textTagError,
-            colors.tagBackgroundError
+            colors.errorHigh,
+            colors.errorLow
         ]
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];

package/dist-es/text-field-components.js

@@ -250,7 +250,7 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
         border: (_obj1 = {
             overflow: "hidden",
             border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 4,
+            borderRadius: 8,
             height: function(param) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 60;