feat(Tag): Use new tokens in tags (#1054)

This PR provide flexible customization and solve accessibility issues in
future skin improvements

src/skins/blau.tsx

@@ -167,7 +167,7 @@ export const getBlauSkin: GetKnownSkin = () => {
  tagTextError: palette.blauRed70,
  tagBackgroundPromo: palette.blauPurple10,
  tagBackgroundActive: palette.blauBlueSecondary10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.blauGreen10,
  tagBackgroundWarning: palette.blauYellow10,
  tagBackgroundError: palette.blauRed10,

src/skins/movistar.tsx

@@ -171,7 +171,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
  tagTextError: palette.pepper70,
  tagBackgroundPromo: palette.purple10,
  tagBackgroundActive: palette.movistarBlue10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.movistarGreen10,
  tagBackgroundWarning: palette.egg10,
  tagBackgroundError: palette.pepper10,

src/skins/o2.tsx

@@ -171,7 +171,7 @@ export const getO2Skin: GetKnownSkin = () => {
  tagTextError: palette.pepper60,
  tagBackgroundPromo: palette.o2Purple10,
  tagBackgroundActive: palette.o2BluePrimary10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.o2Green10,
  tagBackgroundWarning: palette.o2Orange10,
  tagBackgroundError: palette.pepper10,

src/skins/telefonica.tsx

@@ -165,7 +165,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
  tagTextError: palette.coral70,
  tagBackgroundPromo: palette.orchid10,
  tagBackgroundActive: palette.telefonicaBlue10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.turquoise10,
  tagBackgroundWarning: palette.ambar10,
  tagBackgroundError: palette.coral10,

src/skins/tu.tsx

@@ -169,7 +169,7 @@ export const getTuSkin: GetKnownSkin = () => {
  tagTextError: palette.red70,
  tagBackgroundPromo: palette.blue10,
  tagBackgroundActive: palette.blue10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.green10,
  tagBackgroundWarning: palette.orange20,
  tagBackgroundError: palette.red10,

src/skins/vivo-new.tsx

@@ -165,7 +165,7 @@ export const getVivoNewSkin: GetKnownSkin = () => {
  tagTextError: palette.pepperDark80,
  tagBackgroundPromo: palette.vivoPurpleLight10,
  tagBackgroundActive: palette.vivoPurpleLight10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.vivoGreenLight10,
  tagBackgroundWarning: palette.orangeLight10,
  tagBackgroundError: palette.pepperLight10,

src/skins/vivo.tsx

@@ -165,7 +165,7 @@ export const getVivoSkin: GetKnownSkin = () => {
  tagTextError: palette.pepperDark80,
  tagBackgroundPromo: palette.vivoPurpleLight10,
  tagBackgroundActive: palette.vivoPurpleLight10,
- tagBackgroundInactive: palette.grey2,
+ tagBackgroundInactive: palette.grey1,
  tagBackgroundSuccess: palette.vivoGreenLight10,
  tagBackgroundWarning: palette.orangeLight10,
  tagBackgroundError: palette.pepperLight10,

src/tag.tsx

@@ -31,28 +31,27 @@ const {colors} = vars;
 const Tag: React.FC<TagProps> = ({Icon, children, dataAttributes, type = 'promo', badge}) => {
  const {textPresets} = useTheme();
  const themeVariant = useThemeVariant();
- const isInverse = themeVariant === 'inverse';
  const badgeValue = badge === true ? undefined : badge || 0;
 
  if (!children) {
  return null;
  }
 
  const tagTypeToColors = {
- // [textColor, inverseTextColor, backgroundColor]
- promo: [colors.promoHigh, colors.promoHighInverse, colors.promoLow],
- active: [colors.brand, colors.brand, colors.brandLow],
+ // [textColor, backgroundColor]
+ promo: [colors.tagTextPromo, colors.tagBackgroundPromo],
+ active: [colors.tagTextActive, colors.tagBackgroundActive],
  inactive: [
- colors.neutralMedium,
- colors.neutralMediumInverse,
- themeVariant === 'alternative' ? colors.neutralLowAlternative : colors.neutralLow,
+ colors.tagTextInactive,
+ // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
+ themeVariant === 'alternative' ? colors.neutralLowAlternative : colors.tagBackgroundInactive,
  ],
- success: [colors.successHigh, colors.successHighInverse, colors.successLow],
- warning: [colors.warningHigh, colors.warningHighInverse, colors.warningLow],
- error: [colors.errorHigh, colors.errorHighInverse, colors.errorLow],
+ success: [colors.tagTextSuccess, colors.tagBackgroundSuccess],
+ warning: [colors.tagTextWarning, colors.tagBackgroundWarning],
+ error: [colors.tagTextError, colors.tagBackgroundError],
  } as const;
 
- const [textColor, inverseTextColor, backgroundColor] = tagTypeToColors[type];
+ const [textColor, backgroundColor] = tagTypeToColors[type];
 
  return (
  <span
@@ -62,22 +61,18 @@ const Tag: React.FC<TagProps> = ({Icon, children, dataAttributes, type = 'promo'
  sprinkles({
  paddingLeft: Icon ? 8 : 12,
  paddingRight: badgeValue !== 0 ? 8 : 12,
- background: isInverse ? colors.inverse : backgroundColor,
+ background: backgroundColor,
  })
  )}
  >
  {Icon && (
  <Box paddingRight={4}>
- <Icon
- color={isInverse ? inverseTextColor : textColor}
- size={pxToRem(16)}
- className={sprinkles({display: 'block'})}
- />
+ <Icon color={textColor} size={pxToRem(16)} className={sprinkles({display: 'block'})} />
  </Box>
  )}
  <ThemeVariant isInverse={false}>
  <Text
- color={isInverse ? inverseTextColor : textColor}
+ color={textColor}
  size={14}
  lineHeight={20}
  weight={textPresets.indicator.weight}