@telefonica/mistica 17.0.0 → 17.2.0

package/src/skins/esimflag.tsx

@@ -16,7 +16,7 @@ export const palette = {
     grass: '#99D52A',
     grass10: '#EBF7D4',
     grass70: '#6B951D',
-    grass75: '#5C8019',
+    grass75: '#567718',
     peach: '#FF9800',
     peach10: '#FFF4D5',
     peach75: '#995B00',
@@ -55,6 +55,15 @@ export const getEsimflagSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey1,
+            backgroundSelected: applyAlpha(palette.blue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.blue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.blue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.blue55, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.blue55, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.blue55, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: `linear-gradient(180deg, ${palette.blue55} 0%, ${palette.blue} 60%, ${palette.purple} 100%)`,
             backgroundNegative: palette.blue65,
             backgroundBrandSecondary: palette.blue,
@@ -110,6 +119,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             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,
             buttonPrimaryBackground: palette.blue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -170,9 +186,14 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             textLinkNegative: palette.white,
             textLinkBrand: palette.white,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.tomato55,
-            textLinkDangerMedia: palette.tomato55,
+            textLinkDanger: palette.tomato60,
+            textLinkDangerMedia: palette.tomato60,
             textLinkSnackbar: palette.blue30,
+            textLinkNeutral: palette.blue85,
+            textLinkNeutralBrand: palette.blue85,
+            textLinkNeutralNegative: palette.blue85,
+            textLinkNeutralAlternative: palette.blue85,
+            textLinkNeutralMedia: palette.blue85,
             textActivated: palette.blue,
             textBrand: palette.blue,
             inputBorder: palette.grey4,
@@ -243,7 +264,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             success: palette.grass,
             warning: palette.peach,
             error: palette.tomato,
-            textError: palette.tomato55,
+            textError: palette.tomato60,
             textErrorInverse: palette.white,
             textErrorNegative: palette.white,
             textErrorBrand: palette.white,
@@ -341,6 +362,15 @@ export const getEsimflagSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.blue, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.blue, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.blue, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -379,9 +409,9 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             borderSelected: palette.blue,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.tomato,
-            buttonDangerBackgroundPressed: palette.tomato55,
-            buttonDangerBackgroundHover: palette.tomato55,
+            buttonDangerBackground: palette.tomato55,
+            buttonDangerBackgroundPressed: palette.tomato60,
+            buttonDangerBackgroundHover: palette.tomato60,
             buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
@@ -396,6 +426,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            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.blue,
             buttonPrimaryBackgroundNegative: palette.blue,
@@ -457,8 +494,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             textLinkBrand: palette.purple30,
             textLinkMedia: palette.white,
             textLinkDanger: palette.chili,
-            textLinkDangerMedia: palette.tomato55,
+            textLinkDangerMedia: palette.tomato60,
             textLinkSnackbar: palette.blue30,
+            textLinkNeutral: palette.grey3,
+            textLinkNeutralBrand: palette.grey3,
+            textLinkNeutralNegative: palette.grey3,
+            textLinkNeutralAlternative: palette.grey3,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blue30,
             textBrand: palette.blue30,
             inputBorder: palette.grey4,
@@ -517,7 +559,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             neutralLow: palette.grey6,
             neutralLowAlternative: palette.grey6,
             textPrimary: palette.grey3,
-            textPrimaryInverse: palette.grey3,
+            textPrimaryInverse: palette.grey2,
             textPrimaryNegative: palette.grey3,
             textPrimaryBrand: palette.grey3,
             textPrimaryMedia: palette.white,
@@ -637,6 +679,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -696,6 +739,9 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -705,7 +751,12 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},
@@ -721,6 +772,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
         },
     };
     return skin;

package/src/skins/movistar.tsx

