@telefonica/mistica 11.12.2 → 12.0.0

package/dist-es/index.js

@@ -35,7 +35,6 @@ export { default as MasterDetailLayout } from "./master-detail-layout";
 export { default as NavigationBreadcrumbs } from "./navigation-breadcrumbs";
 export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8, Text9, Text10 } from "./text";
 export { default as Tag } from "./tag";
-export { default as SectionTitle } from "./section-title";
 export { Placeholder } from "./placeholder";
 export { Title1, Title2 } from "./title";
 export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
@@ -130,9 +129,6 @@ export { default as Icon5GRegular } from "./generated/mistica-icons/icon-5-g-reg
 export { default as IconAcademicFilled } from "./generated/mistica-icons/icon-academic-filled";
 export { default as IconAcademicLight } from "./generated/mistica-icons/icon-academic-light";
 export { default as IconAcademicRegular } from "./generated/mistica-icons/icon-academic-regular";
-export { default as IconAccesibilityFilled } from "./generated/mistica-icons/icon-accesibility-filled";
-export { default as IconAccesibilityLight } from "./generated/mistica-icons/icon-accesibility-light";
-export { default as IconAccesibilityRegular } from "./generated/mistica-icons/icon-accesibility-regular";
 export { default as IconAccessoriesFilled } from "./generated/mistica-icons/icon-accessories-filled";
 export { default as IconAccessoriesLight } from "./generated/mistica-icons/icon-accessories-light";
 export { default as IconAccessoriesRegular } from "./generated/mistica-icons/icon-accessories-regular";
@@ -370,9 +366,6 @@ export { default as IconCalendarRegular } from "./generated/mistica-icons/icon-c
 export { default as IconCallbackFilled } from "./generated/mistica-icons/icon-callback-filled";
 export { default as IconCallbackLight } from "./generated/mistica-icons/icon-callback-light";
 export { default as IconCallbackRegular } from "./generated/mistica-icons/icon-callback-regular";
-export { default as IconCallCenterUserSupportFilled } from "./generated/mistica-icons/icon-call-center-user-support-filled";
-export { default as IconCallCenterUserSupportLight } from "./generated/mistica-icons/icon-call-center-user-support-light";
-export { default as IconCallCenterUserSupportRegular } from "./generated/mistica-icons/icon-call-center-user-support-regular";
 export { default as IconCallDetailsFilled } from "./generated/mistica-icons/icon-call-details-filled";
 export { default as IconCallDetailsLight } from "./generated/mistica-icons/icon-call-details-light";
 export { default as IconCallDetailsRegular } from "./generated/mistica-icons/icon-call-details-regular";
@@ -739,6 +732,9 @@ export { default as IconExportLight } from "./generated/mistica-icons/icon-expor
 export { default as IconExportRegular } from "./generated/mistica-icons/icon-export-regular";
 export { default as IconEyeFilled } from "./generated/mistica-icons/icon-eye-filled";
 export { default as IconEyeLight } from "./generated/mistica-icons/icon-eye-light";
+export { default as IconEyeOffFilled } from "./generated/mistica-icons/icon-eye-off-filled";
+export { default as IconEyeOffLight } from "./generated/mistica-icons/icon-eye-off-light";
+export { default as IconEyeOffRegular } from "./generated/mistica-icons/icon-eye-off-regular";
 export { default as IconEyeRegular } from "./generated/mistica-icons/icon-eye-regular";
 export { default as IconFamilyFilled } from "./generated/mistica-icons/icon-family-filled";
 export { default as IconFamilyLight } from "./generated/mistica-icons/icon-family-light";
@@ -1146,9 +1142,9 @@ export { default as IconMoonRegular } from "./generated/mistica-icons/icon-moon-
 export { default as IconMouseFilled } from "./generated/mistica-icons/icon-mouse-filled";
 export { default as IconMouseLight } from "./generated/mistica-icons/icon-mouse-light";
 export { default as IconMouseRegular } from "./generated/mistica-icons/icon-mouse-regular";
+export { default as IconMultideviceFilled } from "./generated/mistica-icons/icon-multidevice-filled";
 export { default as IconMultideviceLight } from "./generated/mistica-icons/icon-multidevice-light";
-export { default as IconMultideviceoFilled } from "./generated/mistica-icons/icon-multideviceo-filled";
-export { default as IconMultideviceoRegular } from "./generated/mistica-icons/icon-multideviceo-regular";
+export { default as IconMultideviceRegular } from "./generated/mistica-icons/icon-multidevice-regular";
 export { default as IconMultisaveFilled } from "./generated/mistica-icons/icon-multisave-filled";
 export { default as IconMultisaveLight } from "./generated/mistica-icons/icon-multisave-light";
 export { default as IconMultisaveRegular } from "./generated/mistica-icons/icon-multisave-regular";
@@ -1234,6 +1230,7 @@ export { default as IconPacifierLight } from "./generated/mistica-icons/icon-pac
 export { default as IconPacifierRegular } from "./generated/mistica-icons/icon-pacifier-regular";
 export { default as IconPackageTrolleyFilled } from "./generated/mistica-icons/icon-package-trolley-filled";
 export { default as IconPackageTrolleyLight } from "./generated/mistica-icons/icon-package-trolley-light";
