PLASMA-8162: Add mixin to fix touch devices sticking hover bug

.stylelintrc.js

@@ -104,7 +104,8 @@ module.exports = {
         'selector-pseudo-element-colon-notation': 'double',
         'selector-pseudo-element-no-unknown': true,
         'selector-type-case': ['lower', { ignoreTypes: ['/^\\$\\w./'] }],
-        'selector-max-empty-lines': 0,
+        // правило ложно срабатывает на интерполяции mixins (applyHover, addFocus)
+        'selector-max-empty-lines': null,
 
         'selector-list-comma-newline-after': null,
         'selector-list-comma-newline-before': 'never-multi-line',

packages/plasma-new-hope/src/components/Button/Button.styles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { applyEllipsis, addFocus } from 'src/mixins';
+import { applyEllipsis, addFocus, applyHover } from 'src/mixins';
 import { component, mergeConfig } from 'src/engines';
 
 import { spinnerConfig, spinnerTokens } from '../Spinner';
@@ -143,17 +143,15 @@ export const baseContent = `
     background: var(${tokens.buttonBackgroundColor});
     box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${tokens.buttonBorderColor}, inset 0 0 0 0 transparent);
 
-    @media (hover: hover) and (pointer: fine) {
+    ${applyHover(`
         :hover {
             color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));
             background: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));
-            box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${
-                tokens.buttonBorderColorHover
-            }, inset 0 0 0 0 transparent);
+            box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${tokens.buttonBorderColorHover}, inset 0 0 0 0 transparent);
 
             scale: var(${tokens.buttonScaleHover});
         }
-    }
+    `)}
 
     :active {
         color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));
@@ -196,15 +194,15 @@ export const baseContent = `
         opacity: var(${tokens.buttonDisabledOpacity});
         cursor: not-allowed;
 
-        @media (hover: hover) and (pointer: fine) {
+        ${applyHover(`
             :hover,
             :active {
                 scale: none;
 
                 color: var(${tokens.buttonColor});
                 background: var(${tokens.buttonBackgroundColor});
             }
-        }
+        `)}
     }
 
     &.${classes.fixedStretching} {

packages/plasma-new-hope/src/components/Button/variations/_view/base.ts

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { tokens, classes } from '../../Button.tokens';
 
@@ -13,8 +14,7 @@ export const base = css`
         background: var(${tokens.buttonLoadingBackgroundColor});
     }
 
-    // INFO: Чтобы не было "залипания" состояния на мобильных устройствах
-    @media (hover: hover) and (pointer: fine) {
+    ${applyHover(`
         :hover {
             color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));
             background: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));
@@ -23,7 +23,7 @@ export const base = css`
 
             scale: var(${tokens.buttonScaleHover});
         }
-    }
+    `)}
 
     :active {
         color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));

packages/plasma-new-hope/src/components/Checkbox/variations/_view/base.ts

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { StyledContentWrapper, StyledTrigger } from '../../Checkbox.styles';
 import { tokens } from '../../Checkbox.tokens';
@@ -14,11 +15,13 @@ export const base = css`
         border-color: var(${tokens.triggerBorderCheckedColor});
     }
 
-    input[type='checkbox']:indeterminate:not(:disabled) + ${StyledContentWrapper}:hover ${StyledTrigger} {
-        background: var(${tokens.fillColorHover}, var(${tokens.fillColor}));
-    }
+    ${applyHover(`
+        input[type='checkbox']:indeterminate:not(:disabled) + ${StyledContentWrapper}:hover ${StyledTrigger} {
+            background: var(${tokens.fillColorHover}, var(${tokens.fillColor}));
+        }
 
-    input:checked:not(:disabled) + ${StyledContentWrapper}:hover ${StyledTrigger} {
-        background: var(${tokens.fillColorHover}, var(${tokens.fillColor}));
-    }
+        input:checked:not(:disabled) + ${StyledContentWrapper}:hover ${StyledTrigger} {
+            background: var(${tokens.fillColorHover}, var(${tokens.fillColor}));
+        }
+    `)}
 `;

