@telefonica/mistica 16.26.0 → 16.28.0

package/dist/skins/skin-contract.css.d.ts

@@ -62,6 +62,9 @@ export declare const vars: {
         textActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         inputBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inputBorderInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        completedStep: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        completedStepInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         control: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         controlActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         controlInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -213,6 +216,9 @@ export declare const vars: {
         textActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         inputBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inputBorderInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        completedStep: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        completedStepInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         control: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         controlActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         controlInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/skins/telefonica.d.ts

@@ -5,23 +5,33 @@ export declare const palette: {
     telefonicaBlue20: string;
     telefonicaBlue30: string;
     telefonicaBlue70: string;
+    telefonicaBlue80: string;
     ambar: string;
     ambar10: string;
     ambar40: string;
     ambar70: string;
+    yellow: string;
+    yellow15: string;
+    yellow40: string;
+    yellow70: string;
+    yellow80: string;
     coral: string;
     coral10: string;
-    coral40: string;
-    coral70: string;
+    coral30: string;
+    coral60: string;
+    coral65: string;
     coral80: string;
+    coral90: string;
     orchid: string;
     orchid10: string;
     orchid40: string;
     orchid70: string;
+    orchid80: string;
     turquoise: string;
     turquoise10: string;
     turquoise40: string;
     turquoise70: string;
+    turquoise80: string;
     grey1: string;
     grey2: string;
     grey3: string;
@@ -36,5 +46,6 @@ export declare const palette: {
     darkModeBlack: string;
     darkModeGrey: string;
     darkModeGrey6: string;
+    darkModeTelefonicaBlue: string;
 };
 export declare const getTelefonicaSkin: GetKnownSkin;

package/dist/skins/telefonica.js

@@ -24,27 +24,37 @@ const e = {
     telefonicaBlue20: "#B2D1FF",
     telefonicaBlue30: "#80B3FF",
     telefonicaBlue70: "#0356C9",
+    telefonicaBlue80: "#002E73",
     ambar: "#EAC344",
     ambar10: "#FDF9EC",
     ambar40: "#F0D57C",
     ambar70: "#69581F",
-    coral: "#E66C64",
-    coral10: "#FDF0EF",
-    coral40: "#E3A19A",
-    coral70: "#D50000",
-    coral80: "#912C31",
-    orchid: "#C466EF",
-    orchid10: "#F9F0FD",
-    orchid40: "#D694F4",
-    orchid70: "#8A1A93",
-    turquoise: "#59C2C9",
-    turquoise10: "#EEF9FA",
-    turquoise40: "#8BD4D9",
-    turquoise70: "#3E888D",
-    grey1: "#F2F4FF",
+    yellow: "#e4c35c",
+    yellow15: "#fcf7db",
+    yellow40: "#f3e996",
+    yellow70: "#a7863e",
+    yellow80: "#473515",
+    coral: "#d6786b",
+    coral10: "#f9eeed",
+    coral30: "#f2b1a5",
+    coral60: "#D22A1E",
+    coral65: "#C82C1E",
+    coral80: "#843c34",
+    coral90: "#491818",
+    orchid: "#b86be8",
+    orchid10: "#F8F0FD",
+    orchid40: "#CD97EF",
+    orchid70: "#7f258e",
+    orchid80: "#471551",
+    turquoise: "#75c0c7",
+    turquoise10: "#ebffff",
+    turquoise40: "#9ED3D8",
+    turquoise70: "#528889",
+    turquoise80: "#253d3c",
+    grey1: "#F7F7FF",
     grey2: "#D1D5E4",
     grey3: "#B0B6CA",
-    grey4: "#848CA4",
+    grey4: "#8f97af",
     grey5: "#6E7894",
     grey6: "#58617A",
     grey7: "#414B61",
@@ -52,9 +62,10 @@ const e = {
     grey9: "#031A34",
     white: "#FFFFFF",
     black: "#000000",
-    darkModeBlack: "#191919",
-    darkModeGrey: "#242424",
-    darkModeGrey6: "#313235"
+    darkModeBlack: "#000522",
+    darkModeGrey: "#00182F",
+    darkModeGrey6: "#00264D",
+    darkModeTelefonicaBlue: "#227AFF"
 }, i = ()=>({
         name: _constants.TELEFONICA_SKIN,
         colors: {
@@ -85,9 +96,9 @@ const e = {
             borderSelected: e.telefonicaBlue,
             coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
             coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.coral,
-            buttonDangerBackgroundPressed: e.coral80,
-            buttonDangerBackgroundHover: e.coral80,
+            buttonDangerBackground: e.coral60,
+            buttonDangerBackgroundPressed: e.coral65,
+            buttonDangerBackgroundHover: e.coral65,
             buttonLinkDangerBackgroundPressed: e.coral10,
             buttonLinkDangerBackgroundInverse: e.white,
             buttonLinkDangerBackgroundInversePressed: e.coral10,
@@ -97,7 +108,7 @@ const e = {
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
             buttonPrimaryBackgroundHover: e.telefonicaBlue70,
-            buttonPrimaryBackgroundInversePressed: e.telefonicaBlue30,
+            buttonPrimaryBackgroundInversePressed: e.telefonicaBlue10,
             buttonSecondaryBorder: e.telefonicaBlue,
             buttonSecondaryBorderPressed: e.telefonicaBlue70,
             buttonSecondaryBackgroundHover: e.telefonicaBlue10,
@@ -108,23 +119,26 @@ const e = {
             buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.1),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.telefonicaBlue,
-            textButtonPrimaryInversePressed: e.telefonicaBlue,
+            textButtonPrimaryInversePressed: e.telefonicaBlue70,
             textButtonSecondary: e.telefonicaBlue,
             textButtonSecondaryPressed: e.telefonicaBlue70,
             textButtonSecondaryInverse: e.white,
             textButtonSecondaryInversePressed: e.white,
             textLink: e.telefonicaBlue,
             textLinkInverse: e.white,
-            textLinkDanger: e.coral,
+            textLinkDanger: e.coral60,
             textLinkSnackbar: e.telefonicaBlue30,
-            textActivated: e.telefonicaBlue,
-            textBrand: e.telefonicaBlue,
-            inputBorder: e.grey4,
-            control: e.grey3,
+            textActivated: e.telefonicaBlue70,
+            textBrand: e.telefonicaBlue70,
+            inputBorder: e.grey5,
+            inputBorderInverse: e.white,
+            completedStep: e.telefonicaBlue,
+            completedStepInverse: e.telefonicaBlue70,
+            control: e.grey5,
             controlActivated: e.telefonicaBlue,
             controlInverse: e.grey1,
             controlActivatedInverse: e.white,
-            controlError: e.coral,
+            controlError: e.coral60,
             barTrack: e.grey2,
             barTrackInverse: (0, _color.applyAlpha)(e.white, 0.3),
             loadingBar: e.telefonicaBlue30,
@@ -136,8 +150,8 @@ const e = {
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.telefonicaBlue,
-            badge: e.coral70,
-            feedbackErrorBackground: e.coral,
+            badge: e.coral60,
+            feedbackErrorBackground: e.coral60,
             feedbackInfoBackground: e.grey9,
             brand: e.telefonicaBlue,
             brandHigh: e.telefonicaBlue70,
@@ -150,61 +164,61 @@ const e = {
             textPrimary: e.grey9,
             textPrimaryInverse: e.white,
             textSecondary: e.grey6,
-            textSecondaryInverse: e.telefonicaBlue10,
-            error: e.coral,
-            textError: e.coral,
+            textSecondaryInverse: e.white,
+            error: e.coral60,
+            textError: e.coral60,
             textErrorInverse: e.white,
             success: e.turquoise,
-            warning: e.ambar,
+            warning: e.yellow70,
             promo: e.orchid,
-            highlight: e.coral40,
+            highlight: e.coral30,
             successLow: e.turquoise10,
-            warningLow: e.ambar10,
+            warningLow: e.yellow15,
             errorLow: e.coral10,
             promoLow: e.orchid10,
             brandLow: e.telefonicaBlue10,
             successHigh: e.turquoise70,
-            warningHigh: e.ambar70,
-            errorHigh: e.coral70,
+            warningHigh: e.yellow70,
+            errorHigh: e.coral65,
             promoHigh: e.orchid70,
             successHighInverse: e.turquoise70,
-            warningHighInverse: e.ambar70,
-            errorHighInverse: e.coral70,
+            warningHighInverse: e.yellow70,
+            errorHighInverse: e.coral65,
             promoHighInverse: e.orchid70,
             textNavigationBarPrimary: e.white,
             textNavigationBarSecondary: e.grey1,
             textNavigationSearchBarHint: e.grey1,
             textNavigationSearchBarText: e.white,
             textAppBar: e.grey4,
-            textAppBarSelected: e.telefonicaBlue,
-            customTabsBackground: e.telefonicaBlue,
-            tagTextPromo: e.orchid70,
-            tagTextActive: e.telefonicaBlue,
-            tagTextInactive: e.grey5,
-            tagTextInfo: e.telefonicaBlue,
-            tagTextSuccess: e.turquoise70,
-            tagTextWarning: e.ambar70,
-            tagTextError: e.coral70,
+            textAppBarSelected: e.telefonicaBlue70,
+            customTabsBackground: e.telefonicaBlue70,
+            tagTextPromo: e.orchid80,
+            tagTextActive: e.telefonicaBlue70,
+            tagTextInactive: e.grey6,
+            tagTextInfo: e.telefonicaBlue70,
+            tagTextSuccess: e.turquoise80,
+            tagTextWarning: e.yellow80,
+            tagTextError: e.coral65,
             tagBackgroundPromo: e.orchid10,
-            tagBackgroundActive: e.telefonicaBlue10,
+            tagBackgroundActive: e.grey1,
             tagBackgroundInactive: e.grey1,
             tagBackgroundInfo: e.telefonicaBlue10,
             tagBackgroundSuccess: e.turquoise10,
-            tagBackgroundWarning: e.ambar10,
+            tagBackgroundWarning: e.yellow15,
             tagBackgroundError: e.coral10,
-            tagTextPromoInverse: e.orchid70,
-            tagTextActiveInverse: e.telefonicaBlue,
-            tagTextInactiveInverse: e.grey5,
-            tagTextInfoInverse: e.telefonicaBlue,
-            tagTextSuccessInverse: e.turquoise70,
-            tagTextWarningInverse: e.ambar70,
-            tagTextErrorInverse: e.coral70,
+            tagTextPromoInverse: e.orchid80,
+            tagTextActiveInverse: e.telefonicaBlue70,
+            tagTextInactiveInverse: e.grey6,
+            tagTextInfoInverse: e.telefonicaBlue70,
+            tagTextSuccessInverse: e.turquoise80,
+            tagTextWarningInverse: e.yellow80,
+            tagTextErrorInverse: e.coral65,
             tagBackgroundPromoInverse: e.orchid10,
-            tagBackgroundActiveInverse: e.telefonicaBlue10,
+            tagBackgroundActiveInverse: e.grey1,
             tagBackgroundInactiveInverse: e.grey1,
             tagBackgroundInfoInverse: e.telefonicaBlue10,
             tagBackgroundSuccessInverse: e.turquoise10,
-            tagBackgroundWarningInverse: e.ambar10,
+            tagBackgroundWarningInverse: e.yellow15,
             tagBackgroundErrorInverse: e.coral10,
             cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
@@ -215,40 +229,40 @@ const e = {
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
             backgroundContainerError: e.darkModeGrey,
-            backgroundContainerHover: (0, _color.applyAlpha)(e.white, 0.05),
-            backgroundContainerPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            backgroundContainerHover: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.05),
+            backgroundContainerPressed: (0, _color.applyAlpha)(e.telefonicaBlue70, 0.08),
             backgroundContainerBrand: e.darkModeGrey,
             backgroundContainerBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
             backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.white, 0.05),
             backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.grey6,
-            backgroundSkeletonInverse: e.grey6,
+            backgroundSkeleton: e.grey8,
+            backgroundSkeletonInverse: e.grey8,
             backgroundBrandTop: e.darkModeBlack,
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
-            skeletonWave: e.grey5,
+            skeletonWave: e.grey8,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             borderHigh: e.grey5,
-            borderSelected: e.telefonicaBlue,
+            borderSelected: e.darkModeTelefonicaBlue,
             coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
             coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.coral,
-            buttonDangerBackgroundPressed: e.coral80,
-            buttonDangerBackgroundHover: e.coral80,
-            buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
-            buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
-            buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
-            buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
-            buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonDangerBackground: e.coral60,
+            buttonDangerBackgroundPressed: e.coral65,
+            buttonDangerBackgroundHover: e.coral65,
+            buttonLinkDangerBackgroundPressed: (0, _color.applyAlpha)(e.coral60, 0.16),
+            buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.coral60, 0.16),
+            buttonLinkDangerBackgroundInversePressed: (0, _color.applyAlpha)(e.coral60, 0.16),
+            buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.telefonicaBlue30, 0.16),
+            buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.telefonicaBlue30, 0.16),
             buttonPrimaryBackground: e.telefonicaBlue,
-            buttonPrimaryBackgroundInverse: e.telefonicaBlue,
+            buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundPressed: e.telefonicaBlue70,
             buttonPrimaryBackgroundHover: e.telefonicaBlue70,
-            buttonPrimaryBackgroundInversePressed: e.telefonicaBlue70,
+            buttonPrimaryBackgroundInversePressed: e.telefonicaBlue10,
             buttonSecondaryBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonSecondaryBorder: e.white,
             buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
@@ -257,106 +271,109 @@ const e = {
             buttonSecondaryBorderInversePressed: e.white,
             buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.15),
-            textButtonPrimary: e.grey2,
-            textButtonPrimaryInverse: e.grey2,
-            textButtonPrimaryInversePressed: e.grey2,
-            textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
-            textButtonSecondaryInverse: e.grey2,
-            textButtonSecondaryInversePressed: e.grey2,
-            textLink: e.telefonicaBlue,
-            textLinkInverse: e.telefonicaBlue,
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.telefonicaBlue,
+            textButtonPrimaryInversePressed: e.telefonicaBlue70,
+            textButtonSecondary: e.white,
+            textButtonSecondaryPressed: e.white,
+            textButtonSecondaryInverse: e.white,
+            textButtonSecondaryInversePressed: e.white,
+            textLink: e.darkModeTelefonicaBlue,
+            textLinkInverse: e.darkModeTelefonicaBlue,
             textLinkDanger: e.coral,
-            textLinkSnackbar: e.telefonicaBlue30,
-            textActivated: e.telefonicaBlue,
-            textBrand: e.telefonicaBlue,
+            textLinkSnackbar: e.darkModeTelefonicaBlue,
+            textActivated: e.telefonicaBlue30,
+            textBrand: e.telefonicaBlue30,
             inputBorder: e.grey5,
-            control: e.darkModeGrey6,
-            controlActivated: e.telefonicaBlue,
-            controlInverse: e.darkModeGrey6,
-            controlActivatedInverse: e.telefonicaBlue,
+            inputBorderInverse: e.grey5,
+            completedStep: e.telefonicaBlue,
+            completedStepInverse: e.telefonicaBlue,
+            control: e.grey5,
+            controlActivated: e.darkModeTelefonicaBlue,
+            controlInverse: e.grey5,
+            controlActivatedInverse: e.darkModeTelefonicaBlue,
             controlError: e.coral,
             barTrack: e.darkModeGrey6,
             barTrackInverse: e.darkModeGrey6,
-            loadingBar: e.telefonicaBlue,
+            loadingBar: e.darkModeTelefonicaBlue,
             loadingBarBackground: e.grey6,
-            toggleAndroidInactive: e.grey4,
+            toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.telefonicaBlue20,
-            iosControlKnob: e.grey2,
-            controlKnobInverse: e.grey2,
-            divider: (0, _color.applyAlpha)(e.white, 0.05),
+            iosControlKnob: e.grey1,
+            controlKnobInverse: e.grey1,
+            divider: (0, _color.applyAlpha)(e.white, 0.2),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
-            badge: e.coral70,
-            feedbackErrorBackground: e.coral,
-            feedbackInfoBackground: e.grey8,
-            brand: e.telefonicaBlue,
+            badge: e.coral60,
+            feedbackErrorBackground: e.coral65,
+            feedbackInfoBackground: e.darkModeGrey,
+            brand: e.darkModeTelefonicaBlue,
             brandHigh: (0, _color.applyAlpha)(e.white, 0.05),
-            inverse: e.grey2,
+            inverse: e.grey1,
             neutralHigh: e.grey2,
             neutralMedium: e.grey5,
             neutralMediumInverse: e.grey5,
             neutralLow: e.darkModeGrey6,
             neutralLowAlternative: e.darkModeGrey6,
-            textPrimary: e.grey2,
-            textPrimaryInverse: e.grey2,
+            textPrimary: e.grey1,
+            textPrimaryInverse: e.grey1,
             textSecondary: e.grey3,
             textSecondaryInverse: e.grey3,
             error: e.coral,
             textError: e.coral,
             textErrorInverse: e.coral,
             success: e.turquoise,
-            warning: e.ambar,
+            warning: e.yellow,
             promo: e.orchid,
-            highlight: e.coral40,
+            highlight: e.coral30,
             successLow: e.darkModeGrey6,
             warningLow: e.darkModeGrey6,
             errorLow: e.darkModeGrey6,
             promoLow: e.darkModeGrey6,
             brandLow: e.darkModeGrey6,
             successHigh: e.turquoise40,
-            warningHigh: e.ambar40,
-            errorHigh: e.coral40,
+            warningHigh: e.yellow40,
+            errorHigh: e.coral30,
             promoHigh: e.orchid40,
             successHighInverse: e.turquoise70,
-            warningHighInverse: e.ambar70,
-            errorHighInverse: e.coral70,
+            warningHighInverse: e.yellow70,
+            errorHighInverse: e.coral65,
             promoHighInverse: e.orchid70,
-            textNavigationBarPrimary: e.grey2,
+            textNavigationBarPrimary: e.white,
             textNavigationBarSecondary: e.grey4,
             textNavigationSearchBarHint: e.grey4,
-            textNavigationSearchBarText: e.grey2,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.grey2,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey2,
+            textAppBarSelected: e.white,
             customTabsBackground: e.darkModeBlack,
             tagTextPromo: e.orchid40,
-            tagTextActive: e.telefonicaBlue,
-            tagTextInactive: e.grey5,
-            tagTextInfo: e.telefonicaBlue,
+            tagTextActive: e.telefonicaBlue20,
+            tagTextInactive: e.grey3,
+            tagTextInfo: e.telefonicaBlue20,
             tagTextSuccess: e.turquoise40,
-            tagTextWarning: e.ambar40,
-            tagTextError: e.coral40,
-            tagBackgroundPromo: e.darkModeGrey6,
-            tagBackgroundActive: e.darkModeGrey6,
-            tagBackgroundInactive: e.darkModeGrey6,
-            tagBackgroundInfo: e.darkModeGrey6,
-            tagBackgroundSuccess: e.darkModeGrey6,
-            tagBackgroundWarning: e.darkModeGrey6,
-            tagBackgroundError: e.darkModeGrey6,
+            tagTextWarning: e.yellow40,
+            tagTextError: e.coral30,
+            tagBackgroundPromo: e.orchid80,
+            tagBackgroundActive: e.telefonicaBlue80,
+            tagBackgroundInactive: e.grey8,
+            tagBackgroundInfo: e.telefonicaBlue80,
+            tagBackgroundSuccess: e.turquoise80,
+            tagBackgroundWarning: e.yellow80,
+            tagBackgroundError: e.coral90,
             tagTextPromoInverse: e.orchid40,
-            tagTextActiveInverse: e.telefonicaBlue,
-            tagTextInactiveInverse: e.grey5,
-            tagTextInfoInverse: e.telefonicaBlue,
+            tagTextActiveInverse: e.telefonicaBlue20,
+            tagTextInactiveInverse: e.grey3,
+            tagTextInfoInverse: e.telefonicaBlue20,
             tagTextSuccessInverse: e.turquoise40,
-            tagTextWarningInverse: e.ambar40,
-            tagTextErrorInverse: e.coral40,
-            tagBackgroundPromoInverse: e.darkModeGrey6,
-            tagBackgroundActiveInverse: e.darkModeGrey6,
-            tagBackgroundInactiveInverse: e.darkModeGrey6,
-            tagBackgroundInfoInverse: e.darkModeGrey6,
-            tagBackgroundSuccessInverse: e.darkModeGrey6,
-            tagBackgroundWarningInverse: e.darkModeGrey6,
-            tagBackgroundErrorInverse: e.darkModeGrey6,
+            tagTextWarningInverse: e.yellow40,
+            tagTextErrorInverse: e.coral30,
+            tagBackgroundPromoInverse: e.orchid80,
+            tagBackgroundActiveInverse: e.telefonicaBlue80,
+            tagBackgroundInactiveInverse: e.grey8,
+            tagBackgroundInfoInverse: e.telefonicaBlue80,
+            tagBackgroundSuccessInverse: e.turquoise80,
+            tagBackgroundWarningInverse: e.yellow80,
+            tagBackgroundErrorInverse: e.coral90,
             cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
         borderRadii: {
@@ -522,5 +539,9 @@ const e = {
                 },
                 weight: "regular"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });

package/dist/skins/tu.js

@@ -124,6 +124,9 @@ const e = {
             textActivated: e.primary,
             textBrand: e.blue,
             inputBorder: e.grey5,
+            inputBorderInverse: e.white,
+            completedStep: e.primary,
+            completedStepInverse: e.primary80,
             control: e.grey5,
             controlActivated: e.primary,
             controlInverse: e.white,
@@ -275,6 +278,9 @@ const e = {
             textActivated: e.blue30,
             textBrand: e.blue30,
             inputBorder: e.grey5,
+            inputBorderInverse: e.grey5,
+            completedStep: e.grey2,
+            completedStepInverse: e.grey2,
             control: e.darkModeGrey6,
             controlActivated: e.blue30,
             controlInverse: e.darkModeGrey6,
@@ -526,5 +532,9 @@ const e = {
                 },
                 weight: "medium"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });

package/dist/skins/types/colors.d.ts

@@ -61,6 +61,9 @@ export type Colors = {
     textActivated: string;
     textBrand: string;
     inputBorder: string;
+    inputBorderInverse: string;
+    completedStep: string;
+    completedStepInverse: string;
     control: string;
     controlActivated: string;
     controlInverse: string;

package/dist/skins/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { Variant } from '../../theme-variant-context';
 import type { Colors } from './colors';
 export type { Colors } from './colors';
 export type SkinVariant = 'prominent';
@@ -71,12 +72,17 @@ export type BorderRadiiConfig = {
     avatar: string;
     mediaSmall: string;
 };
+export type ThemeVariantsConfig = {
+    successFeedback: Variant;
+    brandLoadingScreen: Variant;
+};
 export type Skin = {
     name: SkinName;
     colors: Colors;
     darkModeColors?: Partial<Colors>;
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
 };
 export type KnownSkin = {
     name: KnownSkinName;
@@ -84,4 +90,5 @@ export type KnownSkin = {
     darkModeColors?: Partial<Colors>;
     textPresets?: PartialTextPresetsConfig;
     borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
 };

package/dist/skins/vivo-new.js

@@ -120,6 +120,9 @@ const e = {
             textActivated: e.vivoPurple,
             textBrand: e.vivoPurple,
             inputBorder: e.grey4,
+            inputBorderInverse: e.white,
+            completedStep: e.vivoPurple,
+            completedStepInverse: e.vivoPurpleDark,
             control: e.grey4,
             controlActivated: e.vivoPurple,
             controlInverse: e.vivoPurpleLight50,
@@ -186,7 +189,7 @@ const e = {
             tagTextWarning: e.orangeDark,
             tagTextError: e.pepperDark80,
             tagBackgroundPromo: e.vivoPurpleLight10,
-            tagBackgroundActive: e.vivoPurpleLight10,
+            tagBackgroundActive: e.grey1,
             tagBackgroundInactive: e.grey1,
             tagBackgroundInfo: e.vivoPurpleLight10,
             tagBackgroundSuccess: e.vivoGreenLight10,
@@ -271,6 +274,9 @@ const e = {
             textActivated: e.vivoPurpleLight80,
             textBrand: e.vivoPurpleLight80,
             inputBorder: e.darkModeGrey5,
+            inputBorderInverse: e.darkModeGrey5,
+            completedStep: e.vivoPurpleLight80,
+            completedStepInverse: e.vivoPurpleLight80,
             control: e.darkModeGrey6,
             controlActivated: e.vivoPurpleLight80,
             controlInverse: e.darkModeGrey6,
@@ -522,5 +528,9 @@ const e = {
                 },
                 weight: "medium"
             }
+        },
+        themeVariants: {
+            successFeedback: "inverse",
+            brandLoadingScreen: "inverse"
         }
     });