@telefonica/mistica 17.3.0 → 17.5.0

package/src/community/skins/cyber-skin.tsx

@@ -94,6 +94,8 @@ export const getCyberSkin = (): Skin => {
             backgroundContainerNegative: applyAlpha(palette.white, 0.1),
             backgroundContainerBrandOverBrand: palette.brand70,
             backgroundContainerAlternative: palette.brand10,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.brand70,
             backgroundBrand: palette.brand,
             backgroundNegative: palette.grey900,
             backgroundBrandSecondary: palette.brand,
@@ -142,18 +144,18 @@ export const getCyberSkin = (): Skin => {
             buttonLinkDangerBackgroundNegativePressed: palette.red10,
             buttonLinkDangerBackgroundBrandPressed: palette.red10,
             buttonLinkDangerBackgroundMediaPressed: palette.red10,
-            buttonLinkBackgroundPressed: palette.brand10,
+            buttonLinkBackgroundPressed: applyAlpha(palette.brand, 0.08),
             buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundPressed: palette.grey10,
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey10,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey10,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey10,
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey400, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.12),
             buttonPrimaryBackground: palette.black,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -218,10 +220,10 @@ export const getCyberSkin = (): Skin => {
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.brand30,
             textLinkNeutral: palette.grey900,
-            textLinkNeutralBrand: palette.grey900,
-            textLinkNeutralNegative: palette.grey900,
-            textLinkNeutralAlternative: palette.grey900,
-            textLinkNeutralMedia: palette.grey900,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
+            textLinkNeutralAlternative: palette.grey500,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.brand70,
             textBrand: palette.brand70,
             inputBorder: palette.grey400,
@@ -413,6 +415,8 @@ export const getCyberSkin = (): Skin => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.grey700,
             backgroundSkeletonInverse: palette.grey700,
@@ -524,10 +528,9 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
-            textLinkNeutral: palette.brand10,
-            textLinkNeutralBrand: palette.brand10,
-            textLinkNeutralNegative: palette.brand10,
-            textLinkNeutralAlternative: palette.brand10,
+            textLinkNeutral: palette.grey100,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralMedia: palette.white,
             textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,

package/src/fade-out.css.ts

@@ -0,0 +1,12 @@
+import {style, keyframes} from '@vanilla-extract/css';
+
+const fadeIn = keyframes({
+    '0%': {opacity: 1},
+    '100%': {opacity: 0},
+});
+
+export const wrapper = style({
+    animationName: fadeIn,
+    animationTimingFunction: 'ease',
+    animationFillMode: 'both',
+});

package/src/fade-out.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as styles from './fade-out.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+
+import type {DataAttributes} from './utils/types';
+
+const defaultDuration = '0.3s';
+
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    delay?: string;
+    duration?: string;
+    dataAttributes?: DataAttributes;
+};
+
+const FadeOut = ({
+    children,
+    className = '',
+    /**
+     * The length of the fade-in animation.
+     * Use a CSS time value, for example '0.3s' or '300ms'.
+     * The default value is '0.3s'.
+     */
+    duration = defaultDuration,
+    /**
+     * The wait time before the fade-in animation starts.
+     * Use a CSS time value, for example '0.3s' or '300ms'.
+     * The default value is '0' (no wait time).
+     */
+    delay = '0',
+    dataAttributes,
+}: Props): JSX.Element => {
+    return (
+        <div
+            {...getPrefixedDataAttributes({testid: 'FadeOut', ...dataAttributes})}
+            className={`${styles.wrapper} ${className}`}
+            style={{
+                animationDelay: delay,
+                WebkitAnimationDelay: delay,
+                animationDuration: duration,
+                WebkitAnimationDuration: duration,
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default FadeOut;

package/src/header.tsx

@@ -5,11 +5,11 @@ import Stack from './stack';
 import ResponsiveLayout from './responsive-layout';
 import GridLayout from './grid-layout';
 import {useSetOverscrollColor} from './overscroll-color-context';
-import {Text7, Text6, Text3, Text2} from './text';
+import {Text7, Text6, Text, Text2, Text3} from './text';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './header.css';
 import {getPrefixedDataAttributes} from './utils/dom';
-import {Title3, Title4} from './title';
+import {Title1, Title2, Title3, Title4} from './title';
 import {
     type DataAttributes,
     type HeadingType,
@@ -17,6 +17,7 @@ import {
     type RendersNullableElement,
 } from './utils/types';
 import {isBiggerHeading} from './utils/headings';
+import {useTheme} from './hooks';
 
 import type NavigationBreadcrumbs from './navigation-breadcrumbs';
 import type {ButtonPrimary, ButtonSecondary} from './button';
@@ -30,12 +31,15 @@ type OverridableTextProps = {
 
 type RichText = string | ({text: string} & OverridableTextProps);
 
+type TitleSizes = 'title1' | 'title2' | 'title3' | 'title4';
+
 type HeaderProps = {
     headline?: React.ReactNode;
     pretitle?: RichText;
     pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
+    titleSize?: TitleSizes;
     description?: string;
     small?: boolean;
     dataAttributes?: DataAttributes;
@@ -47,45 +51,63 @@ export const Header = ({
     pretitleAs,
     title,
     titleAs = 'h2',
+    titleSize,
     description,
     dataAttributes,
     small = false,
 }: HeaderProps): JSX.Element => {
+    const {textPresets} = useTheme();
+
     const renderPretitle = () => {
         if (!pretitle) {
             return null;
         }
         const baseTextProps = {
-            regular: true,
             color: vars.colors.textPrimary,
             as: pretitleAs,
             dataAttributes: {testid: 'pretitle'},
+            desktopSize: textPresets.headerPretitle.size.desktop,
+            mobileSize: textPresets.headerPretitle.size.mobile,
+            desktopLineHeight: textPresets.headerPretitle.lineHeight.desktop,
+            mobileLineHeight: textPresets.headerPretitle.lineHeight.mobile,
+            weight: textPresets.headerPretitle.weight,
         } as const;
 
         if (typeof pretitle === 'string') {
-            return <Text3 {...baseTextProps}>{pretitle}</Text3>;
+            return <Text {...baseTextProps}>{pretitle}</Text>;
         }
         const {text, ...textProps} = pretitle;
         return (
-            <Text3 {...baseTextProps} {...textProps}>
+            <Text {...baseTextProps} {...textProps}>
                 {text}
-            </Text3>
+            </Text>
         );
     };
 
+    const renderTitle = () => {
+        if (!title) return undefined;
+
+        const baseTitleProps = {
+            children: title,
+            as: titleAs,
+            dataAttributes: {testid: 'title'},
+        } as const;
+
+        const titleComponents = {
+            title1: Title1,
+            title2: Title2,
+            title3: Title3,
+            title4: Title4,
+        } as const;
+
+        const TitleComponent = titleSize ? titleComponents[titleSize] : small ? Title3 : Title4;
+
+        return <TitleComponent {...baseTitleProps} />;
+    };
+
     const pretitleContent = renderPretitle();
 
-    const titleContent = title ? (
-        small ? (
-            <Title3 as={titleAs} dataAttributes={{testid: 'title'}}>
-                {title}
-            </Title3>
-        ) : (
-            <Title4 as={titleAs} dataAttributes={{testid: 'title'}}>
-                {title}
-            </Title4>
-        )
-    ) : undefined;
+    const titleContent = renderTitle();
 
     const headlineContent = headline ? (
         <div

package/src/index.tsx

@@ -7,6 +7,7 @@ export {default as Touchable} from './touchable';
 export type {TouchableElement} from './touchable';
 export {default as Spinner} from './spinner';
 export {default as FadeIn} from './fade-in';
+export {default as FadeOut} from './fade-out';
 
 export {AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion} from './accordion';
 export {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger} from './button';
@@ -114,6 +115,20 @@ export {Grid, GridItem} from './grid';
 export {default as Drawer} from './drawer';
 export {default as Timeline, TimelineItem} from './timeline';
 export {default as SkipLink, SkipLinkNav} from './skip-link';
+export {SidenavBar} from './sidenav-bar';
+export {SidenavLayout} from './sidenav-bar-layout';
+export type {SidenavBarProps} from './sidenav-bar';
+export type {SidenavLayoutProps} from './sidenav-bar-layout';
+export type {
+    SidenavEntry,
+    SidenavSection,
+    SidenavFirstLevelItem,
+    SidenavSecondLevelItem,
+    SidenavSectionTitle,
+    SidenavSlot,
+    SidenavSlotRenderProps,
+    SidenavCollapseState,
+} from './sidenav-bar-types';
 
 // Sheets
 export {default as SheetRoot, showSheet} from './sheet-root';

package/src/list.css.ts

@@ -1,8 +1,10 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import * as mq from './media-queries.css';
 import {vars} from './skins/skin-contract.css';
 import {sprinkles} from './sprinkles.css';
 
+import type {StyleRule} from '@vanilla-extract/css';
+
 export const disabled = style({
     opacity: 0.5,
 });
@@ -11,8 +13,41 @@ export const row = style({
     width: '100%',
 });
 
+const selectionOutlineWidth = 2;
+const selectionOutlineOffset = 2;
+
+export const selectionOutline = style({
+    position: 'relative',
+    borderRadius: vars.borderRadii.container,
+    selectors: {
+        '&::after': {
+            content: '',
+            position: 'absolute',
+            inset: -(selectionOutlineWidth + selectionOutlineOffset),
+            border: `${selectionOutlineWidth}px solid transparent`,
+            borderRadius: `calc(${vars.borderRadii.container} + 3px)`,
+            pointerEvents: 'none',
+            transition: 'border-color 0.08s ease-in-out',
+        },
+    },
+});
+
 export const boxed = style({});
 
+const selectedOutlineStyles = (outlineColor: string): StyleRule => ({
+    selectors: {
+        '&::after': {borderColor: outlineColor},
+    },
+});
+
+export const selectionOutlineColor = styleVariants({
+    default: selectedOutlineStyles(vars.colors.controlActivated),
+    alternative: selectedOutlineStyles(vars.colors.controlActivated),
+    brand: selectedOutlineStyles(vars.colors.controlActivatedBrand),
+    media: selectedOutlineStyles(vars.colors.controlActivatedBrand),
+    negative: selectedOutlineStyles(vars.colors.controlActivatedNegative),
+});
+
 export const touchableBackground = style({
     transition: 'background-color 0.1s ease-in-out',
     ':active': {