@telefonica/mistica 17.1.0 → 17.3.0

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';
 
@@ -711,11 +717,12 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             container: '24px',
             indicator: '24px',
             chip: '24px',
-            tag: '10px',
+            tag: '8px',
             input: '16px',
             popup: '16px',
             sheet: '24px',
             mediaSmall: '12px',
+            snackbar: '24px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -780,18 +787,18 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 weight: 'medium',
             },
             title2: {
-                lineHeight: {desktop: 24, mobile: 24},
-                size: {desktop: 18, mobile: 16},
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
             title3: {
-                lineHeight: {desktop: 28, mobile: 24},
-                size: {desktop: 24, mobile: 18},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
             },
             title4: {
-                lineHeight: {desktop: 40, mobile: 32},
-                size: {desktop: 32, mobile: 24},
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'medium',
             },
         },
@@ -800,13 +807,7 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'inverse',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: false,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: false, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -817,7 +818,12 @@ export const getVivoEvolutionSkin: 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: 16, desktop: 16},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},

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';
 
@@ -672,6 +678,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '24px',
             mediaSmall: '12px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -756,13 +763,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'inverse',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -773,7 +774,12 @@ export const getVivoSkin: 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},

package/src/snackbar.css.ts

@@ -34,7 +34,7 @@ export const snackbarOpen = style({
 export const wrapper = style([
     sprinkles({
         position: 'fixed',
-        borderRadius: vars.borderRadii.popup,
+        borderRadius: vars.borderRadii.snackbar,
     }),
     {
         maxWidth: 800,

package/src/stepper.css.ts

@@ -47,7 +47,7 @@ const currentNumberTextKeyframes = keyframes({
         color: skinVars.colors.textSecondary,
     },
     '100%': {
-        color: skinVars.colors.textPrimaryInverse,
+        color: skinVars.colors.textPrimaryNegative,
     },
 });
 

package/src/stepper.tsx

@@ -104,7 +104,7 @@ const Stepper = ({
                                         weight={textPresets.indicator.weight}
                                         color={
                                             isCurrent
-                                                ? vars.colors.textPrimaryInverse
+                                                ? vars.colors.textPrimaryNegative
                                                 : vars.colors.textSecondary
                                         }
                                         aria-hidden="true"

package/src/text-field-base.css.ts

@@ -10,8 +10,8 @@ const borderSize = 1;
 // We need to substract border size from padding because the container has boxSizing: border-box
 export const fieldTopPadding = `calc(${vars.spacing.inputPadding.top} - ${borderSize}px)`;
 export const fieldBottomPadding = `calc(${vars.spacing.inputPadding.bottom} - ${borderSize}px)`;
-export const fieldLeftPadding = 12 - borderSize;
-export const fieldRightPadding = 16 - borderSize;
+export const fieldLeftPadding = `calc(${vars.spacing.inputPadding.left} - ${borderSize}px)`;
+export const fieldRightPadding = `calc(${vars.spacing.inputPadding.right} - ${borderSize}px)`;
 
 export const fieldElementsGap = 12;
 export const fieldEndIconGap = 4;

package/src/text-field-base.tsx

@@ -5,7 +5,7 @@ import {useIsomorphicLayoutEffect, useScreenSize, useTheme} from './hooks';
 import {InternalIconButton, InternalToggleIconButton} from './icon-button';
 import {iconSize} from './icon-button.css';
 import {vars} from './skins/skin-contract.css';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import * as styles from './text-field-base.css';
 import {FieldContainer, HelperText, Label} from './text-field-components';
 import {fieldVars} from './text-field-base.css';
@@ -137,6 +137,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     readOnly?: boolean;
     preventCopy?: boolean;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 interface TextFieldBaseProps {
@@ -186,6 +187,7 @@ interface TextFieldBaseProps {
     max?: string;
     role?: string;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 const preventCopyHandler = (e: React.ClipboardEvent<HTMLInputElement>) => {
@@ -222,6 +224,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
             preventCopy,
             showOptionalLabel = true,
             required,
+            small,
             ...rest
         },
         ref
@@ -312,6 +315,8 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
         const hasEndIcon = !!endIcon;
         const reservesRightSpace = hasEndIcon || endIconSpaceReserved;
 
+        const ValueText = small ? Text2 : Text3;
+
         const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
         const scale = isShrinked
             ? isTabletOrSmaller
@@ -319,11 +324,11 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 : fieldVars.labelScaleDesktop
             : 1;
         const labelStyle = {
-            left: `calc(${styles.fieldLeftPadding}px + ${startIcon ? startIconWidth : '0px'})`,
+            left: `calc(${styles.fieldLeftPadding} + ${startIcon ? startIconWidth : '0px'})`,
             // shrinking means applying a scale transformation, so width will be proportionally reduced.
             // Let's keep the original width.
-            width: `calc((100% - ${styles.fieldLeftPadding}px - ${startIcon ? startIconWidth : '0px'} - ${
-                reservesRightSpace || endIconOverlay ? endIconWidth : `${styles.fieldRightPadding}px`
+            width: `calc((100% - ${styles.fieldLeftPadding} - ${startIcon ? startIconWidth : '0px'} - ${
+                endIcon || endIconOverlay ? endIconWidth : styles.fieldRightPadding
             }) / ${scale})`,
         };
 
@@ -358,6 +363,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 readOnly={rest.readOnly}
                 dataAttributes={dataAttributes}
                 focus={focus}
+                small={small}
             >
                 <ThemeVariant variant="default">
                     {startIcon && (
@@ -377,9 +383,9 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                 opacity: inputState === 'default' ? 0 : 1,
                             }}
                         >
-                            <Text3 color={vars.colors.textSecondary} regular wordBreak={false}>
+                            <ValueText color={vars.colors.textSecondary} regular wordBreak={false}>
                                 {prefix}
-                            </Text3>
+                            </ValueText>
                         </div>
                     )}
                     {label && (
@@ -411,7 +417,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                     paddingLeft: prefix
                                         ? 0
                                         : startIcon
-                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding}px)`
+                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding})`
                                           : styles.fieldLeftPadding,
                                     ...props.style,
                                     fontFamily,
@@ -514,6 +520,8 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
         const id = idProp || reactId;
         const autoSuggestId = React.useId();
 
+        const MenuText = props.small ? Text2 : Text3;
+
         const suggestionEmptyCaseText =
             typeof withSuggestionsEmptyCase === 'string'
                 ? withSuggestionsEmptyCase
@@ -587,7 +595,7 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                                 [styles.menuItemSelected]: isHighlighted,
                             })}
                         >
-                            <Text3 regular>{suggestion}</Text3>
+                            <MenuText regular>{suggestion}</MenuText>
                         </div>
                     )}
                     renderSuggestionsContainer={(options) => {
@@ -601,9 +609,9 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                         const children =
                             suggestions.length === 0 && withSuggestionsEmptyCase ? (
                                 <div role="status" className={classNames(styles.menuItemBase)}>
-                                    <Text3 regular color={vars.colors.textSecondary}>
+                                    <MenuText regular color={vars.colors.textSecondary}>
                                         {suggestionEmptyCaseText}
-                                    </Text3>
+                                    </MenuText>
                                 </div>
                             ) : (
                                 options.children

package/src/text-field-components.css.ts

@@ -26,7 +26,7 @@ export const labelContainer = style([
                 transform: `translateY(calc(${fieldVars.shrinkedLabelMobileLineHeight} / 2)) scale(1)`,
             },
         },
-        width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px)`,
+        width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding})`,
     },
 ]);
 
@@ -55,12 +55,12 @@ export const labelText = style([
 export const shrinked = style({
     transform: `translateY(0) scale(${fieldVars.labelScaleDesktop})`,
     lineHeight: `calc(${fieldVars.shrinkedLabelDesktopLineHeight} / ${fieldVars.labelScaleDesktop})`,
-    width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleDesktop})`,
+    width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleDesktop})`,
     '@media': {
         [mq.tabletOrSmaller]: {
             transform: `translateY(0) scale(${fieldVars.labelScaleMobile})`,
             lineHeight: `calc(${fieldVars.shrinkedLabelMobileLineHeight} / ${fieldVars.labelScaleMobile})`,
-            width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleMobile})`,
+            width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleMobile})`,
         },
     },
 });
@@ -129,11 +129,15 @@ export const field = style([
     fieldFocusRing,
 ]);
 
-export const helperContainer = sprinkles({
-    paddingLeft: 12,
-    paddingRight: 16,
-    display: 'flex',
-});
+export const helperContainer = style([
+    sprinkles({
+        display: 'flex',
+    }),
+    {
+        paddingLeft: vars.spacing.inputPadding.left,
+        paddingRight: vars.spacing.inputPadding.right,
+    },
+]);
 
 export const leftHelperText = style([
     sprinkles({

package/src/text-field-components.tsx

@@ -14,14 +14,15 @@ import {applyCssVars, pxToRem} from './utils/css';
 
 import type {DataAttributes} from './utils/types';
 
-export const useApplyCssVars = (): Record<string, string> => {
+export const useApplyCssVars = (small?: boolean): Record<string, string> => {
     const {textPresets} = useTheme();
+    const inputValuePreset = small ? textPresets.text2 : textPresets.inputValue;
 
     return applyCssVars({
-        [fieldVars.mobileFontSize]: pxToRem(textPresets.inputValue.size.mobile),
-        [fieldVars.desktopFontSize]: pxToRem(textPresets.inputValue.size.desktop),
-        [fieldVars.mobileLineHeight]: pxToRem(textPresets.inputValue.lineHeight.mobile),
-        [fieldVars.desktopLineHeight]: pxToRem(textPresets.inputValue.lineHeight.desktop),
+        [fieldVars.mobileFontSize]: pxToRem(inputValuePreset.size.mobile),
+        [fieldVars.desktopFontSize]: pxToRem(inputValuePreset.size.desktop),
+        [fieldVars.mobileLineHeight]: pxToRem(inputValuePreset.lineHeight.mobile),
+        [fieldVars.desktopLineHeight]: pxToRem(inputValuePreset.lineHeight.desktop),
 
         [fieldVars.shrinkedLabelMobileFontSize]: pxToRem(textPresets.inputLabel.size.mobile),
         [fieldVars.shrinkedLabelDesktopFontSize]: pxToRem(textPresets.inputLabel.size.desktop),
@@ -33,8 +34,8 @@ export const useApplyCssVars = (): Record<string, string> => {
         [fieldVars.helperTextMobileLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.mobile),
         [fieldVars.helperTextDesktopLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.desktop),
 
-        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${textPresets.inputValue.size.mobile})`,
-        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${textPresets.inputValue.size.desktop})`,
+        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${inputValuePreset.size.mobile})`,
+        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${inputValuePreset.size.desktop})`,
     });
 };
 
@@ -185,6 +186,7 @@ type FieldContainerProps = {
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
     focus?: boolean;
+    small?: boolean;
 };
 
 export const FieldContainer = ({
@@ -198,8 +200,9 @@ export const FieldContainer = ({
     readOnly,
     dataAttributes,
     focus,
+    small,
 }: FieldContainerProps): JSX.Element => {
-    const cssVarStyles = useApplyCssVars();
+    const cssVarStyles = useApplyCssVars(small);
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div