@telefonica/mistica 17.3.0 → 17.5.0

package/src/skins/blau.tsx

@@ -80,6 +80,8 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: palette.blauBluePrimary30,
             backgroundContainerAlternative: palette.blauBluePrimary20,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.blauBluePrimary30,
             backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
             backgroundSkeleton: palette.grey3,
             backgroundSkeletonInverse: palette.blauBlueSecondary,
@@ -126,12 +128,12 @@ export const getBlauSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
             buttonLinkNeutralBackgroundPressed: palette.grey1,
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
             buttonPrimaryBackground: palette.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -197,9 +199,9 @@ export const getBlauSkin: GetKnownSkin = () => {
             textLinkSnackbar: palette.blauPurple30,
             textLinkNeutral: palette.grey6,
             textLinkNeutralBrand: palette.grey6,
-            textLinkNeutralNegative: palette.grey6,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.grey6,
-            textLinkNeutralMedia: palette.grey6,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blauBlueSecondary,
             textBrand: palette.blauBlueSecondary,
             inputBorder: palette.grey4,
@@ -387,6 +389,8 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.darkModeGrey,
             backgroundSkeletonInverse: palette.darkModeGrey,
@@ -704,6 +708,11 @@ export const getBlauSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'light',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/defaults.tsx

@@ -24,6 +24,11 @@ export const defaultTextPresetsConfig: TextPresetsConfig = {
     cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+    headerPretitle: {
+        lineHeight: {desktop: 24, mobile: 22},
+        size: {desktop: 18, mobile: 16},
+        weight: 'regular',
+    },
     cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},

package/src/skins/esimflag.tsx

@@ -84,6 +84,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.6),
             backgroundContainerBrandOverBrand: palette.blue80,
             backgroundContainerAlternative: palette.grey1,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.blue80,
             backgroundOverlay: applyAlpha(palette.black, 0.6),
             backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: palette.blue55,
@@ -126,12 +128,12 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey3, 0.4),
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey2,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey2,
-            buttonLinkNeutralBackgroundMedia: palette.grey2,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey2,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.blue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -196,10 +198,10 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.tomato60,
             textLinkSnackbar: palette.blue30,
             textLinkNeutral: palette.blue85,
-            textLinkNeutralBrand: palette.blue85,
-            textLinkNeutralNegative: palette.blue85,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.blue85,
-            textLinkNeutralMedia: palette.blue85,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blue,
             textBrand: palette.blue,
             inputBorder: palette.grey4,
@@ -391,6 +393,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.darkModeGrey6,
             backgroundSkeletonInverse: palette.darkModeGrey6,
@@ -708,6 +712,11 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/movistar.tsx

@@ -91,6 +91,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.movistarBlack, 0.2),
             backgroundContainerBrandOverBrand: palette.blue800,
             backgroundContainerAlternative: palette.grey100,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.blue800,
             backgroundOverlay: applyAlpha(palette.movistarBlack, 0.6),
             backgroundSkeleton: palette.grey200,
             backgroundSkeletonInverse: palette.blue800,
@@ -133,12 +135,12 @@ export const getMovistarSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
             buttonLinkNeutralBackgroundPressed: palette.grey100,
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey100,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey100,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey100,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
             buttonPrimaryBackground: palette.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -203,10 +205,10 @@ export const getMovistarSkin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.red,
             textLinkSnackbar: palette.blue300,
             textLinkNeutral: palette.movistarBlack,
-            textLinkNeutralBrand: palette.movistarBlack,
-            textLinkNeutralNegative: palette.movistarBlack,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.movistarBlack,
-            textLinkNeutralMedia: palette.movistarBlack,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blueHigh,
             textBrand: palette.blueHigh,
             inputBorder: palette.grey500,
@@ -398,6 +400,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.grey600,
             backgroundSkeletonInverse: palette.grey600,
@@ -715,6 +719,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 size: {desktop: 20, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 22},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/o2.tsx

@@ -87,6 +87,8 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: palette.beyondBlue70,
             backgroundContainerAlternative: palette.grey20,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.beyondBlue70,
             backgroundOverlay: applyAlpha(palette.black, 0.6),
             backgroundSkeleton: palette.grey30,
             backgroundSkeletonInverse: palette.beyondBlue70,
@@ -129,12 +131,12 @@ export const getO2Skin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey30, 0.4),
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey20,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey20,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey20,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.beyondBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -199,10 +201,10 @@ export const getO2Skin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.o2Red65,
             textLinkSnackbar: palette.beyondBlue30,
             textLinkNeutral: palette.black,
-            textLinkNeutralBrand: palette.black,
-            textLinkNeutralNegative: palette.black,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.black,
-            textLinkNeutralMedia: palette.black,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.beyondBlue,
             textBrand: palette.beyondBlue,
             inputBorder: palette.grey45,
@@ -394,6 +396,8 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.darkModeGrey6,
             backgroundSkeletonInverse: palette.darkModeGrey6,
