@telefonica/mistica 10.14.2 → 10.15.0

package/dist-es/list.js

@@ -16,7 +16,7 @@ import { useAriaId, useTheme } from './hooks';
 import { useIsInverseVariant } from './theme-variant-context';
 import IconChevron from './icons/icon-chevron';
 import Switch from './switch-component';
-import RadioButton from './radio-button';
+import RadioButton, { useRadioContext } from './radio-button';
 import Checkbox from './checkbox';
 import { Boxed } from './boxed';
 import Divider from './divider';
@@ -84,18 +84,24 @@ function _slicedToArray(arr, i) {
 var useStyles = createUseStyles(function(param) {
     var colors = param.colors, mq = param.mq;
     return {
+        disabled: {
+            opacity: 0.5
+        },
         hover: _defineProperty({
         }, mq.supportsHover, {
             '&:hover': {
                 background: function(param) {
-                    var isInverse = param.isInverse;
-                    return isInverse ? 'initial' : colors.backgroundAlternative;
+                    var isInverse = param.isInverse, disabled = param.disabled;
+                    return isInverse || disabled ? 'initial' : colors.backgroundAlternative;
                 }
             }
         }),
         rowContent: {
             width: '100%',
-            cursor: 'pointer'
+            cursor: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 'default' : 'pointer';
+            }
         },
         hoverDisabled: {
             cursor: 'initial',
@@ -166,8 +172,9 @@ var useStyles = createUseStyles(function(param) {
         }
     };
 });
+var _obj;
 var Content = function(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId;
+    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -188,7 +195,8 @@ var Content = function(param) {
         return(/*#__PURE__*/ _jsx(Box, {
             paddingLeft: 16,
             children: /*#__PURE__*/ _jsx("div", {
-                className: classNames(classes.center, classes.badge),
+                className: classNames(classes.center, classes.badge, _defineProperty({
+                }, classes.disabled, disabled)),
                 children: badge === true ? /*#__PURE__*/ _jsx(Badge, {
                 }) : /*#__PURE__*/ _jsx(Badge, {
                     value: badge
@@ -196,21 +204,49 @@ var Content = function(param) {
             })
         }));
     };
+    var renderRight = function() {
+        switch(type){
+            case 'chevron':
+                return(/*#__PURE__*/ _jsx(Box, {
+                    paddingLeft: 16,
+                    className: classNames(classes.center, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: /*#__PURE__*/ _jsx(IconChevron, {
+                        color: isInverse ? colors.inverse : colors.neutralMedium,
+                        direction: "right"
+                    })
+                }));
+            case 'control':
+                return(/*#__PURE__*/ _jsx("div", {
+                    className: classes.right,
+                    children: right
+                }));
+            case 'custom':
+                return(/*#__PURE__*/ _jsx("div", {
+                    className: classNames(classes.right, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: right
+                }));
+            default:
+                return null;
+        }
+    };
     return(/*#__PURE__*/ _jsxs(Box, {
         paddingY: 16,
         className: classes.content,
         children: [
             asset && /*#__PURE__*/ _jsx(Box, {
                 paddingRight: 16,
-                className: classNames(_defineProperty({
-                }, classes.center, shouldCenter)),
+                className: classNames((_obj = {
+                }, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ _jsx("div", {
                     className: classes.asset,
                     children: asset
                 })
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: classes.rowBody,
+                className: classNames(classes.rowBody, _defineProperty({
+                }, classes.disabled, disabled)),
                 style: {
                     justifyContent: shouldCenter ? 'center' : 'flex-start'
                 },
@@ -255,17 +291,7 @@ var Content = function(param) {
                 })
             }),
             renderBadge(),
-            type === 'chevron' ? /*#__PURE__*/ _jsx(Box, {
-                paddingLeft: 16,
-                className: classes.center,
-                children: /*#__PURE__*/ _jsx(IconChevron, {
-                    color: isInverse ? colors.inverse : colors.neutralMedium,
-                    direction: "right"
-                })
-            }) : right ? /*#__PURE__*/ _jsx("div", {
-                className: classes.right,
-                children: right
-            }) : null
+            renderRight()
         ]
     }));
 };
@@ -295,10 +321,13 @@ var useControlState = function(param) {
 var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = useAriaId();
     var isInverse = useIsInverseVariant();
+    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
+    var radioContext = useRadioContext();
+    var disabled = props.disabled || props.radioValue !== undefined && radioContext.disabled;
     var classes = useStyles({
-        isInverse: isInverse
+        isInverse: isInverse,
+        disabled: disabled
     });
-    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
     var ref1 = _slicedToArray(useControlState(props.switch || props.checkbox || {
     }), 2), isChecked = ref1[0], toggle = ref1[1];
     var renderContent = function(param) {
@@ -316,7 +345,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             type: type,
             right: right,
             extra: extra,
-            labelId: labelId
+            labelId: labelId,
+            disabled: disabled
         });
     };
     var renderTouchableContent = function(props) {
@@ -344,6 +374,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             onPress: props.onPress,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -355,6 +386,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             fullPageOnWebView: props.fullPageOnWebView,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -366,6 +398,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             newTab: props.newTab,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -377,19 +410,22 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             className: classes.dualActionContainer,
             children: [
                 /*#__PURE__*/ _jsx(Touchable, {
+                    disabled: disabled,
                     onPress: props.onPress,
                     role: role,
                     className: classNames(classes.dualActionLeft, classes.hover),
                     children: renderContent({
-                        type: 'custom',
+                        type: 'basic',
                         labelId: titleId
                     })
                 }),
                 /*#__PURE__*/ _jsx(Touchable, {
+                    disabled: disabled,
                     className: classes.dualActionRight,
                     onPress: toggle,
                     dataAttributes: dataAttributes,
                     children: /*#__PURE__*/ _jsx(Control, {
+                        disabled: disabled,
                         name: name,
                         checked: isChecked,
                         "aria-labelledby": titleId,
@@ -402,6 +438,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
         }) : /*#__PURE__*/ _jsx("div", {
             className: classNames(classes.rowContent, classes.hover),
             children: /*#__PURE__*/ _jsx(Control, {
+                disabled: disabled,
                 dataAttributes: dataAttributes,
                 name: name,
                 checked: isChecked,
@@ -412,7 +449,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                         role: role,
                         children: renderContent({
                             labelId: labelId,
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ _jsx(Stack, {
                                 space: "around",
                                 children: control
@@ -442,7 +479,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                     /*#__PURE__*/ return _jsx(Box, {
                         paddingX: 16,
                         children: renderContent({
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ _jsx(Stack, {
                                 space: "around",
                                 children: radio

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 = '10.14.2';
+export var PACKAGE_VERSION = '10.15.0';

package/dist-es/radio-button.js

@@ -103,6 +103,7 @@ var useRadioButtonStyles = createUseStyles(function(param) {
     var colors = param.colors, isIos = param.isIos;
     return {
         outerCircle: {
+            cursor: 'pointer',
             flexShrink: 0,
             width: 20,
             height: 20,
@@ -135,11 +136,11 @@ var useRadioButtonStyles = createUseStyles(function(param) {
             transform: 'scale(1)'
         },
         radioButton: {
-            cursor: 'default',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.5 : 1;
-            }
+            cursor: 'default'
+        },
+        disabled: {
+            opacity: 0.5,
+            cursor: 'default'
         }
     };
 });
@@ -157,6 +158,7 @@ var RadioContext = /*#__PURE__*/ React.createContext({
 export var useRadioContext = function() {
     return React.useContext(RadioContext);
 };
+var _obj;
 var RadioButton = function(_param) {
     var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, ["value", "id", "dataAttributes"]);
     var ref = useRadioContext(), disabled = ref.disabled, selectedValue = ref.selectedValue, focusableValue = ref.focusableValue, select = ref.select, selectNext = ref.selectNext, selectPrev = ref.selectPrev;
@@ -164,7 +166,6 @@ var RadioButton = function(_param) {
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;
     var classes = useRadioButtonStyles({
-        disabled: disabled,
         checked: checked
     });
     var ref2 = useTheme(), isIos = ref2.isIos;
@@ -191,8 +192,8 @@ var RadioButton = function(_param) {
         }
     };
     var radio = /*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.outerCircle, _defineProperty({
-        }, classes.outerCircleChecked, checked)),
+        className: classnames(classes.outerCircle, (_obj = {
+        }, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: !isIos && /*#__PURE__*/ _jsx("div", {
             className: classnames(classes.innerCircle, _defineProperty({
             }, classes.innerCircleChecked, checked))
@@ -230,7 +231,10 @@ var RadioButton = function(_param) {
                 /*#__PURE__*/ _jsx(Text3, {
                     regular: true,
                     as: "div",
-                    children: rest.children
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: rest.children
+                    })
                 })
             ]
         })

package/dist-es/select.js

@@ -77,10 +77,6 @@ var _obj, _obj1;
 var useStyles = createUseStyles(function(theme) {
     return {
         selectContainer: (_obj = {
-            cursor: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 'auto' : 'pointer';
-            },
             position: 'relative',
             outline: 0
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
@@ -111,24 +107,17 @@ var useStyles = createUseStyles(function(theme) {
             width: '100%',
             height: '100%',
             textOverflow: 'ellipsis',
-            '&:disabled': {
-                color: theme.colors.textDisabled
-            },
             appearance: 'none',
             cursor: function(param) {
                 var disabled = param.disabled;
-                return disabled ? 'inherit' : 'pointer';
+                return disabled ? 'default' : 'pointer';
             }
         },
         arrowDown: {
             position: 'absolute',
             right: 16,
             top: 'calc(50% - 10px)',
-            pointerEvents: 'none',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            pointerEvents: 'none'
         },
         selectText: {
             position: 'absolute',
@@ -141,9 +130,10 @@ var useStyles = createUseStyles(function(theme) {
                 return label ? 27 : 17;
             },
             fontSize: 16,
-            color: function(param) {
+            color: theme.colors.textPrimary,
+            opacity: function(param) {
                 var disabled = param.disabled;
-                return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
+                return disabled ? 0.5 : 1;
             },
             maxWidth: '100%',
             textOverflow: 'ellipsis',
@@ -451,7 +441,6 @@ var Select = function(param) {
                 error: error,
                 forId: inputId,
                 inputState: isFocused ? 'focused' : ((ref15 = value !== null && value !== void 0 ? value : valueState) !== null && ref15 !== void 0 ? ref15 : (ref11 = inputRef.current) === null || ref11 === void 0 ? void 0 : ref11.value) ? 'filled' : 'default',
-                disabled: disabled,
                 optional: optional,
                 children: label
             }),

package/dist-es/skins/blau.js

@@ -59,40 +59,29 @@ export var getBlauSkin = function() {
             borderSelected: palette.blauBlueSecondary60,
             // BUTTONS
             buttonDangerBackground: palette.blauRed,
-            buttonDangerBackgroundDisabled: palette.blauRed20,
             buttonDangerBackgroundSelected: palette.blauRed70,
             buttonDangerBackgroundHover: palette.blauRed70,
             buttonLinkBackgroundSelected: palette.blauPurple10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.3),
             buttonPrimaryBackground: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundDisabled: palette.blauBlueSecondary20,
-            buttonPrimaryBackgroundDisabledInverse: palette.blauBlueSecondary30,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
             buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
             buttonPrimaryBackgroundSelectedInverse: palette.blauBluePrimary30,
             buttonSecondaryBackground: palette.blauBlueSecondary,
-            buttonSecondaryBackgroundDisabled: palette.blauBlueSecondary20,
             buttonSecondaryBackgroundSelected: palette.blauBlueSecondary60,
-            buttonSecondaryBorderDisabledInverse: palette.blauBlueSecondary20,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.blauBluePrimary30,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.blauBlueSecondary,
-            textButtonPrimaryInverseDisabled: palette.blauBluePrimary10,
             textButtonPrimaryInverseSelected: palette.blauBlueSecondary60,
             textButtonSecondary: palette.blauBlueSecondary,
-            textButtonSecondaryDisabled: palette.blauBlueSecondary30,
             textButtonSecondarySelected: palette.blauBlueSecondary60,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.blauBlueSecondary20,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.blauPurple,
             textLinkInverse: palette.white,
             textLinkDanger: palette.blauRed,
-            textLinkDangerDisabled: palette.blauRed20,
-            textLinkDisabled: palette.blauPurple30,
             textLinkSnackbar: palette.blauPurple30,
             // CONTROLS
             control: palette.grey2,
@@ -124,7 +113,6 @@ export var getBlauSkin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey3,
             textAmount: palette.blauBlueSecondary,
             // STATES
             error: palette.blauRed,
@@ -157,32 +145,21 @@ export var getBlauSkin = function() {
             borderLight: palette.darkModeBlack,
             border: palette.darkModeGrey,
             // BUTTONS
-            buttonDangerBackgroundDisabled: palette.darkModeGrey,
             buttonLinkBackgroundSelected: applyAlpha(palette.blauPurple, 0.3),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.blauPurple, 0.3),
-            buttonPrimaryBackgroundDisabled: palette.darkModeGrey,
-            buttonPrimaryBackgroundDisabledInverse: palette.darkModeGrey,
             buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
             buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
-            buttonSecondaryBackgroundDisabled: palette.darkModeGrey,
-            buttonSecondaryBorderDisabledInverse: palette.darkModeGrey,
             buttonSecondaryBorderInverse: palette.blauBluePrimary,
             buttonSecondaryBorderSelectedInverse: palette.blauBlueSecondary60,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.blauBlueSecondary60,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.blauBlueSecondary60,
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
-            textLinkDisabled: palette.grey5,
-            textLinkDangerDisabled: palette.grey5,
             // CONTROLS
             control: palette.darkModeGrey,
             loadingBar: palette.blauBluePrimary,
@@ -205,7 +182,6 @@ export var getBlauSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.blauBlueSecondary,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,

package/dist-es/skins/movistar.js

@@ -57,40 +57,29 @@ export var getMovistarSkin = function(variant) {
             borderSelected: palette.movistarGreen,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundDisabled: palette.pepperLight30,
             buttonDangerBackgroundSelected: palette.pepperDark,
             buttonDangerBackgroundHover: palette.pepperDark,
             buttonLinkBackgroundSelected: palette.movistarBlueLight10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.movistarGreen,
-            buttonPrimaryBackgroundDisabled: palette.movistarGreenLight50,
-            buttonPrimaryBackgroundDisabledInverse: palette.movistarBlueLight50,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
             buttonPrimaryBackgroundHover: palette.movistarGreenDark,
             buttonPrimaryBackgroundSelectedInverse: palette.movistarBlueLight50,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundDisabled: palette.movistarGreenLight50,
             buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
-            buttonSecondaryBorderDisabledInverse: palette.movistarBlueLight50,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.movistarBlueLight50,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.movistarBlue,
-            textButtonPrimaryInverseDisabled: palette.movistarBlueLight30,
             textButtonPrimaryInverseSelected: palette.movistarBlue,
             textButtonSecondary: palette.movistarGreen,
-            textButtonSecondaryDisabled: palette.movistarGreenLight50,
             textButtonSecondarySelected: palette.movistarGreenDark,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.movistarBlueLight50,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.movistarBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkDangerDisabled: palette.pepperLight30,
-            textLinkDisabled: palette.movistarBlueLight50,
             textLinkSnackbar: palette.movistarBlueLight50,
             // CONTROLS
             control: palette.grey3,
@@ -122,7 +111,6 @@ export var getMovistarSkin = function(variant) {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey4,
             textAmount: palette.movistarBlue,
             // STATES
             error: palette.pepper,
@@ -151,36 +139,26 @@ export var getMovistarSkin = function(variant) {
             skeletonWave: palette.grey5,
             borderLight: palette.darkModeBlack,
             border: palette.darkModeGrey,
-            buttonDangerBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.movistarGreen,
-            buttonPrimaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.movistarGreen,
             buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
             buttonPrimaryBackgroundHover: palette.movistarGreenDark,
             buttonPrimaryBackgroundSelectedInverse: palette.movistarGreenDark,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
-            buttonSecondaryBorderDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.movistarGreen,
             buttonSecondaryBorderSelectedInverse: palette.movistarGreenDark,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.movistarBlue,
             textLinkInverse: palette.movistarBlue,
-            textLinkDisabled: palette.grey6,
             control: palette.grey6,
             controlActivated: palette.movistarBlue,
             loadingBar: palette.movistarBlue,
@@ -200,7 +178,6 @@ export var getMovistarSkin = function(variant) {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.movistarBlueLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,

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

@@ -63,40 +63,29 @@ export var getO2ClassicSkin = function() {
             borderSelected: palette.o2Gem,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundDisabled: palette.pepperLight30,
             buttonDangerBackgroundSelected: palette.pepperDark,
             buttonDangerBackgroundHover: palette.pepperDark,
             buttonLinkBackgroundSelected: palette.o2SkyBlueLight10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2SkyBlue,
-            buttonPrimaryBackgroundDisabled: palette.o2SkyBlueLight50,
-            buttonPrimaryBackgroundDisabledInverse: palette.o2SkyBlueLight50,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.o2SkyBlueDark,
             buttonPrimaryBackgroundHover: palette.o2SkyBlueDark,
             buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlueLight50,
             buttonSecondaryBackground: palette.o2SkyBlue,
-            buttonSecondaryBackgroundDisabled: palette.o2SkyBlueLight50,
             buttonSecondaryBackgroundSelected: palette.o2SkyBlueDark,
-            buttonSecondaryBorderDisabledInverse: palette.o2SkyBlueLight50,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.o2SkyBlueLight50,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.o2SkyBlue,
-            textButtonPrimaryInverseDisabled: palette.o2SkyBlueLight30,
             textButtonPrimaryInverseSelected: palette.o2SkyBlue,
             textButtonSecondary: palette.o2SkyBlue,
-            textButtonSecondaryDisabled: palette.o2SkyBlueLight50,
             textButtonSecondarySelected: palette.o2SkyBlueDark,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.o2SkyBlueLight50,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.o2SkyBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkDangerDisabled: palette.pepperLight30,
-            textLinkDisabled: palette.o2SkyBlueLight,
             textLinkSnackbar: palette.o2SkyBlueLight,
             // CONTROLS
             control: palette.grey3,
@@ -130,7 +119,6 @@ export var getO2ClassicSkin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey4,
             textAmount: palette.o2SkyBlue,
             // STATES
             error: palette.pepper,
@@ -160,32 +148,21 @@ export var getO2ClassicSkin = function() {
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
             borderSelected: palette.o2Gem,
-            buttonDangerBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.o2SkyBlue,
             buttonPrimaryBackgroundSelectedInverse: palette.o2SkyBlueDark,
-            buttonSecondaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
-            buttonSecondaryBorderDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.o2SkyBlue,
             buttonSecondaryBorderSelectedInverse: palette.o2SkyBlueDark,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.o2SkyBlueLight,
             textLinkInverse: palette.o2SkyBlueLight,
-            textLinkDangerDisabled: palette.grey5,
-            textLinkDisabled: palette.darkModeGrey6,
             textLinkSnackbar: palette.o2SkyBlueLight,
             control: palette.darkModeGrey6,
             controlActivated: palette.o2Gem,
@@ -210,7 +187,6 @@ export var getO2ClassicSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.o2SkyBlueLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,