diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png index f348ad088..9df77ae63 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png index cabd980e1..6013fe96b 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png index fa20a7bb8..1b4feb478 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png index 404bf9021..85dd0e6d3 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png index a7db02016..fc7c1e1ad 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png index 424c78ab5..e0390db45 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png index 7962c7391..395bc5099 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png index 0e7f1529b..3bff97f9b 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/master-detail-layout-screenshot-test-tsx-master-detail-layout-in-desktop-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/master-detail-layout-screenshot-test-tsx-master-detail-layout-in-desktop-2-snap.png index 33c2db768..2cbd48905 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/master-detail-layout-screenshot-test-tsx-master-detail-layout-in-desktop-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/master-detail-layout-screenshot-test-tsx-master-detail-layout-in-desktop-2-snap.png differ diff --git a/src/chip.css.ts b/src/chip.css.ts index 6c6626b48..ee588b7e2 100644 --- a/src/chip.css.ts +++ b/src/chip.css.ts @@ -1,4 +1,4 @@ -import {style, styleVariants, globalStyle} 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'; @@ -68,57 +68,52 @@ export const chipVariants = styleVariants({ ], }); -const interactive = style({ +export const interactive = style({ + position: 'relative', + overflow: 'hidden', userSelect: 'none', - '@media': { - [mq.supportsHover]: { - selectors: { - [`&:hover:not(${chipActive})`]: { - color: vars.colors.textActivated, - backgroundColor: vars.colors.brandLow, - cursor: 'pointer', - }, - }, - }, - }, + cursor: 'pointer', }); -export const button = sprinkles({ +export const button = style({ border: 'none', background: 'transparent', padding: 0, }); -export const chipInteractiveVariants = styleVariants({ - light: [ - interactive, - { - '@media': { - [mq.supportsHover]: { - selectors: { - [`&:hover:not(${chipActive})`]: { - borderColor: vars.colors.brandLow, - }, - }, - }, +export const interactiveChipOverlay = style([ + sprinkles({ + left: 0, + right: 0, + top: 0, + bottom: 0, + position: 'absolute', + }), + { + backgroundColor: 'transparent', + transition: 'background-color 0.1s ease-in-out', + selectors: { + [`${interactive}:active &`]: { + backgroundColor: vars.colors.backgroundContainerPressed, }, }, - ], - dark: [ - interactive, - { - '@media': { - [mq.supportsHover]: { - selectors: { - [`&:hover:not(${chipActive})`]: { - borderColor: vars.colors.background, - }, + '@media': { + [mq.supportsHover]: { + selectors: { + [`${interactive}:hover &`]: { + backgroundColor: vars.colors.backgroundContainerHover, + }, + [`${interactive}:active &`]: { + backgroundColor: vars.colors.backgroundContainerPressed, }, }, }, + [mq.touchableOnly]: { + transition: 'none', + }, }, - ], -}); + }, +]); export const icon = style([ sprinkles({paddingRight: 4}), @@ -139,19 +134,3 @@ export const rightPadding = styleVariants({ default: [sprinkles({paddingRight: {mobile: 20, desktop: 12}})], withIcon: [sprinkles({paddingRight: {mobile: 16, desktop: 8}})], }); - -globalStyle(`${interactive}:hover:not(${chipActive}) > ${icon}`, { - '@media': { - [mq.supportsHover]: { - color: vars.colors.controlActivated, - }, - }, -}); - -globalStyle(`${interactive}:hover:not(${chipActive}) > ${iconActive}`, { - '@media': { - [mq.supportsHover]: { - color: vars.colors.controlActivated, - }, - }, -}); diff --git a/src/chip.tsx b/src/chip.tsx index e4425ff39..4b2c6ea5d 100644 --- a/src/chip.tsx +++ b/src/chip.tsx @@ -41,7 +41,7 @@ type ChipProps = ExclusifyUnion { const {Icon, children, id, dataAttributes, active, badge, onClose, closeButtonLabel} = props; - const {texts, isDarkMode, textPresets, t} = useTheme(); + const {texts, textPresets, t} = useTheme(); const overAlternative = useThemeVariant() === 'alternative'; @@ -107,13 +107,14 @@ const Chip = (props: ChipProps): JSX.Element => { // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead isTouchable ? styles.wrappedContent : styles.chipWrapper, { - [styles.chipInteractiveVariants[isDarkMode ? 'dark' : 'light']]: isInteractive, + [styles.interactive]: isInteractive, }, Icon ? styles.leftPadding.withIcon : styles.leftPadding.default, badge ? styles.rightPadding.withIcon : styles.rightPadding.default )} {...getPrefixedDataAttributes(dataAttributes)} > + {isInteractive &&
} {body} {renderBadge()}
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx index a9a79687b..faca96488 100644 --- a/src/skins/blau.tsx +++ b/src/skins/blau.tsx @@ -53,8 +53,8 @@ export const getBlauSkin: GetKnownSkin = () => { background: palette.white, backgroundContainer: palette.white, backgroundContainerError: palette.blauRed10, - backgroundContainerHover: applyAlpha(palette.blauBluePrimary, 0.03), - backgroundContainerPressed: applyAlpha(palette.blauBluePrimary, 0.05), + backgroundContainerHover: applyAlpha(palette.blauBlueSecondary, 0.05), + backgroundContainerPressed: applyAlpha(palette.blauBlueSecondary, 0.08), backgroundContainerBrand: palette.blauBluePrimary, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -187,8 +187,8 @@ export const getBlauSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/movistar.tsx b/src/skins/movistar.tsx index ec358e32b..1e9430e86 100644 --- a/src/skins/movistar.tsx +++ b/src/skins/movistar.tsx @@ -71,8 +71,8 @@ export const getMovistarSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.movistarBlueDark, backgroundContainer: palette.white, backgroundContainerError: palette.pepper10, - backgroundContainerHover: applyAlpha(palette.black, 0.03), - backgroundContainerPressed: applyAlpha(palette.black, 0.05), + backgroundContainerHover: applyAlpha(palette.black, 0.05), + backgroundContainerPressed: applyAlpha(palette.black, 0.08), backgroundContainerBrand: palette.movistarBlue, backgroundContainerBrandHover: applyAlpha(palette.black, 0.1), backgroundContainerBrandPressed: applyAlpha(palette.black, 0.2), @@ -205,8 +205,8 @@ export const getMovistarSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/o2-new.tsx b/src/skins/o2-new.tsx index 244bdb795..532306740 100644 --- a/src/skins/o2-new.tsx +++ b/src/skins/o2-new.tsx @@ -61,8 +61,8 @@ export const getO2NewSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.beyondBlue, backgroundContainer: palette.white, backgroundContainerError: palette.o2Red10, - backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.03), - backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08), backgroundContainerBrand: `linear-gradient(180deg, ${palette.darkBlue} 0%, ${palette.beyondBlue} 64%, ${palette.beyondBlue45} 100%)`, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -195,8 +195,8 @@ export const getO2NewSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/o2.tsx b/src/skins/o2.tsx index d41635e6c..4340413e6 100644 --- a/src/skins/o2.tsx +++ b/src/skins/o2.tsx @@ -58,8 +58,8 @@ export const getO2Skin: GetKnownSkin = () => { backgroundBrandSecondary: palette.o2BluePrimary, backgroundContainer: palette.white, backgroundContainerError: palette.pepper10, - backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.03), - backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08), backgroundContainerBrand: palette.o2BluePrimary, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -192,8 +192,8 @@ export const getO2Skin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/telefonica.tsx b/src/skins/telefonica.tsx index 67a6be97f..04bc3a10d 100644 --- a/src/skins/telefonica.tsx +++ b/src/skins/telefonica.tsx @@ -50,8 +50,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => { background: palette.white, backgroundContainer: palette.white, backgroundContainerError: palette.coral10, - backgroundContainerHover: applyAlpha(palette.telefonicaBlue, 0.03), - backgroundContainerPressed: applyAlpha(palette.telefonicaBlue, 0.05), + backgroundContainerHover: applyAlpha(palette.telefonicaBlue70, 0.05), + backgroundContainerPressed: applyAlpha(palette.telefonicaBlue70, 0.08), backgroundContainerBrand: palette.telefonicaBlue, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -186,8 +186,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/tu.tsx b/src/skins/tu.tsx index eab302e4a..2271ee570 100644 --- a/src/skins/tu.tsx +++ b/src/skins/tu.tsx @@ -54,8 +54,8 @@ export const getTuSkin: GetKnownSkin = () => { background: palette.white, backgroundContainer: palette.white, backgroundContainerError: palette.red10, - backgroundContainerHover: applyAlpha(palette.grey9, 0.03), - backgroundContainerPressed: applyAlpha(palette.grey9, 0.05), + backgroundContainerHover: applyAlpha(palette.grey9, 0.05), + backgroundContainerPressed: applyAlpha(palette.grey9, 0.08), backgroundContainerBrand: palette.primary, backgroundContainerBrandHover: applyAlpha(palette.grey9, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.grey9, 0.4), @@ -190,8 +190,8 @@ export const getTuSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/vivo-new.tsx b/src/skins/vivo-new.tsx index 9c5930c2d..0f8da805a 100644 --- a/src/skins/vivo-new.tsx +++ b/src/skins/vivo-new.tsx @@ -51,8 +51,8 @@ export const getVivoNewSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.vivoPurpleLight80, backgroundContainer: palette.white, backgroundContainerError: palette.pepperLight10, - backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.03), - backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08), backgroundContainerBrand: palette.vivoPurple, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -185,8 +185,8 @@ export const getVivoNewSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05), diff --git a/src/skins/vivo.tsx b/src/skins/vivo.tsx index ae64fb465..e9be00371 100644 --- a/src/skins/vivo.tsx +++ b/src/skins/vivo.tsx @@ -51,8 +51,8 @@ export const getVivoSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.vivoPurple, backgroundContainer: palette.white, backgroundContainerError: palette.pepperLight10, - backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.03), - backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05), + backgroundContainerPressed: applyAlpha(palette.darkModeBlack, 0.08), backgroundContainerBrand: palette.vivoPurple, backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2), backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4), @@ -185,8 +185,8 @@ export const getVivoSkin: GetKnownSkin = () => { backgroundBrandSecondary: palette.darkModeBlack, backgroundContainer: palette.darkModeGrey, backgroundContainerError: palette.darkModeGrey, - backgroundContainerHover: applyAlpha(palette.white, 0.03), - backgroundContainerPressed: applyAlpha(palette.white, 0.05), + backgroundContainerHover: applyAlpha(palette.white, 0.05), + backgroundContainerPressed: applyAlpha(palette.white, 0.08), backgroundContainerBrand: palette.darkModeGrey, backgroundContainerBrandHover: applyAlpha(palette.white, 0.03), backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05),