packages/plasma-new-hope/src/components/Chip/Chip.styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { applyEllipsis } from '../../mixins';
+import { applyEllipsis, applyHover } from '../../mixins';
 
 import { privateTokens, tokens } from './Chip.tokens';
 
@@ -45,7 +45,9 @@ export const StyledContentClear = styled.div`
     margin-right: var(${tokens.clearContentMarginRight});
     color: var(${tokens.closeIconColor});
 
-    :hover {
-        color: var(${tokens.closeIconColorHover});
-    }
+    ${applyHover(`
+        :hover {
+            color: var(${tokens.closeIconColorHover});
+        }
+    `)}
 `;

packages/plasma-new-hope/src/components/Chip/variations/_view/base.ts

@@ -1,15 +1,18 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { tokens } from '../../Chip.tokens';
 
 export const base = css`
     color: var(${tokens.color});
     background-color: var(${tokens.background});
 
-    :hover {
-        color: var(${tokens.colorHover});
-        background-color: var(${tokens.backgroundHover});
-    }
+    ${applyHover(`
+        :hover {
+            color: var(${tokens.colorHover});
+            background-color: var(${tokens.backgroundHover});
+        }
+    `)}
 
     :active {
         color: var(${tokens.colorActive});

packages/plasma-new-hope/src/components/CodeField/variations/_view/base.ts

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { CaptionWrapper, ItemInput, ItemValue } from '../../CodeField.styles';
 import { classes, tokens } from '../../CodeField.tokens';
@@ -24,12 +25,14 @@ export const base = css`
         background-color: Highlight;
     }
 
