@telefonica/mistica 17.1.0 → 17.2.0

package/src/icon-button.css.ts

@@ -280,24 +280,24 @@ export const iconButtonTokens = styleVariants({
     'danger-transparent-default': {
         vars: {
             [background]: 'transparent',
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-brand': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-negative': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
             [iconColor]: skinVars.colors.error,
         },
     },

package/src/list.tsx

@@ -36,7 +36,7 @@ import type {DataAttributes, TrackingEvent, IconProps} from './utils/types';
 import type {ExclusifyUnion} from './utils/utility-types';
 
 type ListContextType = {small: boolean};
-const ListContext = React.createContext<ListContextType>({small: false});
+export const ListContext = React.createContext<ListContextType>({small: false});
 
 type Right = (({centerY}: {centerY: boolean}) => React.ReactNode) | React.ReactNode;
 

package/src/menu.css.ts

@@ -95,6 +95,20 @@ export const menuItemHovered = style({
     },
 });
 
+export const menuItemHoveredDestructive = style({
+    transition: 'background-color 0.1s ease-in-out',
+    backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed,
+    ':active': {
+        backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            backgroundColor: 'transparent',
+            transition: 'none',
+        },
+    },
+});
+
 export const menuItemEnabled = style({
     '@media': {
         [mq.touchableOnly]: {
@@ -132,7 +146,7 @@ export const itemTextContent = style({
     gap: 2,
 });
 
-export const iconContainer = style({
+export const assetContainer = style({
     display: 'flex',
     paddingRight: 8,
 });

package/src/menu.tsx

@@ -18,6 +18,7 @@ import {CSSTransition} from 'react-transition-group';
 import {combineRefs} from './utils/common';
 import {applyCssVars} from './utils/css';
 import {isRunningAcceptanceTest} from './utils/platform';
+import * as mediaStyles from './image.css';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, IconProps} from './utils/types';
@@ -55,6 +56,7 @@ interface MenuItemBaseProps {
     label: string;
     description?: string;
     Icon?: (props: IconProps) => JSX.Element;
+    asset?: React.ReactElement;
     destructive?: boolean;
     disabled?: boolean;
     dataAttributes?: DataAttributes;
@@ -95,6 +97,7 @@ type MenuItemProps = ExclusifyUnion<MenuItemOnPressProps | MenuItemHrefProps | M
 export const MenuItem = ({
     label,
     Icon,
+    asset,
     destructive,
     disabled,
     onPress,
@@ -135,9 +138,19 @@ export const MenuItem = ({
 
     const renderItemContent = (labelId?: string) => (
         <div className={styles.itemContent}>
-            {Icon && (
-                <div className={styles.iconContainer}>
-                    <Icon size={24} color={contentColor} />
+            {(asset || Icon) && (
+                <div
+                    className={styles.assetContainer}
+                    {...(asset ? getPrefixedDataAttributes({testid: 'asset'}) : {})}
+                    style={
+                        asset
+                            ? applyCssVars({
+                                  [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                              })
+                            : undefined
+                    }
+                >
+                    {asset || (Icon && <Icon size={24} color={contentColor} />)}
                 </div>
             )}
             {renderTextContent(labelId)}
@@ -227,7 +240,10 @@ export const MenuItem = ({
             className={classnames(styles.menuItem, {
                 [styles.menuItemEnabled]: !disabled,
                 [styles.menuItemDisabled]: disabled,
-                [styles.menuItemHovered]: !disabled && itemIndex !== null && focusedItem === itemIndex,
+                [styles.menuItemHovered]:
+                    !disabled && !destructive && itemIndex !== null && focusedItem === itemIndex,
+                [styles.menuItemHoveredDestructive]:
+                    !disabled && destructive && itemIndex !== null && focusedItem === itemIndex,
             })}
             onMouseMove={() => setFocusedItem(disabled ? null : itemIndex)}
             onMouseLeave={() => setFocusedItem(null)}

package/src/mosaic.css.ts

@@ -71,3 +71,7 @@ export const fourItemsContainer = style({
         },
     },
 });
+
+export const horizontalMosaicPageContainer = style({
+    height: '100%',
+});

package/src/mosaic.tsx

@@ -22,7 +22,9 @@ const renderItem = (item: MosaicItem, gridMode: MosaicItemGridMode) => {
 
 const HorizontalMosaicPage = ({items, isEven}: HorizontalMosaicPageProps) => {
     return (
-        <div className={items.length === 1 ? styles.singleItemRowContainer : styles.squareContainer}>
+        <div
+            className={`${items.length === 1 ? styles.singleItemRowContainer : styles.squareContainer} ${styles.horizontalMosaicPageContainer}`}
+        >
             <Grid gap={GRID_GAP} rows={2} columns={2} height="100%">
                 {items.length === 3 ? (
                     <>
@@ -85,7 +87,7 @@ export const HorizontalMosaic = ({
             aria-labelledby={ariaLabelledby}
             dataAttributes={{...dataAttributes, testid: 'horizontal-mosaic'}}
             items={pages.map((items, index) => (
-                <Grid>
+                <Grid height="100%">
                     <HorizontalMosaicPage items={items} isEven={index % 2 === 0} key={index} />
                 </Grid>
             ))}

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.1.0' as string;
+export const PACKAGE_VERSION = '17.2.0' as string;

package/src/select.css.ts

@@ -153,7 +153,7 @@ const selectTextBase = style([
     {
         pointerEvents: 'none',
         top: 1, // for border
-        left: fieldLeftPadding + 1, // +1 for border
+        left: `calc(${fieldLeftPadding} + 1px)`, // +1 for border
         right: `calc(${iconButtonSize} + ${fieldEndIconGap}px + 1px)`, // +1 for border
         fontSize: fieldVars.mobileFontSize,
         lineHeight: fieldVars.mobileLineHeight,

package/src/select.tsx

@@ -10,7 +10,7 @@ import {TextFieldBaseAutosuggest} from './text-field-base';
 import Overlay from './overlay';
 import {isAndroid, isIos} from './utils/platform';
 import {cancelEvent} from './utils/dom';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import * as styles from './select.css';
 import * as textStyles from './text-field-base.css';
 import {Portal} from './portal';
@@ -43,6 +43,7 @@ export type SelectProps = {
     native?: boolean;
     children?: void;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 };
 
 const Select = ({
@@ -63,6 +64,7 @@ const Select = ({
     autoFocus = false,
     native,
     dataAttributes,
+    small,
 }: SelectProps): JSX.Element => {
     const inputRef = React.useRef<HTMLSelectElement | HTMLInputElement>(null);
     const focusableRef = React.useRef<HTMLSelectElement | HTMLDivElement>(null);
@@ -95,7 +97,7 @@ const Select = ({
         register,
     } = useForm();
     const {platformOverrides} = useTheme();
-    const cssVarStyles = useApplyCssVars();
+    const cssVarStyles = useApplyCssVars(small);
 
     const shouldUseNative =
         native ||
@@ -314,6 +316,8 @@ const Select = ({
 
     const selectedValue = valueState ?? value;
 
+    const MenuText = small ? Text2 : Text3;
+
     return (
         <ThemeVariant variant="default">
             {shouldUseNative || isServerSide ? (
@@ -323,6 +327,7 @@ const Select = ({
                     fieldRef={fieldRef}
                     fullWidth={fullWidth}
                     dataAttributes={{testid: 'Select', ...dataAttributes}}
+                    small={small}
                 >
                     {label && (
                         <Label
@@ -430,6 +435,7 @@ const Select = ({
                             inputRef={inputRef}
                             fieldRef={fieldRef}
                             dataAttributes={{testid: 'Select', ...dataAttributes}}
+                            small={small}
                         />
 
                         <div
@@ -498,7 +504,7 @@ const Select = ({
                                                 }
                                             }}
                                         >
-                                            <Text3 regular>{text}</Text3>
+                                            <MenuText regular>{text}</MenuText>
                                         </li>
                                     ))}
                                 </ul>

package/src/skins/blau.tsx

@@ -675,6 +675,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '8px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -735,13 +736,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'default',
         },
         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}},
@@ -752,7 +747,12 @@ export const getBlauSkin: 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/skins/defaults.tsx

@@ -74,6 +74,7 @@ export const defaultBorderRadiiConfig: BorderRadiiConfig = {
     mediaSmall: '8px',
     chip: '16px',
     tag: '24px',
+    snackbar: '8px',
 };
 
 export const defaultThemeVariantsConfig: ThemeVariantsConfig = {
@@ -100,7 +101,12 @@ export const defaultSpacing: SpacingConfig = {
         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},
+        bottom: {mobile: 9, desktop: 3},
+        left: {mobile: 12, desktop: 12},
+        right: {mobile: 16, desktop: 16},
+    },
     tagPadding: {top: {mobile: 2, desktop: 2}, bottom: {mobile: 2, desktop: 2}},
     feedbackScreenPadding: {
         top: {mobile: 64, desktop: 40},

package/src/skins/esimflag.tsx

@@ -679,6 +679,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -739,13 +740,7 @@ export const getEsimflagSkin: 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}},
@@ -756,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},

package/src/skins/movistar.tsx

@@ -686,6 +686,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -746,13 +747,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'default',
         },
         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}},
@@ -763,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},

package/src/skins/o2.tsx

@@ -682,6 +682,7 @@ export const getO2Skin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -742,13 +743,7 @@ export const getO2Skin: 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}},
@@ -759,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},

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

@@ -323,6 +323,7 @@ const borderRadii: BorderRadiiConfig = {
     avatar: '',
     mediaSmall: '',
     tag: '',
+    snackbar: '',
 };
 
 type ToThemeTokens<T> = T extends {mobile: number; desktop: number}
@@ -378,7 +379,7 @@ 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: ''},

package/src/skins/telefonica.tsx

@@ -683,6 +683,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',
+            snackbar: '4px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -779,13 +780,7 @@ export const getTelefonicaSkin: 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: 20, desktop: 20}, right: {mobile: 20, desktop: 20}},
@@ -796,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},

package/src/skins/types/index.tsx

@@ -105,13 +105,14 @@ export type BorderRadiiConfig = {
     avatar: string;
     mediaSmall: string;
     tag: string;
+    snackbar: string;
 };
 
 export type SpacingConfig = {
     buttonDefaultPadding: PaddingXValues;
     buttonSmallPadding: PaddingXValues;
     cardDefaultPadding: PaddingValues;
-    inputPadding: PaddingYValues;
+    inputPadding: PaddingValues;
     tagPadding: PaddingYValues;
     feedbackScreenPadding: PaddingValues;
     heroPadding: PaddingYValues;

package/src/skins/vivo-evolution.tsx

@@ -711,11 +711,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 +781,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 +801,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 +812,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

@@ -672,6 +672,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '24px',
             mediaSmall: '12px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -756,13 +757,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 +768,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;