@@ -711,6 +715,11 @@ export const getO2Skin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/skin-contract.css.ts

@@ -28,6 +28,8 @@ const colors: Colors = {
     backgroundContainerNegative: '',
     backgroundContainerBrandOverBrand: '',
     backgroundContainerAlternative: '',
+    backgroundContainerAlternativeOverAlternative: '',
+    backgroundContainerAlternativeOverBrand: '',
     backgroundOverlay: '',
     backgroundSkeleton: '',
     backgroundSkeletonInverse: '',
@@ -373,6 +375,7 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
         size: '',
         weight: '',
     },
+    headerPretitle: {lineHeight: '', size: '', weight: ''},
 };
 
 const spacing: ToThemeTokens<SpacingConfig> = {

package/src/skins/telefonica.tsx

@@ -76,6 +76,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.white, 0.1),
             backgroundContainerBrandOverBrand: palette.telefonicaBlue70,
             backgroundContainerAlternative: palette.grey1,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.telefonicaBlue70,
             backgroundBrand: palette.telefonicaBlue,
             backgroundNegative: palette.grey9,
             backgroundBrandSecondary: palette.telefonicaBlue,
@@ -130,12 +132,12 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey2, 0.4),
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.telefonicaBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -200,10 +202,10 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.coral60,
             textLinkSnackbar: palette.telefonicaBlue30,
             textLinkNeutral: palette.grey9,
-            textLinkNeutralBrand: palette.grey9,
-            textLinkNeutralNegative: palette.grey9,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.grey9,
-            textLinkNeutralMedia: palette.grey9,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.telefonicaBlue70,
             textBrand: palette.telefonicaBlue70,
             inputBorder: palette.grey5,
@@ -395,6 +397,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.grey8,
             backgroundSkeletonInverse: palette.grey8,
@@ -712,6 +716,11 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'regular',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/types/colors.tsx

@@ -30,6 +30,8 @@ export type Colors = {
     backgroundContainerNegative: string;
     backgroundContainerBrandOverBrand: string;
     backgroundContainerAlternative: string;
+    backgroundContainerAlternativeOverAlternative: string;
+    backgroundContainerAlternativeOverBrand: string;
     backgroundOverlay: string;
     backgroundSkeleton: string;
     backgroundSkeletonInverse: string;

package/src/skins/types/index.tsx

@@ -60,6 +60,7 @@ export type TextPresetsConfig = {
     cardDescriptionSnap: TextSizeTokenConfig;
     cardPretitleDefault: TextSizeTokenConfig;
     cardPretitleSnap: TextSizeTokenConfig;
+    headerPretitle: TextTokenConfig;
     cardSubtitleDefault: TextSizeTokenConfig;
     cardSubtitleSnap: TextSizeTokenConfig;
     cardTitleDefault: TextSizeTokenConfig;

package/src/skins/vivo-evolution.tsx

@@ -121,6 +121,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.vivoNeutral950, 0.4),
             backgroundContainerBrandOverBrand: palette.vivoPurple650,
             backgroundContainerAlternative: palette.vivoNeutral25,
+            backgroundContainerAlternativeOverAlternative: palette.vivoNeutral150,
+            backgroundContainerAlternativeOverBrand: palette.vivoPurple800,
             backgroundOverlay: applyAlpha(palette.vivoNeutral975, 0.6),
             backgroundSkeleton: palette.vivoNeutral200,
             backgroundSkeletonInverse: palette.vivoPurple900,
@@ -163,12 +165,12 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.1),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
             buttonLinkNeutralBackgroundPressed: palette.vivoNeutral100,
-            buttonLinkNeutralBackgroundBrand: palette.vivoNeutral0,
-            buttonLinkNeutralBackgroundBrandPressed: palette.vivoNeutral25,
-            buttonLinkNeutralBackgroundNegative: palette.vivoNeutral0,
-            buttonLinkNeutralBackgroundNegativePressed: palette.vivoNeutral25,
-            buttonLinkNeutralBackgroundMedia: palette.vivoNeutral0,
-            buttonLinkNeutralBackgroundMediaPressed: palette.vivoNeutral25,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.1),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.vivoNeutral0, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
             buttonPrimaryBackground: palette.vivoPurple700,
             buttonPrimaryBackgroundInverse: palette.vivoNeutral0,
             buttonPrimaryBackgroundNegative: palette.vivoNeutral0,
@@ -233,10 +235,10 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.vivoPepper600,
             textLinkSnackbar: palette.vivoPurple100,
             textLinkNeutral: palette.vivoNeutral975,
-            textLinkNeutralBrand: palette.vivoNeutral975,
-            textLinkNeutralNegative: palette.vivoNeutral975,
+            textLinkNeutralBrand: palette.vivoNeutral0,
+            textLinkNeutralNegative: palette.vivoNeutral0,
             textLinkNeutralAlternative: palette.vivoNeutral975,
