@telefonica/mistica 16.36.1 → 16.37.0

package/dist-es/skins/telefonica.js

@@ -81,34 +81,51 @@ const e = {
             buttonDangerBackground: e.coral60,
             buttonDangerBackgroundPressed: e.coral65,
             buttonDangerBackgroundHover: e.coral65,
-            buttonLinkDangerBackgroundPressed: e.coral10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.coral10,
             buttonLinkDangerBackgroundInversePressed: e.coral10,
+            buttonLinkDangerBackgroundMediaPressed: e.coral10,
             buttonLinkBackgroundPressed: e.grey1,
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.telefonicaBlue,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.telefonicaBlue70,
+            buttonPrimaryBackgroundInverseHover: e.telefonicaBlue10,
+            buttonPrimaryBackgroundMediaHover: e.telefonicaBlue10,
+            buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
             buttonPrimaryBackgroundInversePressed: e.telefonicaBlue10,
+            buttonPrimaryBackgroundMediaPressed: e.telefonicaBlue10,
             buttonSecondaryBorder: e.telefonicaBlue,
-            buttonSecondaryBorderPressed: e.telefonicaBlue70,
-            buttonSecondaryBackgroundHover: e.telefonicaBlue10,
-            buttonSecondaryBackgroundPressed: e.telefonicaBlue10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.telefonicaBlue70,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.telefonicaBlue10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundPressed: e.telefonicaBlue10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.1),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.1),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.telefonicaBlue,
+            textButtonPrimaryMedia: e.telefonicaBlue,
             textButtonPrimaryInversePressed: e.telefonicaBlue70,
+            textButtonPrimaryMediaPressed: e.telefonicaBlue70,
             textButtonSecondary: e.telefonicaBlue,
-            textButtonSecondaryPressed: e.telefonicaBlue70,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.telefonicaBlue70,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.telefonicaBlue,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.coral60,
+            textLinkDangerMedia: e.coral60,
             textLinkSnackbar: e.telefonicaBlue30,
             textActivated: e.telefonicaBlue70,
             textBrand: e.telefonicaBlue70,
@@ -202,7 +219,8 @@ const e = {
             tagBackgroundSuccessInverse: e.turquoise10,
             tagBackgroundWarningInverse: e.yellow15,
             tagBackgroundErrorInverse: e.coral10,
-            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,
@@ -235,34 +253,51 @@ const e = {
             buttonDangerBackground: e.coral60,
             buttonDangerBackgroundPressed: e.coral65,
             buttonDangerBackgroundHover: e.coral65,
-            buttonLinkDangerBackgroundPressed: r(e.coral60, 0.16),
             buttonLinkDangerBackgroundInverse: r(e.coral60, 0.16),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.coral60, 0.16),
             buttonLinkDangerBackgroundInversePressed: r(e.coral60, 0.16),
+            buttonLinkDangerBackgroundMediaPressed: e.coral10,
             buttonLinkBackgroundPressed: r(e.telefonicaBlue30, 0.16),
             buttonLinkBackgroundInversePressed: r(e.telefonicaBlue30, 0.16),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.telefonicaBlue,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.telefonicaBlue70,
+            buttonPrimaryBackgroundInverseHover: e.telefonicaBlue10,
+            buttonPrimaryBackgroundMediaHover: e.telefonicaBlue10,
+            buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
             buttonPrimaryBackgroundInversePressed: e.telefonicaBlue10,
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.telefonicaBlue10,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.1),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.telefonicaBlue,
+            textButtonPrimaryMedia: e.telefonicaBlue,
             textButtonPrimaryInversePressed: e.telefonicaBlue70,
+            textButtonPrimaryMediaPressed: e.telefonicaBlue70,
             textButtonSecondary: e.white,
-            textButtonSecondaryPressed: e.white,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.white,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.darkModeTelefonicaBlue,
             textLinkInverse: e.darkModeTelefonicaBlue,
+            textLinkMedia: e.white,
             textLinkDanger: e.coral,
+            textLinkDangerMedia: e.coral60,
             textLinkSnackbar: e.darkModeTelefonicaBlue,
             textActivated: e.telefonicaBlue30,
             textBrand: e.telefonicaBlue30,
