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 9df77ae63..f348ad088 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 6013fe96b..cabd980e1 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-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-snap.png index c1ef2cc2d..bf140ea5a 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-1-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 1b4feb478..7b167fe4e 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-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-1-snap.png index 34aaf17aa..071e37b70 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-1-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 85dd0e6d3..861977737 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 fc7c1e1ad..a7db02016 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 e0390db45..424c78ab5 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-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-snap.png index 255313810..5d614decf 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-1-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 395bc5099..60a306a8f 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-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-1-snap.png index f00d187e0..cf88458b1 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-1-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 3bff97f9b..c926e38ee 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__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png index 88775d966..9a5b06dd0 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-2-snap.png index e6686b427..c8040dee5 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png index b7122e642..27802219a 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png index d757e28a8..736ffe2a7 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png index 2494a594b..00fd12b0b 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png index 6388074bd..2a976f03e 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png index b1882a61a..50b13c034 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-2-snap.png index 43554375c..418ef6ae3 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png index 6ed059316..8a046f549 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-2-snap.png index 543d92b8b..344751f07 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png index 967cd8ed1..410f231c4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-2-snap.png index e07586390..9d110a2ba 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png index 608335c99..a0e87ced4 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap - Copia.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap - Copia.png new file mode 100644 index 000000000..27b28260e Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap - Copia.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png index fdb6d9bb3..27b28260e 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-in-dark-mode-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-in-dark-mode-inverse-1-snap.png index 5f2b9d246..eef5c7772 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-in-dark-mode-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-in-dark-mode-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-inverse-1-snap.png index dd1b1fb3b..c01c8d105 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/theme-variant-screenshot-test-tsx-theme-variant-inverse-1-snap.png differ diff --git a/src/chip.css.ts b/src/chip.css.ts index ee588b7e2..73380489e 100644 --- a/src/chip.css.ts +++ b/src/chip.css.ts @@ -1,4 +1,4 @@ -import {style, styleVariants} from '@vanilla-extract/css'; +import {style, styleVariants, globalStyle} from '@vanilla-extract/css'; import * as mq from './media-queries.css'; import {vars} from './skins/skin-contract.css'; import {sprinkles} from './sprinkles.css'; @@ -54,6 +54,16 @@ export const chipVariants = styleVariants({ color: vars.colors.textPrimary, }), ], + inverse: [ + containerBase, + sprinkles({ + background: vars.colors.brandLow, + color: vars.colors.controlActivated, + }), + { + borderColor: vars.colors.controlActivated, + }, + ], active: [ chipActive, containerBase, @@ -68,52 +78,57 @@ export const chipVariants = styleVariants({ ], }); -export const interactive = style({ - position: 'relative', - overflow: 'hidden', +const interactive = style({ userSelect: 'none', - cursor: 'pointer', + '@media': { + [mq.supportsHover]: { + selectors: { + [`&:hover:not(${chipActive})`]: { + color: vars.colors.textActivated, + backgroundColor: vars.colors.brandLow, + cursor: 'pointer', + }, + }, + }, + }, }); -export const button = style({ +export const button = sprinkles({ border: 'none', background: 'transparent', padding: 0, }); -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, +export const chipInteractiveVariants = styleVariants({ + light: [ + interactive, + { + '@media': { + [mq.supportsHover]: { + selectors: { + [`&:hover:not(${chipActive})`]: { + borderColor: vars.colors.brandLow, + }, + }, + }, }, }, - '@media': { - [mq.supportsHover]: { - selectors: { - [`${interactive}:hover &`]: { - backgroundColor: vars.colors.backgroundContainerHover, - }, - [`${interactive}:active &`]: { - backgroundColor: vars.colors.backgroundContainerPressed, + ], + dark: [ + interactive, + { + '@media': { + [mq.supportsHover]: { + selectors: { + [`&:hover:not(${chipActive})`]: { + borderColor: vars.colors.background, + }, }, }, }, - [mq.touchableOnly]: { - transition: 'none', - }, }, - }, -]); + ], +}); export const icon = style([ sprinkles({paddingRight: 4}), @@ -134,3 +149,19 @@ 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 4b2c6ea5d..617db773e 100644 --- a/src/chip.tsx +++ b/src/chip.tsx @@ -41,14 +41,20 @@ type ChipProps = ExclusifyUnion { const {Icon, children, id, dataAttributes, active, badge, onClose, closeButtonLabel} = props; - const {texts, textPresets, t} = useTheme(); + const {texts, isDarkMode, textPresets, t} = useTheme(); const overAlternative = useThemeVariant() === 'alternative'; + const inverse = useThemeVariant() === 'inverse'; const body = ( <> {Icon && ( -
+
)} @@ -66,7 +72,11 @@ const Chip = (props: ChipProps): JSX.Element => { return (
{ const renderContent = (dataAttributes?: DataAttributes) => (
- {isInteractive &&
} {body} {renderBadge()}