@telefonica/mistica 16.60.0 → 16.61.0

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

@@ -0,0 +1,416 @@
+import {createVar, globalStyle, style} from '@vanilla-extract/css';
+import {iconContainerSize} from './icon-button.css';
+import * as mq from './media-queries.css';
+import {vars as skinVars, vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+import {pxToRem} from './utils/css';
+
+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 fieldElementsGap = 12;
+export const fieldEndIconGap = 4;
+export const iconButtonSize = iconContainerSize.default;
+
+const mobileFontSize = createVar();
+const desktopFontSize = createVar();
+const mobileLineHeight = createVar();
+const desktopLineHeight = createVar();
+
+const shrinkedLabelMobileFontSize = createVar();
+const shrinkedLabelDesktopFontSize = createVar();
+const shrinkedLabelMobileLineHeight = createVar();
+const shrinkedLabelDesktopLineHeight = createVar();
+
+const helperTextMobileFontSize = createVar();
+const helperTextDesktopFontSize = createVar();
+const helperTextMobileLineHeight = createVar();
+const helperTextDesktopLineHeight = createVar();
+
+const labelScaleDesktop = createVar();
+const labelScaleMobile = createVar();
+
+export const suggestionsContainerPadding = 8;
+
+export const fieldVars = {
+    mobileFontSize,
+    desktopFontSize,
+    mobileLineHeight,
+    desktopLineHeight,
+    shrinkedLabelMobileFontSize,
+    shrinkedLabelDesktopFontSize,
+    shrinkedLabelMobileLineHeight,
+    shrinkedLabelDesktopLineHeight,
+    helperTextMobileFontSize,
+    helperTextDesktopFontSize,
+    helperTextMobileLineHeight,
+    helperTextDesktopLineHeight,
+    labelScaleDesktop,
+    labelScaleMobile,
+};
+
+const topSpaceWithLabel = {
+    desktop: `calc(${shrinkedLabelDesktopLineHeight} + ${fieldTopPadding})`,
+    mobile: `calc(${shrinkedLabelMobileLineHeight} + ${fieldTopPadding})`,
+};
+
+const topSpaceWithoutLabel = {
+    desktop: `calc(${shrinkedLabelDesktopLineHeight} / 2 + ${fieldTopPadding})`,
+    mobile: `calc(${shrinkedLabelMobileLineHeight} / 2 + ${fieldTopPadding})`,
+};
+
+const bottomSpaceWithLabel = {
+    desktop: fieldBottomPadding,
+    mobile: fieldBottomPadding,
+};
+
+const bottomSpaceWithoutLabel = {
+    desktop: `calc(${shrinkedLabelDesktopLineHeight} / 2 + ${fieldBottomPadding})`,
+    mobile: `calc(${shrinkedLabelMobileLineHeight} / 2 + ${fieldBottomPadding})`,
+};
+
+const commonInputStyles = style([
+    sprinkles({
+        border: 'none',
+        minWidth: 0,
+        color: vars.colors.textPrimary,
+        width: '100%',
+    }),
+    {
+        background: 'none',
+        borderRadius: `calc(${vars.borderRadii.input} - 1px)`,
+        lineHeight: desktopLineHeight,
+        fontSize: desktopFontSize,
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                fontSize: mobileFontSize,
+                lineHeight: mobileLineHeight,
+            },
+        },
+        caretColor: vars.colors.controlActivated,
+
+        /**
+         * Seems like 'display: flex' is causing issues on firefox and the input takes over the whole space
+         * https://stackoverflow.com/questions/43314921/strange-input-widths-in-firefox-vs-chrome
+         */
+        textOverflow: 'ellipsis',
+        selectors: {
+            '&::placeholder': {
+                opacity: 0,
+                transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+            },
+            '&:focus::placeholder': {
+                opacity: 0.5,
+            },
+        },
+
+        // reset FF red shadow styles for required inputs
+        boxShadow: 'none',
+    },
+]);
+
+export const container = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+    }),
+    {
+        minWidth: 96,
+    },
+]);
+
+// creating a style because a globalStyle uses the generated className
+export const fullWidth = style({
+    width: '100%',
+    display: 'inline-flex',
+});
+
+globalStyle(`${fullWidth} > div`, {
+    width: '100%',
+    display: 'inline-flex',
+});
+
+export const textArea = style([
+    sprinkles({
+        paddingY: 0,
+    }),
+    {
+        // the outline is set in the field container
+        outline: 'none',
+        resize: 'none',
+    },
+    commonInputStyles,
+]);
+
+export const hiddenDatePlaceholder = style({
+    selectors: {
+        /**
+         * Chrome: hide placeholder (dd/mm/yyyy).
+         * `opacity: 0` is needed when min/max is set and some parts of the date are disabled.
+         * be sure to check that case when updating these styles.
+         */
+        '&::-webkit-datetime-edit': {
+            color: 'transparent',
+            opacity: 0,
+        },
+    },
+});
+
+export const emptyDateValue = style({
+    /**
+     * In iOS, the value's height collapses to 0 when the input's value is empty.
+     * We prevent this by forcing the minHeight in this case.
+     */
+    selectors: {
+        '&::-webkit-date-and-time-value': {
+            minHeight: desktopLineHeight,
+            '@media': {
+                [mq.tabletOrSmaller]: {
+                    minHeight: mobileLineHeight,
+                },
+            },
+        },
+    },
+});
+
+export const input = style([
+    sprinkles({
+        position: 'relative',
+    }),
+    {
+        // the outline is set in the field container
+        outline: 'none',
+        margin: 0,
+        WebkitAppearance: 'none',
+        appearance: 'none',
+
+        selectors: {
+            '&::-webkit-search-cancel-button': {
+                WebkitAppearance: 'none',
+                appearance: 'none',
+            },
+            '&::-webkit-search-decoration': {
+                WebkitAppearance: 'none',
+                appearance: 'none',
+            },
+
+            /**
+             * Chrome: make the native icon invisible and stretch it over the whole field so you can click
+             * anywhere in the input field to trigger the native datepicker
+             */
+            '&::-webkit-calendar-picker-indicator': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                opacity: 0,
+                padding: 0,
+                margin: 0,
+                color: 'transparent',
+                background: 'transparent',
+                cursor: 'pointer',
+            },
+
+            /**
+             * Chrome: datetime fields are 2px taller than other input fields. This is because the browser adds
+             * 1px of top/bottom padding inside the input
+             */
+            //
+            '&[type="month"]::-webkit-datetime-edit-fields-wrapper': {
+                padding: 0,
+            },
+            '&[type="date"]::-webkit-datetime-edit-fields-wrapper': {
+                padding: 0,
+            },
+            '&[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper': {
+                padding: 0,
+            },
+
+            // Override Chrome input autocomplete styles
+            '&:-webkit-autofill': {
+                WebkitTextFillColor: vars.colors.textPrimary,
+                // The background can not be overriden, but we can delay the background color transition to avoid the change
+                transitionProperty: 'background-color',
+                transitionDelay: '99999s',
+            },
+
+            // iOS date/time fields are centered by default, but we want them left aligned
+            '&::-webkit-date-and-time-value': {
+                textAlign: 'left',
+
+                // In Android, Chrome adds margin to the date's value, causing the input to be taller than expected
+                margin: 0,
+            },
+        },
+    },
+    commonInputStyles,
+]);
+
+/**
+ * Firefox: hide value if not valid or focused
+ * Only apply when Firefox, otherwise it breaks styles in safari mobile
+ */
+export const inputFirefoxStyles = style({
+    selectors: {
+        '&[type="month"]:not(:valid):not(:focus)': {
+            color: 'transparent',
+        },
+        '&[type="date"]:not(:valid):not(:focus)': {
+            color: 'transparent',
+        },
+        '&[type="datetime-local"]:not(:valid):not(:focus)': {
+            color: 'transparent',
+        },
+    },
+});
+
+export const inputWithLabel = style({
+    paddingTop: topSpaceWithLabel.desktop,
+    paddingBottom: bottomSpaceWithLabel.desktop,
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            paddingTop: topSpaceWithLabel.mobile,
+            paddingBottom: bottomSpaceWithLabel.mobile,
+        },
+    },
+});
+
+export const inputWithoutLabel = style({
+    paddingTop: topSpaceWithoutLabel.desktop,
+    paddingBottom: bottomSpaceWithoutLabel.desktop,
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            paddingTop: topSpaceWithoutLabel.mobile,
+            paddingBottom: bottomSpaceWithoutLabel.mobile,
+        },
+    },
+});
+
+export const textAreaWithLabel = style({
+    // using margin instead of padding to avoid the multiline text being visible through the label
+    marginTop: topSpaceWithLabel.desktop,
+    paddingBottom: bottomSpaceWithLabel.desktop,
+    height: `calc(${pxToRem(152)} - ${topSpaceWithLabel.desktop} - 2px)`,
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            marginTop: topSpaceWithLabel.mobile,
+            paddingBottom: bottomSpaceWithLabel.mobile,
+            height: `calc(${pxToRem(152)} - ${topSpaceWithLabel.mobile} - 2px)`,
+        },
+    },
+});
+
+export const textAreaWithoutLabel = style({
+    marginTop: 0,
+    paddingTop: topSpaceWithoutLabel.desktop,
+    paddingBottom: bottomSpaceWithoutLabel.desktop,
+    height: `calc(${pxToRem(152)} - 2px)`,
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            paddingTop: topSpaceWithoutLabel.mobile,
+            paddingBottom: bottomSpaceWithoutLabel.mobile,
+        },
+    },
+});
+
+export const endIconContainer = style([
+    sprinkles({
+        paddingLeft: fieldEndIconGap,
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    {
+        paddingRight: fieldRightPadding,
+        alignSelf: 'center',
+    },
+]);
+
+export const startIcon = style([
+    sprinkles({
+        paddingRight: fieldElementsGap,
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        position: 'absolute',
+    }),
+    {
+        paddingLeft: fieldLeftPadding,
+        // passthrough click events to the input
+        pointerEvents: 'none',
+    },
+]);
+
+export const prefix = style([
+    sprinkles({
+        paddingRight: fieldElementsGap,
+    }),
+    {
+        paddingLeft: fieldLeftPadding,
+        transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+    },
+]);
+
+export const menuItemBase = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    {
+        minHeight: pxToRem(48),
+        padding: '6px 8px',
+        userSelect: 'none',
+        borderRadius: `calc(${skinVars.borderRadii.popup} - ${suggestionsContainerPadding / 2}px)`,
+    },
+]);
+
+export const menuItem = style([
+    menuItemBase,
+    sprinkles({
+        cursor: 'pointer',
+    }),
+    {
+        transition: 'background-color 0.1s ease-in-out',
+    },
+]);
+
+export const menuItemSelected = style({
+    backgroundColor: skinVars.colors.backgroundContainerHover,
+    ':active': {
+        backgroundColor: skinVars.colors.backgroundContainerPressed,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            backgroundColor: 'transparent',
+            transition: 'none',
+        },
+    },
+});
+
+export const suggestionsContainer = style([
+    sprinkles({
+        position: 'absolute',
+    }),
+    {
+        marginTop: 8,
+        boxSizing: 'border-box',
+        boxShadow: '0px 2px 4px 0px #00000033',
+        padding: suggestionsContainerPadding,
+        background: skinVars.colors.backgroundContainer,
+        borderRadius: skinVars.borderRadii.popup,
+
+        // one more than TextField label
+        zIndex: 2,
+    },
+]);
+
+globalStyle(`${suggestionsContainer} > ul`, {
+    listStyleType: 'none',
+    padding: 0,
+    margin: 0,
+});