@telefonica/mistica 17.8.0 → 17.10.0

package/src/pagination.tsx

@@ -40,105 +40,125 @@ export type PaginationProps = {
     'aria-label'?: string;
 };
 
-type PageItem = {type: 'page'; page: number; current: boolean};
-type EllipsisItem = {type: 'ellipsis'};
-type PaginationItem = ExclusifyUnion<PageItem | EllipsisItem>;
+type Visibility = 'desktop' | 'mobile' | 'any';
+type ResponsivePaginationItem = ExclusifyUnion<
+    {type: 'page'; page: number; current: boolean} | {type: 'ellipsis'}
+> & {visibility: Visibility};
 
 const DEFAULT_SURROUNDING_PAGE_COUNT = 1;
 const FIRST_PAGE = 1;
-
-const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
-
-export const getPaginationItems = ({
+const DESKTOP_BOUNDARY_SLOT_COUNT = 4;
+const MOBILE_BOUNDARY_SLOT_COUNT = 2;
+
+const getVisibility = (desktop: boolean, mobile: boolean): Visibility =>
+    desktop && mobile ? 'any' : desktop ? 'desktop' : 'mobile';
+
+/**
+ * Creates one ordered list with viewport-specific visibility for pages and ellipses.
+ * With 20 pages and current page 10, desktop shows [1, ..., 9, 10, 11, ..., 20]
+ * and mobile shows [..., 9, 10, 11, ...]; only pages 1 and 20 are desktop-only.
+ */
+const getResponsivePaginationItems = ({
     totalPages,
     currentPage,
     surroundingPageCount = DEFAULT_SURROUNDING_PAGE_COUNT,
-    includeBoundaryPages = true,
 }: {
     totalPages: number;
     currentPage: number;
     surroundingPageCount?: number;
-    includeBoundaryPages?: boolean;
-}): Array<PaginationItem> => {
+}): Array<ResponsivePaginationItem> => {
     if (totalPages <= 1) {
         return [];
     }
 
-    const activePage = clamp(currentPage, FIRST_PAGE, totalPages);
-    const surroundingCount = clamp(Math.floor(surroundingPageCount), 0, totalPages);
+    const activePage = Math.min(Math.max(currentPage, FIRST_PAGE), totalPages);
+    const surroundingCount = Math.min(Math.max(Math.floor(surroundingPageCount), 0), totalPages);
     const dynamicPageCount = 2 * surroundingCount + 1;
+    const createPageRange = (start: number, end: number): Array<number> =>
+        Array.from({length: Math.max(0, end - start + 1)}, (_, index) => start + index);
 
-    if (totalPages <= dynamicPageCount) {
-        return Array.from({length: totalPages}, (_, index) => {
-            const page = index + FIRST_PAGE;
-            return {type: 'page', page, current: page === activePage};
-        });
-    }
-
-    const lastPage = totalPages;
-    const createPageItem = (page: number): PaginationItem => ({
-        type: 'page',
-        page,
-        current: page === activePage,
-    });
-    const createPageRange = (start: number, end: number): Array<PaginationItem> =>
-        Array.from({length: Math.max(0, end - start + 1)}, (_, index) => createPageItem(start + index));
-
-    if (!includeBoundaryPages) {
-        const rangeStart = Math.max(
-            Math.min(activePage - surroundingCount, lastPage - dynamicPageCount),
-            FIRST_PAGE + 1
-        );
-        const rangeEnd = rangeStart + dynamicPageCount - 1;
-        const items: Array<PaginationItem> = [];
-
-        if (rangeStart > FIRST_PAGE + 1) {
-            items.push({type: 'ellipsis'});
-        } else {
-            items.push(createPageItem(FIRST_PAGE));
-        }
-
-        items.push(...createPageRange(rangeStart, rangeEnd));
-
-        if (rangeEnd < lastPage - 1) {
-            items.push({type: 'ellipsis'});
-        } else if (rangeEnd < lastPage) {
-            items.push(createPageItem(lastPage));
-        }
-
-        return items;
-    }
-
-    const rangeStart = Math.max(
-        Math.min(activePage - surroundingCount, lastPage - dynamicPageCount - 1),
+    const desktopRangeStart = Math.max(
+        Math.min(activePage - surroundingCount, totalPages - dynamicPageCount - 1),
         FIRST_PAGE + 2
     );
-    const rangeEnd = Math.min(
+    const desktopRangeEnd = Math.min(
         Math.max(activePage + surroundingCount, FIRST_PAGE + dynamicPageCount + 1),
-        lastPage - 2
+        totalPages - 2
+    );
+    const desktopPages = new Set(
+        totalPages <= dynamicPageCount + DESKTOP_BOUNDARY_SLOT_COUNT
+            ? createPageRange(FIRST_PAGE, totalPages)
+            : [
+                  FIRST_PAGE,
+                  ...(desktopRangeStart > FIRST_PAGE + 2 ? [] : [FIRST_PAGE + 1]),
+                  ...createPageRange(desktopRangeStart, desktopRangeEnd),
+                  ...(desktopRangeEnd < totalPages - 2 ? [] : [totalPages - 1]),
+                  totalPages,
+              ]
     );
 
-    const items: Array<PaginationItem> = [createPageItem(FIRST_PAGE)];
+    const mobileRangeStart = Math.max(
+        Math.min(activePage - surroundingCount, totalPages - dynamicPageCount),
+        FIRST_PAGE + 1
+    );
+    const mobileRangeEnd = mobileRangeStart + dynamicPageCount - 1;
+    const mobilePages = new Set(
+        totalPages <= dynamicPageCount + MOBILE_BOUNDARY_SLOT_COUNT
+            ? createPageRange(FIRST_PAGE, totalPages)
+            : [
+                  ...(mobileRangeStart > FIRST_PAGE + 1 ? [] : [FIRST_PAGE]),
+                  ...createPageRange(mobileRangeStart, mobileRangeEnd),
+                  ...(mobileRangeEnd < totalPages - 1 ? [] : [totalPages]),
+              ]
+    );
 
-    if (rangeStart > FIRST_PAGE + 2) {
-        items.push({type: 'ellipsis'});
-    } else {
-        items.push(createPageItem(FIRST_PAGE + 1));
+    const items: Array<ResponsivePaginationItem> = [];
+    let lastDesktopPage = FIRST_PAGE - 1;
+    let lastMobilePage = FIRST_PAGE - 1;
+    let hasDesktopEllipsis = false;
+    let hasMobileEllipsis = false;
+
+    for (const page of [...new Set([...desktopPages, ...mobilePages])].sort((a, b) => a - b)) {
+        const isDesktop = desktopPages.has(page);
+        const isMobile = mobilePages.has(page);
+        const needsDesktopEllipsis: boolean =
+            !hasDesktopEllipsis && (!isDesktop || page > lastDesktopPage + 1);
+        const needsMobileEllipsis: boolean = !hasMobileEllipsis && (!isMobile || page > lastMobilePage + 1);
+
+        if ((isDesktop && needsDesktopEllipsis) || (isMobile && needsMobileEllipsis)) {
+            items.push({
+                type: 'ellipsis',
+                visibility: getVisibility(needsDesktopEllipsis, needsMobileEllipsis),
+            });
+            hasDesktopEllipsis ||= needsDesktopEllipsis;
+            hasMobileEllipsis ||= needsMobileEllipsis;
+        }
+        items.push({
+            type: 'page',
+            page,
+            current: page === activePage,
+            visibility: getVisibility(isDesktop, isMobile),
+        });
+        if (isDesktop) {
+            lastDesktopPage = page;
+            hasDesktopEllipsis = false;
+        }
+        if (isMobile) {
+            lastMobilePage = page;
+            hasMobileEllipsis = false;
+        }
     }
 
-    items.push(...createPageRange(rangeStart, rangeEnd));
-
-    if (rangeEnd < lastPage - 2) {
-        items.push({type: 'ellipsis'});
-    } else {
-        items.push(createPageItem(lastPage - 1));
+    const needsDesktopEllipsis = lastDesktopPage < totalPages && !hasDesktopEllipsis;
+    const needsMobileEllipsis = lastMobilePage < totalPages && !hasMobileEllipsis;
+    if (needsDesktopEllipsis || needsMobileEllipsis) {
+        items.push({type: 'ellipsis', visibility: getVisibility(needsDesktopEllipsis, needsMobileEllipsis)});
     }
-
-    items.push(createPageItem(lastPage));
-
     return items;
 };
 
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
 const PaginationLabel = ({children}: {children: React.ReactNode}): JSX.Element => {
     return (
         <Text3 as="span" medium color="currentColor" wordBreak={false}>
@@ -159,13 +179,12 @@ const getEllipsisColor = (variant: NonDeprecatedVariant): string => {
 };
 
 type PageListProps = {
-    items: Array<PaginationItem>;
+    items: Array<ResponsivePaginationItem>;
     disabled?: boolean;
-    className?: string;
     onPageClick: (page: number) => void;
 };
 
-const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX.Element => {
+const PageList = ({items, disabled, onPageClick}: PageListProps): JSX.Element => {
     const {texts, t} = useTheme();
     const variant = useThemeVariant();
     const goToPageLabel = (page: number) =>
@@ -174,11 +193,12 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
         t(texts.paginationCurrentPage || tokens.paginationCurrentPage, String(page));
 
     return (
-        <ol className={classnames(styles.pageList, className)}>
+        <ol className={styles.pageList}>
             {items.map((item, index) => {
+                const className = classnames(styles.pageListItem, styles.itemVisibility[item.visibility]);
                 if (item.type === 'ellipsis') {
                     return (
-                        <li key={`ellipsis-${index}`} className={styles.pageListItem} aria-hidden="true">
+                        <li key={`ellipsis-${index}`} className={className} aria-hidden="true">
                             <Text3 as="span" medium color={getEllipsisColor(variant)} wordBreak={false}>
                                 ...
                             </Text3>
@@ -188,7 +208,7 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
 
                 if (item.current) {
                     return (
-                        <li key={item.page} className={styles.pageListItem}>
+                        <li key={item.page} className={className}>
                             <Touchable
                                 className={classnames(
                                     styles.currentPage,
@@ -208,7 +228,7 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
                 }
 
                 return (
-                    <li key={item.page} className={styles.pageListItem}>
+                    <li key={item.page} className={className}>
                         <Touchable
                             className={classnames(styles.pageButton, styles.pageButtonVariants[variant])}
                             disabled={disabled}
@@ -281,17 +301,10 @@ export const Pagination = ({
 
     const isPrevDisabled = activePage <= 1;
     const isNextDisabled = activePage >= totalPages;
-    const desktopItems = getPaginationItems({
-        totalPages,
-        currentPage: activePage,
-        surroundingPageCount,
-        includeBoundaryPages: true,
-    });
-    const mobileItems = getPaginationItems({
+    const items = getResponsivePaginationItems({
         totalPages,
         currentPage: activePage,
         surroundingPageCount,
-        includeBoundaryPages: false,
     });
 
     return (
@@ -328,22 +341,7 @@ export const Pagination = ({
                     </ButtonLink>
                 ))}
 
-            {!hidePageList && (
-                <>
-                    <PageList
-                        items={desktopItems}
-                        disabled={disabled}
-                        className={styles.pageListDesktop}
-                        onPageClick={goToPage}
-                    />
-                    <PageList
-                        items={mobileItems}
-                        disabled={disabled}
-                        className={styles.pageListMobile}
-                        onPageClick={goToPage}
-                    />
-                </>
-            )}
+            {!hidePageList && <PageList items={items} disabled={disabled} onPageClick={goToPage} />}
             {!hideNavigationControls &&
                 (mode === 'iconOnly' ? (
                     <IconButton

package/src/skins/blau.tsx

@@ -99,6 +99,16 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.grey6, 0.05),
             backgroundDropZoneMediaDragover: applyAlpha(palette.grey6, 0.08),
+            messageBubbleBackgroundOutgoing: palette.grey1,
+            messageBubbleBackgroundOutgoingBrand: palette.grey1,
+            messageBubbleBackgroundOutgoingAlternative: palette.grey1,
+            messageBubbleBackgroundOutgoingNegative: palette.grey1,
+            messageBubbleBackgroundOutgoingMedia: palette.grey1,
+            messageBubbleBackgroundIncoming: palette.blauBluePrimary20,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -408,6 +418,16 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.15),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey5,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
@@ -713,6 +733,16 @@ export const getBlauSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'light',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'light',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -790,6 +820,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             },
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
         },
     };
     return skin;

package/src/skins/defaults.tsx

@@ -39,6 +39,16 @@ export const defaultTextPresetsConfig: TextPresetsConfig = {
         size: {desktop: 28, mobile: 20},
         weight: 'bold',
     },
+    feedbackScreenDescription: {
+        lineHeight: {desktop: 24, mobile: 24},
+        size: {desktop: 18, mobile: 16},
+        weight: 'regular',
+    },
+    feedbackScreenTitle: {
+        lineHeight: {desktop: 40, mobile: 32},
+        size: {desktop: 32, mobile: 24},
+        weight: 'light',
+    },
     title1: {
         lineHeight: {desktop: 20, mobile: 16},
         size: {desktop: 14, mobile: 12},
@@ -133,5 +143,6 @@ export const defaultSpacing: SpacingConfig = {
         right: {mobile: 16, desktop: 24},
     },
     boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+    boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
     responsiveLayoutMargin: {mobile: 16, desktop: 48},
 };

package/src/skins/esimflag.tsx

@@ -103,6 +103,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.blue55, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.blue55, 0.4),
+            messageBubbleBackgroundOutgoing: palette.blue10,
+            messageBubbleBackgroundOutgoingBrand: palette.blue10,
+            messageBubbleBackgroundOutgoingAlternative: palette.blue10,
+            messageBubbleBackgroundOutgoingNegative: palette.blue10,
+            messageBubbleBackgroundOutgoingMedia: palette.blue10,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -413,6 +423,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.08),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
             borderHigh: palette.grey5,
@@ -717,6 +737,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -794,6 +824,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             },
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
         },
     };
     return skin;

package/src/skins/movistar.tsx

@@ -110,6 +110,16 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.movistarBlack, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.movistarBlack, 0.4),
+            messageBubbleBackgroundOutgoing: palette.blueLight,
+            messageBubbleBackgroundOutgoingBrand: palette.blueLight,
+            messageBubbleBackgroundOutgoingAlternative: palette.blueLight,
+            messageBubbleBackgroundOutgoingNegative: palette.blueLight,
+            messageBubbleBackgroundOutgoingMedia: palette.blueLight,
+            messageBubbleBackgroundIncoming: palette.grey100,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey200,
             borderLow: palette.grey100,
             border: palette.grey300,
@@ -419,6 +429,16 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.blueDark,
+            messageBubbleBackgroundOutgoingBrand: palette.blueDark,
+            messageBubbleBackgroundOutgoingAlternative: palette.blueDark,
+            messageBubbleBackgroundOutgoingNegative: palette.blueDark,
+            messageBubbleBackgroundOutgoingMedia: palette.blueDark,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey600,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
@@ -724,6 +744,16 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 size: {desktop: 20, mobile: 20},
                 weight: 'bold',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 22},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 32, mobile: 28},
+                size: {desktop: 28, mobile: 24},
+                weight: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 22},
                 size: {desktop: 18, mobile: 16},
@@ -800,6 +830,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 24},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };

package/src/skins/o2.tsx

@@ -11,6 +11,7 @@ import type {GetKnownSkin, KnownSkin} from './types';
 
 export const palette = {
     beyondBlue: '#0050FF',
+    beyondBlue5: '#F2F6FF',
     beyondBlue10: '#E5EDFF',
     beyondBlue15: '#CCDCFF',
     beyondBlue30: '#80A7FF',
@@ -106,6 +107,16 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.beyondBlue90, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.beyondBlue90, 0.4),
+            messageBubbleBackgroundOutgoing: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingBrand: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingAlternative: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingNegative: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingMedia: palette.beyondBlue5,
+            messageBubbleBackgroundIncoming: palette.grey20,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey30,
             borderLow: palette.grey20,
             border: palette.grey30,
@@ -414,6 +425,16 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             navigationBarBackground: palette.darkModeBlack,
             skeletonWave: palette.grey80,
             borderLow: palette.darkModeBlack,
@@ -720,6 +741,16 @@ export const getO2Skin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -796,6 +827,7 @@ export const getO2Skin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };

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

@@ -47,6 +47,16 @@ const colors: Colors = {
     backgroundDropZoneNegativeDragover: '',
     backgroundDropZoneMediaHover: '',
     backgroundDropZoneMediaDragover: '',
+    messageBubbleBackgroundOutgoing: '',
+    messageBubbleBackgroundOutgoingBrand: '',
+    messageBubbleBackgroundOutgoingAlternative: '',
+    messageBubbleBackgroundOutgoingNegative: '',
+    messageBubbleBackgroundOutgoingMedia: '',
+    messageBubbleBackgroundIncoming: '',
+    messageBubbleBackgroundIncomingBrand: '',
+    messageBubbleBackgroundIncomingAlternative: '',
+    messageBubbleBackgroundIncomingNegative: '',
+    messageBubbleBackgroundIncomingMedia: '',
     skeletonWave: '',
     borderLow: '',
     border: '',
@@ -376,6 +386,8 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
         size: '',
         weight: '',
     },
+    feedbackScreenDescription: {lineHeight: '', size: '', weight: ''},
+    feedbackScreenTitle: {lineHeight: '', size: '', weight: ''},
     headerPretitle: {lineHeight: '', size: '', weight: ''},
 };
 
@@ -390,6 +402,7 @@ const spacing: ToThemeTokens<SpacingConfig> = {
     headerPadding: {top: '', bottom: ''},
     drawerPadding: {top: '', bottom: '', left: '', right: ''},
     boxedDefaultPadding: {left: '', right: ''},
+    boxedSmallPadding: {top: '', bottom: ''},
     responsiveLayoutMargin: '',
 };
 

package/src/skins/telefonica.tsx

@@ -107,6 +107,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.telefonicaBlue80, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.telefonicaBlue80, 0.4),
+            messageBubbleBackgroundOutgoing: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingBrand: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingAlternative: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingNegative: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingMedia: palette.telefonicaBlue10,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey2,
@@ -416,6 +426,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey8,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
@@ -682,18 +702,18 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
         },
         borderRadii: {
             avatar: '50%',
-            bar: '0px',
+            bar: '999px',
             button: '32px',
-            checkbox: '2px',
-            container: '4px',
+            checkbox: '4px',
+            container: '20px',
             indicator: '24px',
             chip: '24px',
             tag: '24px',
-            input: '8px',
-            popup: '4px',
-            sheet: '0px',
-            mediaSmall: '2px',
-            snackbar: '4px',
+            input: '12px',
+            popup: '12px',
+            sheet: '20px',
+            mediaSmall: '12px',
+            snackbar: '12px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -721,6 +741,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'regular',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'regular',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -833,6 +863,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };