Skip to content

Commit

Permalink
feat(Chip): change background color on hover/active (#1302)
Browse files Browse the repository at this point in the history 
Automated changes by
[create-pull-request](https://github.com/peter-evans/create-pull-request)
GitHub action

https://jira.tid.es/browse/WEB-2110

---------

Co-authored-by: atabel <[email protected]>
Co-authored-by: Abel Toledano <[email protected]>
  • Loading branch information
@tuentisre @atabel
3 people authored Dec 19, 2024
1 parent 9caf2c2 commit 73e33eb
Show file tree
Hide file tree
Showing 19 changed files with 68 additions and 88 deletions.
Binary file modified ...ip-screenshot-test-tsx-chip-multiple-selection-inverse-false-badge-2-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nshot-test-tsx-chip-multiple-selection-inverse-false-badge-undefined-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hip-screenshot-test-tsx-chip-multiple-selection-inverse-true-badge-2-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...enshot-test-tsx-chip-multiple-selection-inverse-true-badge-undefined-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...chip-screenshot-test-tsx-chip-single-selection-inverse-false-badge-2-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eenshot-test-tsx-chip-single-selection-inverse-false-badge-undefined-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../chip-screenshot-test-tsx-chip-single-selection-inverse-true-badge-2-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...reenshot-test-tsx-chip-single-selection-inverse-true-badge-undefined-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...er-detail-layout-screenshot-test-tsx-master-detail-layout-in-desktop-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 33 additions & 54 deletions src/chip.css.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}),
Expand All @@ -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,
},
},
});
5 changes: 3 additions & 2 deletions src/chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ type ChipProps = ExclusifyUnion<ClosableChipProps | ToggleChipProps | ClickableC

const Chip = (props: ChipProps): JSX.Element => {
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';

Expand Down Expand Up @@ -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 && <div className={styles.interactiveChipOverlay} />}
{body}
{renderBadge()}
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/skins/blau.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/movistar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/o2-new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/o2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/telefonica.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/tu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/vivo-new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/skins/vivo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down

1 comment on commit 73e33eb

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-d39pibpgw-flows-projects-65bb050e.vercel.app

Built with commit 73e33eb.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.