@telefonica/mistica 11.12.0 → 12.0.0

package/dist/radio-button.d.ts

@@ -20,6 +20,7 @@ declare type PropsRender = {
     }) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
+    'aria-labelledby'?: string;
 };
 declare type PropsChildren = {
     value: string;
@@ -27,6 +28,7 @@ declare type PropsChildren = {
     children?: React.ReactNode;
     render?: undefined;
     dataAttributes?: DataAttributes;
+    'aria-labelledby'?: string;
 };
 declare const RadioButton: React.FC<PropsRender | PropsChildren>;
 declare type RadioGroupProps = {

package/dist/radio-button.js

@@ -200,13 +200,14 @@ var useRadioContext = function useRadioContext() {
 };
 exports.useRadioContext = useRadioContext;
 var RadioButton = function RadioButton(_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 = (0, _hooks).useAriaId();
+    var labelId = (0, _hooks).useAriaId(ariaLabelledby);
     var ref1 = React.useRef(null);
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;

package/dist/radio-button.js.flow

@@ -21,12 +21,14 @@ declare type PropsRender = {
     checked: boolean,
   }) => React.Node,
   dataAttributes?: DataAttributes,
+  "aria-labelledby"?: string,
 };
 declare type PropsChildren = {
   value: string,
   id?: string,
   children?: React.Node,
   dataAttributes?: DataAttributes,
+  "aria-labelledby"?: string,
 };
 declare var RadioButton: React.ComponentType<PropsRender | PropsChildren>;
 declare type RadioGroupProps = {

package/dist/responsive-layout.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 export declare const useResonsiveLayoutMargin: () => null | number;
 declare type Props = {
     children: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
+    dataAttributes?: DataAttributes;
 };
 declare const ResponsiveLayout: React.FC<Props>;
 export default ResponsiveLayout;

package/dist/responsive-layout.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -47,6 +48,22 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(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]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
@@ -88,19 +105,20 @@ var useResonsiveLayoutMargin = function useResonsiveLayoutMargin() {
 };
 exports.useResonsiveLayoutMargin = useResonsiveLayoutMargin;
 var ResponsiveLayout = function ResponsiveLayout(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 = (0, _hooks).useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-            className: (0, _classnames).default(classes.container, className),
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+            className: (0, _classnames).default(classes.container, className)
+        }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
                 children: children
             })
-        })
+        }))
     });
 };
 var _default = ResponsiveLayout;

package/dist/responsive-layout.js.flow

@@ -1,11 +1,13 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare export var useResonsiveLayoutMargin: () => null | number;
 declare type Props = {
   children: React.Node,
   fullWidth?: boolean,
   className?: string,
+  dataAttributes?: DataAttributes,
 };
 declare var ResponsiveLayout: React.ComponentType<Props>;
 declare export default typeof ResponsiveLayout;

package/dist/select.js

@@ -203,7 +203,7 @@ var useStyles = (0, _jss).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/skins/blau.d.ts

@@ -36,5 +36,6 @@ export declare const palette: {
     readonly white: "#FFFFFF";
     readonly darkModeBlack: "#191919";
     readonly darkModeGrey: "#242424";
+    readonly darkModeGrey6: "#313235";
 };
 export declare const getBlauSkin: GetKnownSkin;

package/dist/skins/blau.js

@@ -42,7 +42,8 @@ var palette = {
     white: "#FFFFFF",
     // specific for dark mode:
     darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 exports.palette = palette;
 var getBlauSkin = function getBlauSkin() {
@@ -111,16 +112,15 @@ var getBlauSkin = function getBlauSkin() {
             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,
@@ -135,18 +135,15 @@ var getBlauSkin = function getBlauSkin() {
             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
@@ -193,16 +190,15 @@ var getBlauSkin = function getBlauSkin() {
             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,
@@ -210,18 +206,15 @@ var getBlauSkin = function getBlauSkin() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.blauGreen30,
-            textTagWarning: palette.blauYellow40,
-            textTagError: palette.blauRed40,
-            textTagPromo: palette.blauPurple30,
-            textTagActive: palette.blauBluePrimary30,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.blauGreen30,
+            warningHigh: palette.blauYellow40,
+            errorHigh: palette.blauRed40,
+            promoHigh: palette.blauPurple30
         }
     };
 };

package/dist/skins/blau.js.flow

@@ -38,5 +38,6 @@ declare export var palette: {
   +white: "#FFFFFF",
   +darkModeBlack: "#191919",
   +darkModeGrey: "#242424",
+  +darkModeGrey6: "#313235",
 };
 declare export var getBlauSkin: GetKnownSkin;

package/dist/skins/movistar.js

@@ -70,27 +70,27 @@ var getMovistarSkin = function getMovistarSkin(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: (0, _color).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,
@@ -116,18 +116,17 @@ var getMovistarSkin = function getMovistarSkin(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,
@@ -140,18 +139,15 @@ var getMovistarSkin = function getMovistarSkin(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,
@@ -170,15 +166,15 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             border: palette.darkModeGrey,
             buttonLinkBackgroundSelected: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _color).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,
@@ -198,7 +194,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             divider: (0, _color).applyAlpha(palette.white, 0.05),
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
-            brandDark: palette.grey6,
+            brandHigh: palette.grey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -207,7 +203,6 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.movistarBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -215,23 +210,40 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.movistarGreen40,
-            textTagWarning: palette.egg40,
-            textTagError: palette.pepper40,
-            textTagPromo: palette.purple40,
-            textTagActive: palette.movistarBlue40,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).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/skins/o2-classic.js

@@ -124,10 +124,10 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             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,
@@ -135,7 +135,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.o2SkyBlue,
             // STATES
             error: palette.pepper,
             success: palette.o2Green,
@@ -148,18 +147,15 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             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,
@@ -205,7 +201,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.o2SkyBlue,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -214,7 +210,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2SkyBlueLight45,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -222,18 +217,15 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.o2Green40,
-            textTagWarning: palette.orange40,
-            textTagError: palette.pepper40,
-            textTagPromo: palette.pink40,
-            textTagActive: palette.o2Blue30,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.o2Green40,
+            warningHigh: palette.orange40,
+            errorHigh: palette.pepper40,
+            promoHigh: palette.pink40
         }
     };
 };

package/dist/skins/o2.js

@@ -114,18 +114,17 @@ var getO2Skin = function getO2Skin() {
             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,
@@ -138,18 +137,15 @@ var getO2Skin = function getO2Skin() {
             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,
@@ -199,7 +195,7 @@ var getO2Skin = function getO2Skin() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.o2BluePrimary30,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -208,7 +204,6 @@ var getO2Skin = function getO2Skin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.o2BluePrimary15,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -216,18 +211,15 @@ var getO2Skin = function getO2Skin() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.o2Green40,
-            textTagWarning: palette.o2Orange40,
-            textTagError: palette.pepper40,
-            textTagPromo: palette.o2Purple30,
-            textTagActive: palette.o2BluePrimary15,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.o2Green40,
+            warningHigh: palette.o2Orange40,
+            errorHigh: palette.pepper40,
+            promoHigh: palette.o2Purple30
         }
     };
 };

package/dist/skins/telefonica.d.ts

@@ -34,5 +34,6 @@ export declare const palette: {
     readonly white: "#FFFFFF";
     readonly darkModeBlack: "#191919";
     readonly darkModeGrey: "#242424";
+    readonly darkModeGrey6: "#313235";
 };
 export declare const getTelefonicaSkin: GetKnownSkin;