@@ -62,6 +62,15 @@ export const getMovistarSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.movistarWhite,
+            backgroundSelected: applyAlpha(palette.movistarBlue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.movistarBlue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.movistarBlue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.movistarBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.movistarBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.movistarBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: palette.movistarBlue,
             backgroundNegative: palette.movistarBlack,
             backgroundBrandSecondary: palette.movistarBlack,
@@ -117,6 +126,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
             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,
             buttonPrimaryBackground: palette.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -180,6 +196,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
             textLinkDanger: palette.red,
             textLinkDangerMedia: palette.red,
             textLinkSnackbar: palette.blue300,
+            textLinkNeutral: palette.movistarBlack,
+            textLinkNeutralBrand: palette.movistarBlack,
+            textLinkNeutralNegative: palette.movistarBlack,
+            textLinkNeutralAlternative: palette.movistarBlack,
+            textLinkNeutralMedia: palette.movistarBlack,
             textActivated: palette.blueHigh,
             textBrand: palette.blueHigh,
             inputBorder: palette.grey500,
@@ -348,6 +369,15 @@ export const getMovistarSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -403,6 +433,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            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.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.movistarBlue,
             buttonPrimaryBackgroundNegative: palette.movistarBlue,
@@ -466,6 +503,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
             textLinkDanger: palette.red350,
             textLinkDangerMedia: palette.red,
             textLinkSnackbar: palette.darkModeMovistarBlue,
+            textLinkNeutral: palette.movistarWhite,
+            textLinkNeutralBrand: palette.movistarWhite,
+            textLinkNeutralNegative: palette.movistarWhite,
+            textLinkNeutralAlternative: palette.movistarWhite,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blue300,
             textBrand: palette.blue300,
             inputBorder: palette.grey400,
@@ -644,6 +686,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -703,6 +746,9 @@ export const getMovistarSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'default',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 8, desktop: 12}, right: {mobile: 8, desktop: 12}},
@@ -712,7 +758,12 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 16},
                 right: {mobile: 16, desktop: 16},
             },
-            inputPadding: {top: {mobile: 9, desktop: 3}, bottom: {mobile: 9, desktop: 3}},
+            inputPadding: {
+                top: {mobile: 9, desktop: 3},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 9, desktop: 3},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 2, desktop: 2}, bottom: {mobile: 2, desktop: 2}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 40},
@@ -728,6 +779,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;

package/src/skins/o2.tsx

