@telefonica/mistica 16.36.1 → 16.37.0

package/dist-es/skins/movistar.js

@@ -89,34 +89,51 @@ const e = {
             buttonDangerBackground: e.pepper55,
             buttonDangerBackgroundPressed: e.pepper70,
             buttonDangerBackgroundHover: e.pepper65,
-            buttonLinkDangerBackgroundPressed: e.pepper10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.pepper10,
             buttonLinkDangerBackgroundInversePressed: e.pepper10,
+            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
             buttonLinkBackgroundPressed: e.movistarBlue10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.2),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.2),
             buttonPrimaryBackground: e.movistarBlueHC,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.movistarBlueHC55,
+            buttonPrimaryBackgroundInverseHover: e.movistarBlue10,
+            buttonPrimaryBackgroundMediaHover: e.movistarBlue10,
+            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
             buttonPrimaryBackgroundInversePressed: e.movistarBlue10,
+            buttonPrimaryBackgroundMediaPressed: e.movistarBlue10,
             buttonSecondaryBorder: e.movistarBlueHC,
-            buttonSecondaryBorderPressed: e.movistarBlueHC65,
-            buttonSecondaryBackgroundHover: e.movistarBlue10,
-            buttonSecondaryBackgroundPressed: e.movistarBlue15,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.movistarBlueHC65,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.movistarBlue10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: e.movistarBlue15,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.3),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.3),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.movistarBlueHC,
+            textButtonPrimaryMedia: e.movistarBlueHC,
             textButtonPrimaryInversePressed: e.movistarBlueHC,
+            textButtonPrimaryMediaPressed: e.movistarBlueHC,
             textButtonSecondary: e.movistarBlueHC,
-            textButtonSecondaryPressed: e.movistarBlueHC55,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.movistarBlueHC55,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.movistarBlueHC,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper60,
+            textLinkDangerMedia: e.pepper60,
             textLinkSnackbar: e.movistarBlue30,
             textActivated: e.movistarBlueHC,
             textBrand: e.movistarBlueHC,
@@ -210,7 +227,8 @@ const e = {
             tagBackgroundSuccessInverse: e.white,
             tagBackgroundWarningInverse: e.white,
             tagBackgroundErrorInverse: e.white,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -243,34 +261,51 @@ const e = {
             buttonDangerBackground: e.pepper55,
             buttonDangerBackgroundPressed: e.pepper70,
             buttonDangerBackgroundHover: e.pepper65,
-            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.2),
             buttonPrimaryBackground: e.movistarBlueHC,
             buttonPrimaryBackgroundInverse: e.movistarBlueHC,
-            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.movistarBlueHC55,
+            buttonPrimaryBackgroundInverseHover: e.movistarBlueHC65,
+            buttonPrimaryBackgroundMediaHover: e.movistarBlue10,
+            buttonPrimaryBackgroundPressed: e.movistarBlueHC65,
             buttonPrimaryBackgroundInversePressed: e.movistarBlueHC65,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: r(e.white, 0.25),
+            buttonPrimaryBackgroundMediaPressed: e.movistarBlue10,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.darkModeGrey2,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.darkModeGrey2,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.25),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.25),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.3),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.white,
+            textButtonPrimaryMedia: e.movistarBlueHC,
             textButtonPrimaryInversePressed: e.white,
+            textButtonPrimaryMediaPressed: e.movistarBlueHC,
             textButtonSecondary: e.darkModeGrey2,
-            textButtonSecondaryPressed: e.darkModeGrey2,
             textButtonSecondaryInverse: e.darkModeGrey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.darkModeGrey2,
             textButtonSecondaryInversePressed: e.darkModeGrey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.movistarBlue,
             textLinkInverse: e.movistarBlue,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper45,
+            textLinkDangerMedia: e.pepper60,
             textLinkSnackbar: e.movistarBlue,
             textActivated: e.movistarBlue,
             textBrand: e.movistarBlue,