+export { default as IconPackageTrolleyRegular } from "./generated/mistica-icons/icon-package-trolley-regular";
 export { default as IconParkingFilled } from "./generated/mistica-icons/icon-parking-filled";
 export { default as IconParkingLight } from "./generated/mistica-icons/icon-parking-light";
 export { default as IconParkingRegular } from "./generated/mistica-icons/icon-parking-regular";
@@ -1369,9 +1366,6 @@ export { default as IconReportRegular } from "./generated/mistica-icons/icon-rep
 export { default as IconRestaurantFilled } from "./generated/mistica-icons/icon-restaurant-filled";
 export { default as IconRestaurantLight } from "./generated/mistica-icons/icon-restaurant-light";
 export { default as IconRestaurantRegular } from "./generated/mistica-icons/icon-restaurant-regular";
-export { default as IconRewardsFilled } from "./generated/mistica-icons/icon-rewards-filled";
-export { default as IconRewardsLight } from "./generated/mistica-icons/icon-rewards-light";
-export { default as IconRewardsRegular } from "./generated/mistica-icons/icon-rewards-regular";
 export { default as IconRewindFilled } from "./generated/mistica-icons/icon-rewind-filled";
 export { default as IconRewindLight } from "./generated/mistica-icons/icon-rewind-light";
 export { default as IconRewindRegular } from "./generated/mistica-icons/icon-rewind-regular";
@@ -1542,7 +1536,7 @@ export { default as IconTagFilled } from "./generated/mistica-icons/icon-tag-fil
 export { default as IconTagLight } from "./generated/mistica-icons/icon-tag-light";
 export { default as IconTagPoundFilled } from "./generated/mistica-icons/icon-tag-pound-filled";
 export { default as IconTagPoundLight } from "./generated/mistica-icons/icon-tag-pound-light";
-export { default as IconTagPoundregular } from "./generated/mistica-icons/icon-tag-poundregular";
+export { default as IconTagPoundRegular } from "./generated/mistica-icons/icon-tag-pound-regular";
 export { default as IconTagRegular } from "./generated/mistica-icons/icon-tag-regular";
 export { default as IconTalkFilled } from "./generated/mistica-icons/icon-talk-filled";
 export { default as IconTalkLight } from "./generated/mistica-icons/icon-talk-light";

package/dist-es/list.js

