@telefonica/mistica 16.59.0 → 16.61.0

package/src/icon-button.css.ts

@@ -0,0 +1,561 @@
+import {createVar, style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import * as mq from './media-queries.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import {applyAlpha} from './utils/color';
+
+const colorTransitionTiming = '0.1s ease-in-out';
+const contentTransitionTiming = '0.3s cubic-bezier(0.77, 0, 0.175, 1)';
+
+const background = createVar();
+const backgroundHover = createVar();
+const backgroundActive = createVar();
+const iconColor = createVar();
+
+export const iconButtonTokens = styleVariants({
+    'brand-solid-default': {
+        vars: {
+            [background]: skinVars.colors.buttonPrimaryBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textButtonPrimary,
+        },
+    },
+    'brand-solid-brand': {
+        vars: {
+            [background]: skinVars.colors.buttonPrimaryBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textButtonPrimaryBrand,
+        },
+    },
+    'brand-solid-negative': {
+        vars: {
+            [background]: skinVars.colors.buttonPrimaryBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textButtonPrimaryBrand,
+        },
+    },
+    'brand-solid-alternative': {
+        vars: {
+            [background]: skinVars.colors.buttonPrimaryBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textButtonPrimary,
+        },
+    },
+
+    'brand-soft-default': {
+        vars: {
+            [background]: skinVars.colors.brandLow,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textLink,
+        },
+    },
+    'brand-soft-brand': {
+        vars: {
+            [background]: skinVars.colors.backgroundContainerBrandOverBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textLinkBrand,
+        },
+    },
+    'brand-soft-negative': {
+        vars: {
+            [background]: skinVars.colors.backgroundContainerBrandOverBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textLinkBrand,
+        },
+    },
+    'brand-soft-alternative': {
+        vars: {
+            [background]: skinVars.colors.brandLow,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textLink,
+        },
+    },
+
+    'brand-transparent-default': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textLink,
+        },
+    },
+    'brand-transparent-brand': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textLinkBrand,
+        },
+    },
+    'brand-transparent-negative': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textLinkBrand,
+        },
+    },
+    'brand-transparent-alternative': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textLink,
+        },
+    },
+
+    'neutral-solid-default': {
+        vars: {
+            [background]: skinVars.colors.neutralHigh,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.neutralLow,
+        },
+    },
+    'neutral-solid-brand': {
+        vars: {
+            [background]: skinVars.colors.inverse,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: 'black',
+        },
+    },
+    'neutral-solid-negative': {
+        vars: {
+            [background]: skinVars.colors.inverse,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: 'black',
+        },
+    },
+    'neutral-solid-alternative': {
+        vars: {
+            [background]: skinVars.colors.neutralHigh,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.neutralLow,
+        },
+    },
+
+    'neutral-soft-default': {
+        vars: {
+            [background]: skinVars.colors.neutralLow,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.neutralHigh,
+        },
+    },
+    'neutral-soft-brand': {
+        vars: {
+            [background]: skinVars.colors.backgroundContainerBrandOverBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textButtonSecondaryBrand,
+        },
+    },
+    'neutral-soft-negative': {
+        vars: {
+            [background]: skinVars.colors.backgroundContainerBrandOverBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.textButtonSecondaryBrand,
+        },
+    },
+    'neutral-soft-alternative': {
+        vars: {
+            [background]: skinVars.colors.neutralLowAlternative,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.textButtonSecondary,
+        },
+    },
+
+    'neutral-transparent-default': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.neutralHigh,
+        },
+    },
+    'neutral-transparent-brand': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.neutralHighBrand,
+        },
+    },
+    'neutral-transparent-negative': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.inverse,
+        },
+    },
+    'neutral-transparent-alternative': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.neutralHigh,
+        },
+    },
+
+    'danger-solid-default': {
+        vars: {
+            [background]: skinVars.colors.buttonDangerBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.inverse,
+        },
+    },
+    'danger-solid-brand': {
+        vars: {
+            [background]: skinVars.colors.buttonDangerBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.inverse,
+        },
+    },
+    'danger-solid-negative': {
+        vars: {
+            [background]: skinVars.colors.buttonDangerBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.inverse,
+        },
+    },
+    'danger-solid-alternative': {
+        vars: {
+            [background]: skinVars.colors.buttonDangerBackground,
+            [backgroundHover]: skinVars.colors.backgroundContainerBrandHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerBrandPressed,
+            [iconColor]: skinVars.colors.inverse,
+        },
+    },
+
+    'danger-soft-default': {
+        vars: {
+            [background]: skinVars.colors.errorLow,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-soft-brand': {
+        vars: {
+            [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-soft-negative': {
+        vars: {
+            [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-soft-alternative': {
+        vars: {
+            [background]: skinVars.colors.errorLow,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+
+    'danger-transparent-default': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-transparent-brand': {
+        vars: {
+            [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-transparent-negative': {
+        vars: {
+            [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+    'danger-transparent-alternative': {
+        vars: {
+            [background]: 'transparent',
+            [backgroundHover]: skinVars.colors.backgroundContainerHover,
+            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+
+    'brand-media': {
+        vars: {
+            [background]: applyAlpha(skinVars.rawColors.inverse, 0.7),
+            [backgroundHover]: applyAlpha(skinVars.rawColors.inverse, 0.9),
+            [backgroundActive]: applyAlpha(skinVars.rawColors.inverse, 1.0),
+            [iconColor]: skinVars.colors.brand,
+        },
+    },
+    'neutral-media': {
+        vars: {
+            [background]: applyAlpha(skinVars.rawColors.inverse, 0.7),
+            [backgroundHover]: applyAlpha(skinVars.rawColors.inverse, 0.9),
+            [backgroundActive]: applyAlpha(skinVars.rawColors.inverse, 1.0),
+            [iconColor]: 'black',
+        },
+    },
+    'danger-media': {
+        vars: {
+            [background]: applyAlpha(skinVars.rawColors.inverse, 0.7),
+            [backgroundHover]: applyAlpha(skinVars.rawColors.inverse, 0.9),
+            [backgroundActive]: applyAlpha(skinVars.rawColors.inverse, 1.0),
+            [iconColor]: skinVars.colors.error,
+        },
+    },
+});
+
+export const disabled = style({
+    opacity: 0.5,
+});
+
+export const isLoading = style({});
+export const overlayContainer = style({});
+
+export const iconSize = {
+    default: '1.5rem',
+    small: '1.25rem',
+};
+
+export const iconContainerSize = {
+    default: `calc(${iconSize.default} + 24px)`,
+    small: `calc(${iconSize.small} + 12px)`,
+};
+
+const bleedArea = {
+    default: `calc((${iconContainerSize.default} - ${iconSize.default}) / 2)`,
+    small: `calc((${iconContainerSize.small} - ${iconSize.small}) / 2)`,
+};
+
+export const button = sprinkles({
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+
+const baseButtonContainer = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    ':focus-within': {
+        overflow: 'visible',
+    },
+});
+
+export const buttonContainer = styleVariants({
+    default: [
+        baseButtonContainer,
+        {
+            width: iconContainerSize.default,
+            height: iconContainerSize.default,
+        },
+    ],
+    small: [
+        baseButtonContainer,
+        {
+            width: iconContainerSize.small,
+            height: iconContainerSize.small,
+        },
+    ],
+});
+
+/**
+ * In touchable devices, minimum interactive area of 48px.
+ * In pointer devices, minimum interactive area is 24px.
+ */
+
+const minButtonArea = {
+    pointer: '24px',
+    touchable: '48px',
+};
+
+const interactiveAreaSize = createVar();
+
+export const minimumInteractiveArea = style({
+    vars: {
+        [interactiveAreaSize]: minButtonArea.pointer,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            vars: {
+                [interactiveAreaSize]: minButtonArea.touchable,
+            },
+        },
+    },
+
+    minWidth: interactiveAreaSize,
+    minHeight: interactiveAreaSize,
+});
+
+export const bleedLeft = styleVariants({
+    default: {
+        marginLeft: `calc(-1 * ${bleedArea.default})`,
+    },
+    small: {
+        marginLeft: `calc(-1 * ${bleedArea.small})`,
+    },
+});
+
+export const bleedRight = styleVariants({
+    default: {
+        marginRight: `calc(-1 * ${bleedArea.default})`,
+    },
+    small: {
+        marginRight: `calc(-1 * ${bleedArea.small})`,
+    },
+});
+
+export const bleedY = styleVariants({
+    default: {
+        marginTop: `calc(-1 * ${bleedArea.default})`,
+        marginBottom: `calc(-1 * ${bleedArea.default})`,
+    },
+    small: {
+        marginTop: `calc(-1 * ${bleedArea.small})`,
+        marginBottom: `calc(-1 * ${bleedArea.small})`,
+    },
+});
+
+const baseIconContainer = style([
+    sprinkles({
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+    }),
+    {
+        backgroundColor: background,
+        transition: `background-color ${colorTransitionTiming}`,
+    },
+]);
+
+export const iconContainer = styleVariants({
+    default: [
+        baseIconContainer,
+        {
+            width: iconContainerSize.default,
+            height: iconContainerSize.default,
+        },
+    ],
+    small: [
+        baseIconContainer,
+        {
+            width: iconContainerSize.small,
+            height: iconContainerSize.small,
+        },
+    ],
+});
+
+export const overlay = style({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'transparent',
+    borderRadius: '50%',
+    transition: `background-color ${colorTransitionTiming}`,
+
+    selectors: {
+        [`${overlayContainer}:active &`]: {
+            backgroundColor: backgroundActive,
+        },
+    },
+
+    '@media': {
+        [mq.supportsHover]: {
+            selectors: {
+                [`${overlayContainer}:hover &`]: {
+                    backgroundColor: backgroundHover,
+                },
+                [`${overlayContainer}:active &`]: {
+                    backgroundColor: backgroundActive,
+                },
+            },
+        },
+    },
+});
+
+export const icon = style([
+    sprinkles({
+        position: 'relative',
+        display: 'inline-flex',
+    }),
+    {
+        opacity: 1,
+        transition: `opacity ${contentTransitionTiming}, transform ${contentTransitionTiming}, color ${colorTransitionTiming}`,
+        color: iconColor,
+
+        selectors: {
+            [`${isLoading} &`]: {
+                transform: 'translateY(-2rem)',
+                opacity: 0,
+            },
+        },
+    },
+]);
+
+export const spinner = style([
+    sprinkles({
+        position: 'absolute',
+    }),
+    {
+        opacity: 0,
+        transform: 'translateY(2rem)',
+        transition: `opacity ${contentTransitionTiming}, transform ${contentTransitionTiming}, color ${colorTransitionTiming}`,
+        color: iconColor,
+
+        selectors: {
+            [`${isLoading} &`]: {
+                transform: 'translateY(0)',
+                opacity: 1,
+            },
+        },
+    },
+]);
+
+export const deprecatedIconButtonBase = style([
+    sprinkles({
+        display: 'inline-block',
+    }),
+    {
+        border: 0,
+        backgroundPosition: '50% 50%',
+        backgroundRepeat: 'no-repeat',
+    },
+]);