@@ -364,19 +399,20 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey7,
             tagBackgroundWarningInverse: e.darkModeGrey7,
             tagBackgroundErrorInverse: e.darkModeGrey7,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         borderRadii: {
             avatar: "50%",
             bar: "999px",
             button: "4px",
-            checkbox: "2px",
-            container: "8px",
+            checkbox: "4px",
+            container: "16px",
             indicator: "999px",
-            input: "8px",
+            input: "12px",
             legacyDisplay: "16px",
             popup: "8px",
-            sheet: "8px",
+            sheet: "16px",
             mediaSmall: "8px"
         },
         textPresets: {

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

@@ -80,34 +80,51 @@ const e = {
             buttonDangerBackground: e.o2Red60,
             buttonDangerBackgroundPressed: e.o2Red65,
             buttonDangerBackgroundHover: e.o2Red65,
-            buttonLinkDangerBackgroundPressed: e.o2Red10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.o2Red10,
             buttonLinkDangerBackgroundInversePressed: e.o2Red10,
+            buttonLinkDangerBackgroundMediaPressed: e.o2Red10,
             buttonLinkBackgroundPressed: e.beyondBlue10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.beyondBlue,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.beyondBlue70,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.beyondBlue70,
+            buttonPrimaryBackgroundInverseHover: e.beyondBlue30,
+            buttonPrimaryBackgroundMediaHover: e.beyondBlue30,
+            buttonPrimaryBackgroundPressed: e.beyondBlue70,
             buttonPrimaryBackgroundInversePressed: e.beyondBlue30,
+            buttonPrimaryBackgroundMediaPressed: e.beyondBlue30,
             buttonSecondaryBorder: e.beyondBlue,
-            buttonSecondaryBorderPressed: e.beyondBlue70,
-            buttonSecondaryBackgroundHover: e.beyondBlue10,
-            buttonSecondaryBackgroundPressed: e.beyondBlue10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.beyondBlue70,
             buttonSecondaryBorderInversePressed: e.beyondBlue30,
+            buttonSecondaryBorderMediaPressed: e.beyondBlue30,
+            buttonSecondaryBackgroundHover: e.beyondBlue10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: e.beyondBlue10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.beyondBlue,
+            textButtonPrimaryMedia: e.beyondBlue,
             textButtonPrimaryInversePressed: e.beyondBlue70,
+            textButtonPrimaryMediaPressed: e.beyondBlue70,
             textButtonSecondary: e.beyondBlue,
-            textButtonSecondaryPressed: e.beyondBlue70,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.beyondBlue70,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.beyondBlue,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.o2Red65,
+            textLinkDangerMedia: e.o2Red65,
             textLinkSnackbar: e.beyondBlue30,
             textActivated: e.beyondBlue,
             textBrand: e.beyondBlue,
@@ -201,7 +218,8 @@ const e = {
             tagBackgroundSuccessInverse: e.o2Green10,
             tagBackgroundWarningInverse: e.o2Orange10,
             tagBackgroundErrorInverse: e.o2Red10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.beyondBlue, 0)} 0%, ${r(e.beyondBlue, 0.4)} 30%, ${r(e.beyondBlue, 1)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -234,34 +252,51 @@ const e = {
             buttonDangerBackground: e.o2Red60,
             buttonDangerBackgroundPressed: e.o2Red65,
             buttonDangerBackgroundHover: e.o2Red65,
-            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.o2Red10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.darkModeBeyondBlue,
             buttonPrimaryBackgroundInverse: e.darkModeBeyondBlue,
-            buttonPrimaryBackgroundPressed: e.beyondBlue55,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.beyondBlue55,
+            buttonPrimaryBackgroundInverseHover: e.beyondBlue55,
+            buttonPrimaryBackgroundMediaHover: e.beyondBlue30,
+            buttonPrimaryBackgroundPressed: e.beyondBlue55,
             buttonPrimaryBackgroundInversePressed: e.beyondBlue55,
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.beyondBlue30,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.beyondBlue30,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.white,
+            textButtonPrimaryMedia: e.beyondBlue,
             textButtonPrimaryInversePressed: e.white,
+            textButtonPrimaryMediaPressed: e.beyondBlue70,
             textButtonSecondary: e.grey30,
-            textButtonSecondaryPressed: e.grey30,
             textButtonSecondaryInverse: e.grey30,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey30,
             textButtonSecondaryInversePressed: e.grey30,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.beyondBlue40,
             textLinkInverse: e.beyondBlue40,
+            textLinkMedia: e.white,
             textLinkDanger: e.o2Red45,
+            textLinkDangerMedia: e.o2Red65,
             textLinkSnackbar: e.beyondBlue30,
             textActivated: e.beyondBlue30,
             textBrand: e.beyondBlue30,
@@ -355,7 +390,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skins/o2.js

@@ -76,34 +76,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepper60,
             buttonDangerBackgroundHover: e.pepper60,
-            buttonLinkDangerBackgroundPressed: e.pepper10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.pepper10,
             buttonLinkDangerBackgroundInversePressed: e.pepper10,
+            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
             buttonLinkBackgroundPressed: e.o2BluePrimary10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.o2BluePrimary,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.o2BluePrimary70,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.o2BluePrimary70,
+            buttonPrimaryBackgroundInverseHover: e.o2BluePrimary30,
+            buttonPrimaryBackgroundMediaHover: e.o2BluePrimary30,
+            buttonPrimaryBackgroundPressed: e.o2BluePrimary70,
             buttonPrimaryBackgroundInversePressed: e.o2BluePrimary30,
+            buttonPrimaryBackgroundMediaPressed: e.o2BluePrimary30,
             buttonSecondaryBorder: e.o2BluePrimary,
-            buttonSecondaryBorderPressed: e.o2BluePrimary70,
-            buttonSecondaryBackgroundHover: e.o2BluePrimary10,
-            buttonSecondaryBackgroundPressed: e.o2BluePrimary10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.o2BluePrimary70,
             buttonSecondaryBorderInversePressed: e.o2BluePrimary30,
+            buttonSecondaryBorderMediaPressed: e.o2BluePrimary30,
+            buttonSecondaryBackgroundHover: e.o2BluePrimary10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: e.o2BluePrimary10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.o2BluePrimary,
+            textButtonPrimaryMedia: e.o2BluePrimary,
             textButtonPrimaryInversePressed: e.o2BluePrimary70,
+            textButtonPrimaryMediaPressed: e.o2BluePrimary70,
             textButtonSecondary: e.o2BluePrimary,
-            textButtonSecondaryPressed: e.o2BluePrimary70,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.o2BluePrimary70,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.o2BluePrimary,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.o2BluePrimary30,
             textActivated: e.o2BluePrimary,
             textBrand: e.o2BluePrimary,
@@ -197,7 +214,8 @@ const e = {
             tagBackgroundSuccessInverse: e.o2Green10,
             tagBackgroundWarningInverse: e.o2Orange10,
             tagBackgroundErrorInverse: e.pepper10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -230,34 +248,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepper60,
             buttonDangerBackgroundHover: e.pepper60,
-            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.pepper10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.darkModeO2BluePrimary,
             buttonPrimaryBackgroundInverse: e.darkModeO2BluePrimary,
-            buttonPrimaryBackgroundPressed: e.darkModeO2BluePrimaryDark,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.darkModeO2BluePrimaryDark,
+            buttonPrimaryBackgroundInverseHover: e.darkModeO2BluePrimaryDark,
+            buttonPrimaryBackgroundMediaHover: e.o2BluePrimary30,
+            buttonPrimaryBackgroundPressed: e.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundInversePressed: e.darkModeO2BluePrimaryDark,
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.o2BluePrimary30,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.o2BluePrimary30,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.grey2,
             textButtonPrimaryInverse: e.grey2,
+            textButtonPrimaryMedia: e.o2BluePrimary,
             textButtonPrimaryInversePressed: e.grey2,
+            textButtonPrimaryMediaPressed: e.o2BluePrimary70,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.o2BluePrimary30,
             textLinkInverse: e.o2BluePrimary30,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.o2BluePrimary30,
             textActivated: e.o2BluePrimary30,
             textBrand: e.o2BluePrimary30,
@@ -351,7 +386,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         borderRadii: {
             avatar: "50%",