@@ -508,6 +508,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                     return /*#__PURE__*/ _jsx(Box, {
                         paddingX: 16,
                         children: renderContent({
+                            labelId: titleId,
                             type: "control",
                             right: function() {
                                 return /*#__PURE__*/ _jsx(Stack, {

package/dist-es/menu.js

@@ -104,7 +104,7 @@ var useStyles = createUseStyles(function(param1) {
                 var width = param.width;
                 return width !== null && width !== void 0 ? width : "100%";
             },
-            borderRadius: 4,
+            borderRadius: 8,
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
             backgroundColor: colors.backgroundContainer,
             transformOrigin: function(param) {

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "11.12.2";
+export var PACKAGE_VERSION = "12.0.0";

package/dist-es/password-field.js

@@ -105,7 +105,7 @@ import { useFieldProps } from "./form-context";
 import { TextFieldBaseAutosuggest } from "./text-field-base";
 import { useTheme } from "./hooks";
 import IconButton from "./icon-button";
-import IconAccesibilityRegular from "./generated/mistica-icons/icon-accesibility-regular";
+import IconEyeOffRegular from "./generated/mistica-icons/icon-eye-off-regular";
 import IconEyeRegular from "./generated/mistica-icons/icon-eye-regular";
 import { createUseStyles } from "./jss";
 var usePasswordAdornmentStyles = createUseStyles(function(theme) {
@@ -138,7 +138,7 @@ var PasswordAdornment = function(param) {
         size: 40,
         className: classes.shadow,
         style: style,
-        children: isVisible ? /*#__PURE__*/ _jsx(IconAccesibilityRegular, {}) : /*#__PURE__*/ _jsx(IconEyeRegular, {})
+        children: isVisible ? /*#__PURE__*/ _jsx(IconEyeOffRegular, {}) : /*#__PURE__*/ _jsx(IconEyeRegular, {})
     });
 };
 var PasswordField = function(_param) {

package/dist-es/popover.js

@@ -93,7 +93,7 @@ var useStyles = createUseStyles(function(theme) {
     return {
         arrow: {
             position: "absolute",
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             width: arrowSize,
             height: arrowSize,
             top: 0,
@@ -108,7 +108,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         arrowWrapper: {
             position: "absolute",
-            color: theme.colors.background,
+            color: theme.colors.backgroundContainer,
             width: arrowWrapperWidth,
             height: arrowWrapperHeight,
             overflow: "hidden"
@@ -121,9 +121,9 @@ var useStyles = createUseStyles(function(theme) {
             width: "auto",
             zIndex: 9,
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 4
+            borderRadius: 8
         },
         title: {
             marginBottom: 4,

package/dist-es/radio-button.js

@@ -167,13 +167,14 @@ export var useRadioContext = function() {
     return React.useContext(RadioContext);
 };
 var RadioButton = function(_param) {
-    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, [
+    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, ariaLabelledby = _param["aria-labelledby"], rest = _objectWithoutProperties(_param, [
         "value",
         "id",
-        "dataAttributes"
+        "dataAttributes",
+        "aria-labelledby"
     ]);
     var ref = useRadioContext(), disabled = ref.disabled, selectedValue = ref.selectedValue, focusableValue = ref.focusableValue, select = ref.select, selectNext = ref.selectNext, selectPrev = ref.selectPrev;
-    var labelId = useAriaId();
+    var labelId = useAriaId(ariaLabelledby);
     var ref1 = React.useRef(null);
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;

package/dist-es/responsive-layout.js

@@ -11,11 +11,27 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import classnames from "classnames";
 import { useScreenSize } from "./hooks";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
@@ -56,19 +72,20 @@ export var useResonsiveLayoutMargin = function() {
     return React.useContext(ResponsiveLayoutMarginContext);
 };
 var ResponsiveLayout = function(param) {
-    var children = param.children, className = param.className, fullWidth = param.fullWidth;
+    var children = param.children, className = param.className, fullWidth = param.fullWidth, dataAttributes = param.dataAttributes;
     var classes = useStyles();
     var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
     return /*#__PURE__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: classnames(classes.container, className),
+        children: /*#__PURE__*/ _jsx("div", _objectSpread({
+            className: classnames(classes.container, className)
+        }, getPrefixedDataAttributes(dataAttributes), {
             children: /*#__PURE__*/ _jsx("div", {
                 className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
                 children: children
             })
-        })
+        }))
     });
 };
 export default ResponsiveLayout;

package/dist-es/select.js

@@ -171,7 +171,7 @@ var useStyles = createUseStyles(function(theme) {
                 var optionsComputedProps = param.optionsComputedProps;
                 return optionsComputedProps.width;
             },
-            borderRadius: 4,
+            borderRadius: 8,
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
             backgroundColor: theme.colors.backgroundContainer,
             paddingTop: 8,

package/dist-es/skins/blau.js

@@ -39,7 +39,8 @@ export var palette = {
     white: "#FFFFFF",
     // specific for dark mode:
     darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 export var getBlauSkin = function() {
     return {
@@ -107,16 +108,15 @@ export var getBlauSkin = function() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.blauBluePrimary,
-            brandDark: palette.blauBlueSecondary,
+            brandHigh: palette.blauBlueSecondary,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey2,
+            neutralLow: palette.grey1,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.blauBlueSecondary,
             // STATES
             error: palette.blauRed,
             success: palette.blauGreen,
@@ -131,18 +131,15 @@ export var getBlauSkin = function() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.blauBlueSecondary60,
             // TAGS
-            tagBackgroundSuccess: palette.blauGreen10,
-            tagBackgroundWarning: palette.blauYellow10,
-            tagBackgroundError: palette.blauRed10,
-            tagBackgroundPromo: palette.blauPurple10,
-            tagBackgroundActive: palette.blauBlueSecondary10,
-            tagBackgroundInactive: palette.grey2,
-            textTagSuccess: palette.blauGreen70,
-            textTagWarning: palette.blauYellow70,
-            textTagError: palette.blauRed70,
-            textTagPromo: palette.blauPurple,
-            textTagActive: palette.blauBlueSecondary,
-            textTagInactive: palette.grey5
+            successLow: palette.blauGreen10,
+            warningLow: palette.blauYellow10,
+            errorLow: palette.blauRed10,
+            promoLow: palette.blauPurple10,
+            brandLow: palette.blauBlueSecondary10,
+            successHigh: palette.blauGreen70,
+            warningHigh: palette.blauYellow70,
+            errorHigh: palette.blauRed70,
+            promoHigh: palette.blauPurple
         },
         darkModeColors: {
             // BACKGROUNDS
@@ -189,16 +186,15 @@ export var getBlauSkin = function() {
             navigationBarDivider: palette.darkModeBlack,
             // GLOBAL
             brand: palette.blauBluePrimary,
-            brandDark: palette.grey5,
+            brandHigh: palette.grey5,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
-            neutralLow: palette.darkModeGrey,
+            neutralLow: palette.darkModeGrey6,
             textPrimary: palette.grey2,
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.blauBlueSecondary,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -206,18 +202,15 @@ export var getBlauSkin = 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.blauGreen30,
-            textTagWarning: palette.blauYellow40,
-            textTagError: palette.blauRed40,
-            textTagPromo: palette.blauPurple30,
-            textTagActive: palette.blauBluePrimary30,
-            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.blauGreen30,
+            warningHigh: palette.blauYellow40,
+            errorHigh: palette.blauRed40,
+            promoHigh: palette.blauPurple30
         }
     };
 };

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