-    &:hover {
-        .${classes.hoverEnabled} {
-            background-color: var(${tokens.backgroundColorHover});
-            box-shadow: inset 0 0 0 var(${tokens.borderWidth}) var(${tokens.borderColorHover});
+    ${applyHover(`
+        &:hover {
+            .${classes.hoverEnabled} {
+                background-color: var(${tokens.backgroundColorHover});
+                box-shadow: inset 0 0 0 var(${tokens.borderWidth}) var(${tokens.borderColorHover});
+            }
         }
-    }
+    `)}
 
     &:focus-within {
         .${classes.itemFocused}:not(.${classes.itemError}) {

packages/plasma-new-hope/src/components/CodeInput/variations/_view/base.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { addFocus } from 'src/mixins';
+import { addFocus, applyHover } from 'src/mixins';
 
 import { CaptionWrapper, ItemInput, ItemCircle } from '../../CodeInput.styles';
 import { classes, tokens } from '../../CodeInput.tokens';
@@ -52,12 +52,14 @@ export const base = css`
         }
     }
 
-    &:hover {
-        .${classes.hoverEnabled} {
-            background-color: var(${tokens.backgroundColorHover});
-            box-shadow: inset 0 0 0 var(${tokens.borderWidth}) var(${tokens.borderColorHover});
+    ${applyHover(`
+        &:hover {
+            .${classes.hoverEnabled} {
+                background-color: var(${tokens.backgroundColorHover});
+                box-shadow: inset 0 0 0 var(${tokens.borderWidth}) var(${tokens.borderColorHover});
+            }
         }
-    }
+    `)}
 
     &:focus-within {
         ${ItemInput}:focus-within {
@@ -116,21 +118,27 @@ export const base = css`
         14% {
             transform: translateX(-0.125rem);
         }
+
         28% {
             transform: translateX(0.125rem);
         }
+
         42% {
             transform: translateX(-0.125rem);
         }
+
         57% {
             transform: translateX(0.125rem);
         }
+
         71% {
             transform: translateX(-0.125rem);
         }
+
         85% {
             transform: translateX(0.125rem);
         }
+
         100% {
             transform: translateX(-0.125rem);
         }
@@ -140,6 +148,7 @@ export const base = css`
         50% {
             color: var(${tokens.codeColorError});
         }
+
         100% {
             color: transparent;
         }

packages/plasma-new-hope/src/components/Dropzone/variations/_view/base.ts

@@ -1,19 +1,29 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { classes, tokens } from '../../Dropzone.tokens';
 import { Description, DropzoneHandlerOverlay, ContentWrapper } from '../../Dropzone.styles';
 
+const hoverLike = `
+    background: var(${tokens.backgroundHover});
+    outline: none;
+    border-color: var(${tokens.borderColorHover});
+`;
+
 export const base = css`
     background: var(${tokens.background});
     border: 0.063rem dashed var(${tokens.borderColor});
 
-    &:not(.${classes.active}):hover,
     &:not(.${classes.active}):focus-within {
-        background: var(${tokens.backgroundHover});
-        outline: none;
-        border-color: var(${tokens.borderColorHover});
+        ${hoverLike}
     }
 
+    ${applyHover(`
+        &:not(.${classes.active}):hover {
+            ${hoverLike}
+        }
+    `)}
+
     &.${classes.active} {
         border-color: var(${tokens.borderColorActive});
         background: var(${tokens.backgroundHover});

packages/plasma-new-hope/src/components/Link/_view/base.ts

@@ -1,25 +1,41 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { classes, tokens } from '../Link.tokens';
 
 const getColor = (cssVar: string) => `
     color: var(${cssVar}, var(${tokens.linkColor}));
 `;
 
+const underline = `
+    text-decoration: underline solid var(${tokens.linkUnderlineColor}, currentColor)
+        var(${tokens.linkUnderlineBorder}, auto);
+    text-underline-offset: var(${tokens.linkUnderlineOffset}, auto);
+`;
+
 export const base = css`
-    font-family: var(${tokens.linkFontFamily}); // TODO: Удалить после обновления конфигов во всех дс
+    /* TODO: Удалить после обновления конфигов во всех дсп */
+    font-family: var(${tokens.linkFontFamily});
 
     color: var(${tokens.linkColor});
 
-    &.${classes.linkUnderlineAlways}, &.${classes.linkUnderlineHover}:hover {
-        text-decoration: underline solid var(${tokens.linkUnderlineColor}, currentColor)
-            var(${tokens.linkUnderlineBorder}, auto);
-        text-underline-offset: var(${tokens.linkUnderlineOffset}, auto);
+    &.${classes.linkUnderlineAlways} {
+        ${underline}
     }
 
-    &:hover {
-        ${getColor(tokens.linkColorHover)};
-    }
+    ${applyHover(`
+        &.${classes.linkUnderlineHover}:hover {
+            ${underline}
+        }
+
+        &:hover {
+            ${getColor(tokens.linkColorHover)};
+        }
+
+        &:visited:hover {
+            ${getColor(tokens.linkColorVisitedHover)};
+        }
+    `)}
 
     &:active {
         ${getColor(tokens.linkColorActive)};
@@ -29,10 +45,6 @@ export const base = css`
         ${getColor(tokens.linkColorVisited)};
     }
 
-    &:visited:hover {
-        ${getColor(tokens.linkColorVisitedHover)};
-    }
-
     &:visited:active {
         ${getColor(tokens.linkColorVisitedActive)};
     }

packages/plasma-new-hope/src/components/LinkButton/variations/_view/base.ts

@@ -1,21 +1,24 @@
 import { css } from 'styled-components';
+import { applyHover } from 'src/mixins';
 
 import { LinkButtonText, StyledContentLeft, StyledContentRight } from '../../LinkButton.styles';
 import { tokens } from '../../LinkButton.tokens';
 
 export const base = css`
     background: var(${tokens.linkButtonBackgroundColor});
 
-    :not([disabled]):hover {
-        ${LinkButtonText} {
-            color: var(${tokens.linkButtonTextColorHover});
-        }
+    ${applyHover(`
+        :not([disabled]):hover {
+            ${LinkButtonText} {
+                color: var(${tokens.linkButtonTextColorHover});
+            }
 
-        ${StyledContentLeft},
-        ${StyledContentRight} {
-            color: var(${tokens.linkButtonIconColorHover});
+            ${StyledContentLeft},
+            ${StyledContentRight} {
+                color: var(${tokens.linkButtonIconColorHover});
+            }
         }
-    }
+    `)}
 
     :not([disabled]):active {
         ${LinkButtonText} {