-            textLinkNeutralMedia: palette.vivoNeutral975,
+            textLinkNeutralMedia: palette.vivoNeutral0,
             textActivated: palette.vivoPurple700,
             textBrand: palette.vivoPurple700,
             inputBorder: palette.vivoNeutral500,
@@ -428,6 +430,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.vivoNeutral900,
             backgroundContainerBrandOverBrand: palette.vivoNeutral900,
             backgroundContainerAlternative: palette.vivoNeutral900,
+            backgroundContainerAlternativeOverAlternative: palette.vivoNeutral150,
+            backgroundContainerAlternativeOverBrand: palette.vivoPurple800,
             backgroundOverlay: applyAlpha(palette.vivoNeutral900, 0.8),
             backgroundSkeleton: palette.vivoNeutral800,
             backgroundSkeletonInverse: palette.vivoNeutral800,
@@ -745,6 +749,11 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'medium',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
@@ -840,7 +849,7 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 24}, right: {mobile: 16, desktop: 24}},
-            responsiveLayoutMargin: {mobile: 8, desktop: 48},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;

package/src/skins/vivo.tsx

@@ -77,6 +77,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: palette.vivoPurpleDark,
             backgroundContainerAlternative: palette.grey1,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.vivoPurpleDark,
             backgroundOverlay: applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey3,
             backgroundSkeletonInverse: palette.vivoPurpleDark,
@@ -119,12 +121,12 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
             buttonLinkNeutralBackgroundPressed: palette.grey2,
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.1),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
             buttonPrimaryBackground: palette.vivoPurple,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -189,10 +191,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkDangerMedia: palette.pepper,
             textLinkSnackbar: palette.vivoPurpleLight20,
             textLinkNeutral: palette.grey6,
-            textLinkNeutralBrand: palette.grey6,
-            textLinkNeutralNegative: palette.grey6,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.grey6,
-            textLinkNeutralMedia: palette.grey6,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.vivoPurple,
             textBrand: palette.vivoPurple,
             inputBorder: palette.grey4,
@@ -384,6 +386,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.darkModeGrey6,
             backgroundSkeletonInverse: palette.darkModeGrey6,
@@ -701,6 +705,11 @@ export const getVivoSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'medium',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/switch-component.css.ts

@@ -115,6 +115,15 @@ export const interactiveArea = style({
 });
 
 export const container = style([
+    containerBase,
+    {
+        cursor: 'pointer',
+        display: 'inline-flex',
+        verticalAlign: 'bottom',
+        flexDirection: 'column',
+    },
+]);
+export const containerFullWidth = style([
     containerBase,
     {
         cursor: 'pointer',
@@ -126,6 +135,17 @@ export const containerDisabled = style([
     containerBase,
     {
         cursor: 'default',
+        display: 'inline-flex',
+        verticalAlign: 'bottom',
+        flexDirection: 'column',
+    },
+]);
+export const containerDisabledFullWidth = style([
+    containerBase,
+    {
+        cursor: 'default',
+        display: 'flex',
+        flexDirection: 'column',
     },
 ]);
 

package/src/switch-component.tsx

@@ -155,7 +155,15 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
             onKeyDown={disabled ? undefined : handleKeyDown}
             tabIndex={disabled ? undefined : 0}
             ref={focusableRef}
-            className={disabled ? styles.containerDisabled : styles.container}
+            className={
+                props.render
+                    ? disabled
+                        ? styles.containerDisabledFullWidth
+                        : styles.containerFullWidth
+                    : disabled
+                      ? styles.containerDisabled
+                      : styles.container
+            }
             aria-disabled={disabled}
             aria-label={props['aria-label']}
             aria-labelledby={props['aria-label'] ? undefined : labelId}

package/src/text-tokens.tsx

@@ -37,6 +37,9 @@ export type Dictionary = {
     mainNavigationBarOpenSectionMenu: string;
     mainNavigationBarSectionSeeAll: string;
     backNavigationBar: string;
+    sidenavExpand: string;
+    sidenavCollapse: string;
+    sidenavLandmark: string;
     clearButton: string;
     carouselRegion: string;
     carouselPauseAutoplay: string;
@@ -349,6 +352,27 @@ export const backNavigationBar: TextToken = {
     pt: 'Voltar',
 };
 
+export const sidenavExpand: TextToken = {
+    es: 'Expandir navegación',
+    en: 'Expand navigation',
+    de: 'Navigation ausklappen',
+    pt: 'Expandir navegação',
+};
+
+export const sidenavCollapse: TextToken = {
+    es: 'Contraer navegación',
+    en: 'Collapse navigation',
+    de: 'Navigation einklappen',
+    pt: 'Recolher navegação',
+};
+
+export const sidenavLandmark: TextToken = {
+    es: 'Navegación principal',
+    en: 'Main navigation',
+    de: 'Hauptnavigation',
+    pt: 'Navegação principal',
+};
+
 export const clearButton: TextToken = {
     es: 'Borrar',
     en: 'Clear',