@@ -356,7 +391,8 @@ const e = {
             tagBackgroundSuccessInverse: e.turquoise80,
             tagBackgroundWarningInverse: e.yellow80,
             tagBackgroundErrorInverse: e.coral90,
-            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/tu.js

@@ -1,4 +1,4 @@
-import { TU_SKIN as n } from "./constants.js";
+import { TU_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     primary: "#2B3447",
@@ -42,7 +42,7 @@ const e = {
     darkModeGrey: "#202735",
     darkModeGrey6: "#2B3447"
 }, d = ()=>({
-        name: n,
+        name: t,
         colors: {
             appBarBackground: e.white,
             background: e.white,
@@ -74,34 +74,51 @@ const e = {
             buttonDangerBackground: e.red,
             buttonDangerBackgroundPressed: e.red55,
             buttonDangerBackgroundHover: e.red55,
-            buttonLinkDangerBackgroundPressed: e.red10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.red10,
             buttonLinkDangerBackgroundInversePressed: e.red10,
+            buttonLinkDangerBackgroundMediaPressed: e.red10,
             buttonLinkBackgroundPressed: e.blue10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.primary,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.primary45,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.primary45,
+            buttonPrimaryBackgroundInverseHover: r(e.white, 0.8),
+            buttonPrimaryBackgroundMediaHover: r(e.white, 0.8),
+            buttonPrimaryBackgroundPressed: e.primary45,
             buttonPrimaryBackgroundInversePressed: r(e.white, 0.8),
+            buttonPrimaryBackgroundMediaPressed: r(e.white, 0.8),
             buttonSecondaryBorder: e.blue,
-            buttonSecondaryBorderPressed: e.blue70,
-            buttonSecondaryBackgroundHover: e.blue10,
-            buttonSecondaryBackgroundPressed: e.blue10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.blue70,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.blue10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundPressed: e.blue10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.1),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.1),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.primary,
+            textButtonPrimaryMedia: e.primary,
             textButtonPrimaryInversePressed: e.primary,
+            textButtonPrimaryMediaPressed: e.primary,
             textButtonSecondary: e.blue,
-            textButtonSecondaryPressed: e.blue70,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.blue70,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.blue,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.red,
+            textLinkDangerMedia: e.red,
             textLinkSnackbar: e.white,
             textActivated: e.primary,
             textBrand: e.blue,
@@ -195,7 +212,8 @@ const e = {
             tagBackgroundSuccessInverse: e.green10,
             tagBackgroundWarningInverse: e.orange20,
             tagBackgroundErrorInverse: e.red10,
-            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,
@@ -228,34 +246,51 @@ const e = {
             buttonDangerBackground: e.red,
             buttonDangerBackgroundPressed: e.red80,
             buttonDangerBackgroundHover: e.red80,
-            buttonLinkDangerBackgroundPressed: e.red10,
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.red10,
             buttonLinkDangerBackgroundInversePressed: e.red10,
+            buttonLinkDangerBackgroundMediaPressed: e.red10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.grey2,
             buttonPrimaryBackgroundInverse: e.grey2,
-            buttonPrimaryBackgroundPressed: e.grey3,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.grey3,
+            buttonPrimaryBackgroundInverseHover: e.grey3,
+            buttonPrimaryBackgroundMediaHover: r(e.white, 0.8),
+            buttonPrimaryBackgroundPressed: e.grey3,
             buttonPrimaryBackgroundInversePressed: e.grey3,
-            buttonSecondaryBackgroundPressed: r(e.grey2, 0.15),
+            buttonPrimaryBackgroundMediaPressed: r(e.white, 0.8),
             buttonSecondaryBorder: e.grey2,
-            buttonSecondaryBackgroundHover: r(e.grey2, 0.15),
-            buttonSecondaryBorderPressed: e.grey2,
             buttonSecondaryBorderInverse: e.grey2,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.grey2,
             buttonSecondaryBorderInversePressed: e.grey2,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: r(e.grey2, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.grey2, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.1),
+            buttonSecondaryBackgroundPressed: r(e.grey2, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.grey2, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.1),
             textButtonPrimary: e.primary,
             textButtonPrimaryInverse: e.primary,
+            textButtonPrimaryMedia: e.primary,
             textButtonPrimaryInversePressed: e.primary,
+            textButtonPrimaryMediaPressed: e.primary,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.blue30,
             textLinkInverse: e.blue30,
+            textLinkMedia: e.white,
             textLinkDanger: e.red,
+            textLinkDangerMedia: e.red,
             textLinkSnackbar: e.blue30,
             textActivated: e.blue30,
             textBrand: e.blue30,
@@ -349,7 +384,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/vivo-new.js

@@ -1,4 +1,4 @@
-import { VIVO_NEW_SKIN as o } from "./constants.js";
+import { VIVO_NEW_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     vivoPurple: "#660099",
@@ -38,7 +38,7 @@ const e = {
     darkModeGrey5: "#6D7D88",
     darkModeGrey6: "#313235"
 }, i = ()=>({
-        name: o,
+        name: t,
         colors: {
             background: e.white,
             backgroundAlternative: e.grey1,
@@ -70,34 +70,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepperDark,
             buttonDangerBackgroundHover: e.pepperDark,
-            buttonLinkDangerBackgroundPressed: e.pepperLight10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.pepperLight10,
             buttonLinkDangerBackgroundInversePressed: e.pepperLight10,
+            buttonLinkDangerBackgroundMediaPressed: e.pepperLight10,
             buttonLinkBackgroundPressed: e.vivoPurpleLight10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.1),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
             buttonPrimaryBackground: e.vivoPurple,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight50,
             buttonSecondaryBorder: e.vivoPurple,
-            buttonSecondaryBorderPressed: e.vivoPurpleDark,
-            buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
-            buttonSecondaryBackgroundPressed: e.vivoPurpleLight10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.vivoPurpleDark,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: e.vivoPurpleLight10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.vivoPurple,
+            textButtonPrimaryMedia: e.vivoPurple,
             textButtonPrimaryInversePressed: e.vivoPurple,
+            textButtonPrimaryMediaPressed: e.vivoPurple,
             textButtonSecondary: e.vivoPurple,
-            textButtonSecondaryPressed: e.vivoPurpleDark,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.vivoPurpleDark,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.vivoPurple,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.vivoPurpleLight20,
             textActivated: e.vivoPurple,
             textBrand: e.vivoPurple,
@@ -191,7 +208,8 @@ const e = {
             tagBackgroundSuccessInverse: e.vivoGreenLight10,
             tagBackgroundWarningInverse: e.orangeLight10,
             tagBackgroundErrorInverse: e.pepperLight10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -224,34 +242,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepperDark,
             buttonDangerBackgroundHover: e.pepperDark,
-            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.pepperLight10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
             buttonPrimaryBackground: e.vivoPurpleLight80,
             buttonPrimaryBackgroundInverse: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: e.vivoPurpleDark,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight50,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            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.vivoPurple,
             textButtonPrimaryInversePressed: e.grey2,
+            textButtonPrimaryMediaPressed: e.vivoPurple,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.vivoPurpleLight50,
             textLinkInverse: e.vivoPurpleLight50,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.vivoPurpleLight50,
             textActivated: e.vivoPurpleLight80,
             textBrand: e.vivoPurpleLight80,
@@ -345,7 +380,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skins/vivo.js

@@ -1,4 +1,4 @@
-import { VIVO_SKIN as o } from "./constants.js";
+import { VIVO_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     vivoPurple: "#660099",
@@ -37,7 +37,7 @@ const e = {
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
 }, i = ()=>({
-        name: o,
+        name: t,
         colors: {
             background: e.white,
             backgroundAlternative: e.grey1,
@@ -69,34 +69,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepperDark,
             buttonDangerBackgroundHover: e.pepperDark,
-            buttonLinkDangerBackgroundPressed: e.pepperLight10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.pepperLight10,
             buttonLinkDangerBackgroundInversePressed: e.pepperLight10,
+            buttonLinkDangerBackgroundMediaPressed: e.pepperLight10,
             buttonLinkBackgroundPressed: e.vivoPurpleLight10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.1),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
             buttonPrimaryBackground: e.vivoPurple,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight50,
             buttonSecondaryBorder: e.vivoPurple,
-            buttonSecondaryBorderPressed: e.vivoPurpleDark,
-            buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
-            buttonSecondaryBackgroundPressed: e.vivoPurpleLight10,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.vivoPurpleDark,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.vivoPurpleLight10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: e.vivoPurpleLight10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.vivoPurple,
+            textButtonPrimaryMedia: e.vivoPurple,
             textButtonPrimaryInversePressed: e.vivoPurple,
+            textButtonPrimaryMediaPressed: e.vivoPurple,
             textButtonSecondary: e.vivoPurple,
-            textButtonSecondaryPressed: e.vivoPurpleDark,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.vivoPurpleDark,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.vivoPurple,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.vivoPurpleLight50,
             textActivated: e.vivoPurple,
             textBrand: e.vivoPurple,
@@ -190,7 +207,8 @@ const e = {
             tagBackgroundSuccessInverse: e.vivoGreenLight10,
             tagBackgroundWarningInverse: e.orangeLight10,
             tagBackgroundErrorInverse: e.pepperLight10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -223,34 +241,51 @@ const e = {
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundPressed: e.pepperDark,
             buttonDangerBackgroundHover: e.pepperDark,
-            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.pepperLight10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.1),
             buttonPrimaryBackground: e.vivoPurpleLight80,
             buttonPrimaryBackgroundInverse: e.vivoPurpleLight80,
-            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundInverseHover: e.vivoPurpleDark,
+            buttonPrimaryBackgroundMediaHover: e.vivoPurpleLight50,
+            buttonPrimaryBackgroundPressed: e.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: e.vivoPurpleDark,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.vivoPurpleLight50,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            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.vivoPurple,
             textButtonPrimaryInversePressed: e.grey2,
+            textButtonPrimaryMediaPressed: e.vivoPurple,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.vivoPurpleLight50,
             textLinkInverse: e.vivoPurpleLight50,
+            textLinkMedia: e.white,
             textLinkDanger: e.pepper,
+            textLinkDangerMedia: e.pepper,
             textLinkSnackbar: e.vivoPurpleLight50,
             textActivated: e.vivoPurpleLight80,
             textBrand: e.vivoPurpleLight80,
@@ -344,7 +379,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skip-link.css-mistica.js

@@ -1,5 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./screen-reader-only.css.ts.vanilla.css-mistica.js";
 import "./skip-link.css.ts.vanilla.css-mistica.js";
-var f = "v16_36_1_13pf4ld1 v16_36_1_1y2v1nf8u v16_36_1_1y2v1nfa3 v16_36_1_1y2v1nfbc v16_36_1_1y2v1nfcl v16_36_1_1y2v1nf4c v16_36_1_1y2v1nfl9 v16_36_1_1y2v1nflk v16_36_1_1y2v1nfin v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nfmf", i = "v16_36_1_13pf4ld2";
-export { f as skipLinkContainer, i as skipLinkList };
+var f = "v16_37_13pf4ld1 v16_37_1y2v1nf9u v16_37_1y2v1nfb3 v16_37_1y2v1nfcc v16_37_1y2v1nfdl v16_37_1y2v1nf4u v16_37_1y2v1nfm9 v16_37_1y2v1nfmk v16_37_1y2v1nfjn v16_37_1y2v1nfn0 v16_37_1y2v1nfnf", y = "v16_37_13pf4ld2";
+export { f as skipLinkContainer, y as skipLinkList };

package/dist-es/slider.css-mistica.js

@@ -1,13 +1,13 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./slider.css.ts.vanilla.css-mistica.js";
-var n = "v16_36_1_1j1wlhk1 v16_36_1_1y2v1nfjf v16_36_1_1y2v1nfim v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nflt", f = {
-    default: "v16_36_1_1j1wlhk7 v16_36_1_1y2v1nfjn v16_36_1_1y2v1nfk3 v16_36_1_1y2v1nflc v16_36_1_1y2v1nf5n",
-    inverse: "v16_36_1_1j1wlhk7 v16_36_1_1y2v1nfjn v16_36_1_1y2v1nfk3 v16_36_1_1y2v1nflc v16_36_1_1y2v1nf5p"
-}, y = "v16_36_1_1j1wlhk2", l = "v16_36_1_1j1wlhkj v16_36_1_1y2v1nfin v16_36_1_1y2v1nfm0", j = "v16_36_1_1j1wlhkd v16_36_1_1y2v1nf5z v16_36_1_1y2v1nflc", r = {
-    default: "v16_36_1_1j1wlhkg",
-    inverse: "v16_36_1_1j1wlhkh"
-}, a = "v16_36_1_1j1wlhk5 v16_36_1_1y2v1nfin v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1", e = {
-    default: "v16_36_1_1j1wlhke",
-    inverse: "v16_36_1_1j1wlhkf"
-}, h = "v16_36_1_1y2v1nfjf v16_36_1_1y2v1nfjz v16_36_1_1y2v1nflq";
-export { n as container, f as defaultThumb, y as disabled, l as input, j as iosThumb, r as thumbActive, a as thumbContainer, e as thumbHover, h as track };
+var n = "v16_37_1j1wlhk1 v16_37_1y2v1nfkf v16_37_1y2v1nfjm v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfmt", f = {
+    default: "v16_37_1j1wlhk7 v16_37_1y2v1nfkn v16_37_1y2v1nfl3 v16_37_1y2v1nfmc v16_37_1y2v1nf6g",
+    inverse: "v16_37_1j1wlhk7 v16_37_1y2v1nfkn v16_37_1y2v1nfl3 v16_37_1y2v1nfmc v16_37_1y2v1nf6i"
+}, y = "v16_37_1j1wlhk2", k = "v16_37_1j1wlhkj v16_37_1y2v1nfjn v16_37_1y2v1nfn0", r = "v16_37_1j1wlhkd v16_37_1y2v1nf6s v16_37_1y2v1nfmc", l = {
+    default: "v16_37_1j1wlhkg",
+    inverse: "v16_37_1j1wlhkh"
+}, a = "v16_37_1j1wlhk5 v16_37_1y2v1nfjn v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1", e = {
+    default: "v16_37_1j1wlhke",
+    inverse: "v16_37_1j1wlhkf"
+}, h = "v16_37_1y2v1nfkf v16_37_1y2v1nfkz v16_37_1y2v1nfmq";
+export { n as container, f as defaultThumb, y as disabled, k as input, r as iosThumb, l as thumbActive, a as thumbContainer, e as thumbHover, h as track };