feat(core): add readable media aliases

taiga-family · Nov 6, 2024 · 3bfff2f · 3bfff2f
1 parent 0e5f250
commit 3bfff2f
Show file tree

Hide file tree

Showing 17 changed files with 35 additions and 22 deletions.
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.style.less b/projects/addon-mobile/components/swipe-action/swipe-actions.style.less
@@ -39,7 +39,7 @@
         .loop(6);
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         display: none;
     }
 }

diff --git a/projects/core/directives/surface/surface.style.less b/projects/core/directives/surface/surface.style.less
@@ -77,7 +77,7 @@ button[data-surface] {
         padding: var(--tui-gap);
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         [data-surface]:hover input[tuiSurfaceLayer] + & {
             padding: var(--tui-gap);
         }
@@ -113,7 +113,7 @@ input[tuiSurfaceLayer] {
             inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1);
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         [data-surface]:hover & {
             box-shadow:
                 inset 0 0,
@@ -141,7 +141,7 @@ input[tuiSurfaceLayer] {
             transform: scale(0.95);
         }
 
-        @media (hover: hover) {
+        @media @tui-mouse {
             &:hover {
                 box-shadow: var(--tui-shadow-small-hover);
                 transform: translate3d(0, -0.25rem, 0);
@@ -161,7 +161,7 @@ input[tuiSurfaceLayer] {
             transform: scale(0.95);
         }
 
-        @media (hover: hover) {
+        @media @tui-mouse {
             &:hover {
                 transform: scale(1.15);
             }

diff --git a/projects/core/styles/components/icon.less b/projects/core/styles/components/icon.less
@@ -29,7 +29,7 @@ tui-icon {
     box-sizing: border-box;
     mask: var(--t-icon-bg) no-repeat center/contain;
 
-    @media (hover: hover) {
+    @media @tui-mouse {
         &[data-appearance='icon']:hover {
             color: var(--tui-text-secondary);
         }

diff --git a/projects/core/styles/mixins/appearance.less b/projects/core/styles/mixins/appearance.less
@@ -2,7 +2,7 @@
 
 .appearance-hover(@content) {
     .interactive({
-        @media (hover: hover) {
+        @media @tui-mouse {
             &:hover:not(:disabled):not([data-state]) {
                 @content();
             }
@@ -14,7 +14,7 @@
     }
 
     /* @deprecated TODO remove in v5 */
-    @media (hover: hover) {
+    @media @tui-mouse {
         &[tuiWrapper]:hover:not(._no-hover),
         &[tuiWrapper][data-state='hover'] {
             @content();

diff --git a/projects/core/styles/mixins/appearance.scss b/projects/core/styles/mixins/appearance.scss
@@ -1,8 +1,9 @@
 @import 'mixins.scss';
+@import '../variables/media.scss';
 
 @mixin appearance-hover {
     @include interactive {
-        @media (hover: hover) {
+        @media ($tui-mouse) {
             &:hover:not([data-state]) {
                 @content;
             }
@@ -14,7 +15,7 @@
     }
 
     /* @deprecated TODO remove in v5 */
-    @media (hover: hover) {
+    @media ($tui-mouse) {
         &[tuiWrapper]:hover:not(._no-hover),
         &[tuiWrapper][data-state='hover'] {
             @content;

diff --git a/projects/core/styles/mixins/date-picker.less b/projects/core/styles/mixins/date-picker.less
@@ -137,7 +137,7 @@
             text-underline-offset: 0.25rem;
         }
 
-        @media (hover: hover) {
+        @media @tui-mouse {
             &:hover:not([data-range='start']):not([data-range='end'])::before {
                 background: var(--tui-background-neutral-1-hover);
             }

diff --git a/projects/core/styles/mixins/wrapper.less b/projects/core/styles/mixins/wrapper.less
@@ -2,7 +2,7 @@
  * @deprecated use appearance instead
  */
 .wrapper-hover(@ruleset) {
-    @media (hover: hover) {
+    @media @tui-mouse {
         &:hover:not(._no-hover),
         &[data-state='hover'] {
             @ruleset();

diff --git a/projects/core/styles/mixins/wrapper.scss b/projects/core/styles/mixins/wrapper.scss
@@ -1,5 +1,7 @@
+@import '../variables/media.scss';
+
 @mixin wrapper-hover {
-    @media (hover: hover) {
+    @media ($tui-mouse) {
         &:hover:not(._no-hover),
         &[data-state='hover'] {
             @content;

diff --git a/projects/core/styles/variables/media.less b/projects/core/styles/variables/media.less
@@ -21,3 +21,8 @@ next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
 @tui-desktop-interval: ~'(min-width: 64em) and (max-width: 79.9625em)';
 
 @tui-desktop-lg-min: ~'screen and (min-width: 80em)';
+
+@tui-touch: ~'(hover: none) and (pointer: coarse)';
+@tui-stylus: ~'(hover: none) and (pointer: fine)';
+@tui-pointer: ~'(hover: hover) and (pointer: coarse)';
+@tui-mouse: ~'(hover: hover) and (pointer: fine)';
diff --git a/projects/core/styles/variables/media.scss b/projects/core/styles/variables/media.scss
@@ -16,3 +16,8 @@ $tui-desktop-min: 'screen and (min-width: 64em)';
 $tui-desktop-interval: '(min-width: 64em) and (max-width: 79.9625em)';
 
 $tui-desktop-lg-min: 'screen and (min-width: 80em)';
+
+$tui-touch: '(hover: none) and (pointer: coarse)';
+$tui-stylus: '(hover: none) and (pointer: fine)';
+$tui-pointer: '(hover) and (pointer: coarse)';
+$tui-mouse: '(hover) and (pointer: fine)';
diff --git a/projects/demo/src/modules/components/surface/examples/1/index.less b/projects/demo/src/modules/components/surface/examples/1/index.less
@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 .scale {
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         &:hover {
             transform: scale(1.15);
         }
@@ -25,7 +25,7 @@
         );
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         &:hover::after {
             opacity: 0.5;
         }
@@ -37,7 +37,7 @@
 }
 
 .highlight {
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         &:hover::before {
             backdrop-filter: brightness(1.1);
         }

diff --git a/projects/demo/src/modules/components/swipe-action/examples/5/index.less b/projects/demo/src/modules/components/swipe-action/examples/5/index.less
@@ -19,7 +19,7 @@ button[tuiSwipeAction] {
     border-radius: 100%;
 }
 
-@media only screen and (hover: none) and (pointer: coarse) {
+@media @tui-touch {
     .fallback {
         display: none;
     }

diff --git a/projects/kit/components/files/file/file.style.less b/projects/kit/components/files/file/file.style.less
@@ -81,7 +81,7 @@
         box-shadow: inset 0 0 0 2px var(--tui-border-focus);
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media @tui-mouse {
         opacity: 0;
     }
 }

diff --git a/projects/kit/components/segmented/segmented.style.less b/projects/kit/components/segmented/segmented.style.less
@@ -90,7 +90,7 @@ tui-segmented {
             outline-offset: -0.25rem;
         }
 
-        @media (hover: hover) {
+        @media @tui-mouse {
             &:not(.tui-segmented_active):not(:active):hover {
                 background-color: var(--tui-background-neutral-1-hover);
             }

diff --git a/projects/kit/components/tabs/tabs.style.less b/projects/kit/components/tabs/tabs.style.less
@@ -70,7 +70,7 @@
         margin: 0.5rem;
     }
 
-    @media (hover: hover) {
+    @media @tui-mouse {
         &:hover {
             color: var(--tui-text-primary);
         }

diff --git a/projects/kit/directives/tooltip/tooltip.style.less b/projects/kit/directives/tooltip/tooltip.style.less
@@ -26,7 +26,7 @@
     }
 }
 
-@media (hover: hover) {
+@media @tui-mouse {
     tui-textfield:hover [tuiTooltip][data-appearance='icon']::after,
     tui-textarea:hover [tuiTooltip][data-appearance='icon']::after,
     tui-primitive-textfield:hover [tuiTooltip][data-appearance='icon']::after,

diff --git a/projects/layout/components/cell/cell.styles.less b/projects/layout/components/cell/cell.styles.less
@@ -177,7 +177,7 @@
     }
 }
 
-@media (hover: hover) and (pointer: fine) {
+@media @tui-mouse {
     a[tuiCell]:not([tuiSurface]):hover,
     button[tuiCell]:not([tuiSurface]):hover,
     label[tuiCell]:not([tuiSurface]):hover {