@telefonica/mistica 17.2.0 → 17.4.0

package/src/skins/blau.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {BLAU_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -74,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,
@@ -120,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,
@@ -191,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,
@@ -381,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,

package/src/skins/esimflag.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {ESIMFLAG_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -78,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,
@@ -120,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,
@@ -190,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,
@@ -385,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,

package/src/skins/movistar.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {MOVISTAR_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -85,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,
@@ -127,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,
@@ -197,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,
@@ -392,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,

package/src/skins/o2.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {O2_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -81,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,
@@ -123,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,
@@ -193,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,
@@ -388,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,

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

@@ -28,6 +28,8 @@ const colors: Colors = {
     backgroundContainerNegative: '',
     backgroundContainerBrandOverBrand: '',
     backgroundContainerAlternative: '',
+    backgroundContainerAlternativeOverAlternative: '',
+    backgroundContainerAlternativeOverBrand: '',
     backgroundOverlay: '',
     backgroundSkeleton: '',
     backgroundSkeletonInverse: '',

package/src/skins/telefonica.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {TELEFONICA_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -70,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,
@@ -124,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,
@@ -194,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,
@@ -389,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,

package/src/skins/types/colors.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 export type Colors = {
     background: string;
     backgroundAlternative: string;
@@ -24,6 +30,8 @@ export type Colors = {
     backgroundContainerNegative: string;
     backgroundContainerBrandOverBrand: string;
     backgroundContainerAlternative: string;
+    backgroundContainerAlternativeOverAlternative: string;
+    backgroundContainerAlternativeOverBrand: string;
     backgroundOverlay: string;
     backgroundSkeleton: string;
     backgroundSkeletonInverse: string;
@@ -46,6 +54,10 @@ export type Colors = {
     border: string;
     borderHigh: string;
     borderSelected: string;
+    completedStep: string;
+    completedStepInverse: string;
+    completedStepNegative: string;
+    completedStepBrand: string;
     coverBackgroundHover: string;
     coverBackgroundPressed: string;
     buttonDangerBackground: string;
@@ -146,10 +158,6 @@ export type Colors = {
     inputBorderInverse: string;
     inputBorderNegative: string;
     inputBorderBrand: string;
-    completedStep: string;
-    completedStepInverse: string;
-    completedStepNegative: string;
-    completedStepBrand: string;
     control: string;
     controlActivated: string;
     controlInverse: string;
@@ -207,13 +215,13 @@ export type Colors = {
     textSecondaryNegative: string;
     textSecondaryBrand: string;
     textSecondaryMedia: string;
-    success: string;
-    warning: string;
     error: string;
     textError: string;
     textErrorInverse: string;
     textErrorNegative: string;
     textErrorBrand: string;
+    success: string;
+    warning: string;
     promo: string;
     highlight: string;
     successLow: string;

package/src/skins/vivo-evolution.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {VIVO_EVOLUTION_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -115,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,
@@ -157,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,
@@ -227,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,
@@ -422,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,
@@ -834,7 +844,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

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {VIVO_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -71,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,
@@ -113,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,
@@ -183,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,
@@ -378,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,

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',