@@ -58,6 +58,15 @@ export const getO2Skin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey20,
+            backgroundSelected: applyAlpha(palette.beyondBlue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.beyondBlue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.beyondBlue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: `linear-gradient(180deg, ${palette.darkBlue} 0%, ${palette.beyondBlue} 64%, ${palette.beyondBlue45} 100%)`,
             backgroundNegative: palette.beyondBlue,
             backgroundBrandSecondary: palette.beyondBlue,
@@ -113,6 +122,13 @@ export const getO2Skin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             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,
             buttonPrimaryBackground: palette.beyondBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -176,6 +192,11 @@ export const getO2Skin: GetKnownSkin = () => {
             textLinkDanger: palette.o2Red65,
             textLinkDangerMedia: palette.o2Red65,
             textLinkSnackbar: palette.beyondBlue30,
+            textLinkNeutral: palette.black,
+            textLinkNeutralBrand: palette.black,
+            textLinkNeutralNegative: palette.black,
+            textLinkNeutralAlternative: palette.black,
+            textLinkNeutralMedia: palette.black,
             textActivated: palette.beyondBlue,
             textBrand: palette.beyondBlue,
             inputBorder: palette.grey45,
@@ -344,6 +365,15 @@ export const getO2Skin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.beyondBlue30, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.beyondBlue30, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.beyondBlue30, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.beyondBlue30, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.beyondBlue30, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.beyondBlue30, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.beyondBlue30, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.beyondBlue30, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.beyondBlue30, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -399,6 +429,13 @@ export const getO2Skin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            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.darkModeBeyondBlue,
             buttonPrimaryBackgroundInverse: palette.darkModeBeyondBlue,
             buttonPrimaryBackgroundNegative: palette.darkModeBeyondBlue,
@@ -462,6 +499,11 @@ export const getO2Skin: GetKnownSkin = () => {
             textLinkDanger: palette.o2Red45,
             textLinkDangerMedia: palette.o2Red65,
             textLinkSnackbar: palette.beyondBlue30,
+            textLinkNeutral: palette.grey30,
+            textLinkNeutralBrand: palette.grey30,
+            textLinkNeutralNegative: palette.grey30,
+            textLinkNeutralAlternative: palette.grey30,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.beyondBlue30,
             textBrand: palette.beyondBlue30,
             inputBorder: palette.grey45,
@@ -640,6 +682,7 @@ export const getO2Skin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -699,6 +742,9 @@ export const getO2Skin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -708,7 +754,12 @@ export const getO2Skin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},
@@ -724,6 +775,8 @@ export const getO2Skin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;

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

@@ -5,6 +5,15 @@ import type {BorderRadiiConfig, Colors, SpacingConfig, TextPresetsConfig} from '
 const colors: Colors = {
     background: '',
     backgroundAlternative: '',
+    backgroundSelected: '',
+    backgroundSelectedHover: '',
+    backgroundSelectedPressed: '',
+    backgroundSelectedBrand: '',
+    backgroundSelectedBrandHover: '',
+    backgroundSelectedBrandPressed: '',
+    backgroundSelectedNegative: '',
+    backgroundSelectedNegativeHover: '',
+    backgroundSelectedNegativePressed: '',
     backgroundBrand: '',
     backgroundNegative: '',
     backgroundBrandSecondary: '',
@@ -60,6 +69,13 @@ const colors: Colors = {
     buttonLinkBackgroundNegativePressed: '',
     buttonLinkBackgroundBrandPressed: '',
     buttonLinkBackgroundMediaPressed: '',
+    buttonLinkNeutralBackgroundPressed: '',
+    buttonLinkNeutralBackgroundBrand: '',
+    buttonLinkNeutralBackgroundBrandPressed: '',
+    buttonLinkNeutralBackgroundNegative: '',
+    buttonLinkNeutralBackgroundNegativePressed: '',
+    buttonLinkNeutralBackgroundMedia: '',
+    buttonLinkNeutralBackgroundMediaPressed: '',
     buttonPrimaryBackground: '',
     buttonPrimaryBackgroundInverse: '',
     buttonPrimaryBackgroundNegative: '',
@@ -123,6 +139,11 @@ const colors: Colors = {
     textLinkDanger: '',
     textLinkDangerMedia: '',
     textLinkSnackbar: '',
+    textLinkNeutral: '',
+    textLinkNeutralBrand: '',
+    textLinkNeutralNegative: '',
+    textLinkNeutralAlternative: '',
+    textLinkNeutralMedia: '',
     textActivated: '',
     textBrand: '',
     inputBorder: '',
@@ -142,6 +163,7 @@ const colors: Colors = {
     controlActivatedNegative: '',
     controlActivatedBrand: '',
     controlError: '',
+    chevronIndicator: '',
     barTrack: '',
     barTrackInverse: '',
     barTrackNegative: '',
@@ -179,7 +201,6 @@ const colors: Colors = {
     neutralMediumBrand: '',
     neutralLow: '',
     neutralLowAlternative: '',
-    chevronIndicator: '',
     textPrimary: '',
     textPrimaryInverse: '',
     textPrimaryNegative: '',
@@ -226,6 +247,8 @@ const colors: Colors = {
     textNavigationSearchBarText: '',
     textAppBar: '',
     textAppBarSelected: '',
+    iosGlassAppBar: '',
+    iosGlassAppBarSelected: '',
     customTabsBackground: '',
     tagTextPromo: '',
     tagTextActive: '',
@@ -285,8 +308,6 @@ const colors: Colors = {
     tagBackgroundErrorBrand: '',
     cardContentOverlay: '',
     cardFooterOverlay: '',
-    iosGlassAppBarSelected: '',
-    iosGlassAppBar: '',
 };
 
 const borderRadii: BorderRadiiConfig = {
@@ -302,6 +323,7 @@ const borderRadii: BorderRadiiConfig = {
     avatar: '',
     mediaSmall: '',
     tag: '',
+    snackbar: '',
 };
 
 type ToThemeTokens<T> = T extends {mobile: number; desktop: number}
@@ -357,12 +379,14 @@ const spacing: ToThemeTokens<SpacingConfig> = {
     buttonDefaultPadding: {left: '', right: ''},
     buttonSmallPadding: {left: '', right: ''},
     cardDefaultPadding: {left: '', right: '', top: '', bottom: ''},
-    inputPadding: {top: '', bottom: ''},
+    inputPadding: {top: '', bottom: '', left: '', right: ''},
     tagPadding: {top: '', bottom: ''},
     feedbackScreenPadding: {top: '', bottom: '', left: '', right: ''},
     heroPadding: {top: '', bottom: ''},
     headerPadding: {top: '', bottom: ''},
     drawerPadding: {top: '', bottom: '', left: '', right: ''},
+    boxedDefaultPadding: {left: '', right: ''},
+    responsiveLayoutMargin: '',
 };
 
 export const vars = createThemeContract({

package/src/skins/telefonica.tsx

@@ -80,6 +80,15 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundSkeletonBrand: palette.telefonicaBlue70,
             navigationBarBackground: palette.telefonicaBlue,
             backgroundAlternative: palette.grey1,
+            backgroundSelected: applyAlpha(palette.telefonicaBlue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.telefonicaBlue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.telefonicaBlue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrandTop: palette.telefonicaBlue,
             backgroundBrandBottom: palette.telefonicaBlue,
             backgroundDropZoneHover: applyAlpha(palette.telefonicaBlue70, 0.05),
@@ -114,6 +123,13 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             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,
             buttonPrimaryBackground: palette.telefonicaBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -177,6 +193,11 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             textLinkDanger: palette.coral60,
             textLinkDangerMedia: palette.coral60,
             textLinkSnackbar: palette.telefonicaBlue30,
+            textLinkNeutral: palette.grey9,
+            textLinkNeutralBrand: palette.grey9,
+            textLinkNeutralNegative: palette.grey9,
+            textLinkNeutralAlternative: palette.grey9,
+            textLinkNeutralMedia: palette.grey9,
             textActivated: palette.telefonicaBlue70,
             textBrand: palette.telefonicaBlue70,
             inputBorder: palette.grey5,
@@ -345,6 +366,15 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.darkModeTelefonicaBlue, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.darkModeTelefonicaBlue, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.darkModeTelefonicaBlue, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeTelefonicaBlue, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeTelefonicaBlue, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeTelefonicaBlue, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.darkModeTelefonicaBlue, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.darkModeTelefonicaBlue, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.darkModeTelefonicaBlue, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -400,6 +430,13 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.telefonicaBlue30, 0.16),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.telefonicaBlue30, 0.16),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            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,
@@ -463,6 +500,11 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             textLinkDanger: palette.coral,
             textLinkDangerMedia: palette.coral60,
             textLinkSnackbar: palette.darkModeTelefonicaBlue,
+            textLinkNeutral: palette.grey1,
+            textLinkNeutralBrand: palette.grey1,
+            textLinkNeutralNegative: palette.grey1,
+            textLinkNeutralAlternative: palette.grey1,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.telefonicaBlue30,
             textBrand: palette.telefonicaBlue30,
             inputBorder: palette.grey5,
@@ -641,6 +683,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',
+            snackbar: '4px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -736,6 +779,9 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 20, desktop: 20}, right: {mobile: 20, desktop: 20}},
             buttonSmallPadding: {left: {mobile: 14, desktop: 14}, right: {mobile: 14, desktop: 14}},
@@ -745,7 +791,12 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},
@@ -761,6 +812,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;