feat(core): add browser specific style mixins (#5589)

.cspell.json

@@ -30,7 +30,8 @@
         "aldus",
         "hangoff",
         "tcrm",
-        "scrollbars"
+        "scrollbars",
+        "callout"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [

projects/core/components/loader/loader.style.less

@@ -136,6 +136,11 @@
 }
 
 .t-icon {
+    .safari-only({
+        & {
+            overflow: visible;
+        }
+    });
     display: block;
     min-width: 1em;
     max-width: 1em;
@@ -146,13 +151,6 @@
     overflow: hidden;
     transform: scale(1, -1);
     animation: tuiLoaderRotate 3s linear infinite;
-
-    /* Safari Only */
-    @supports (-webkit-hyphens: none) {
-        & {
-            overflow: visible;
-        }
-    }
 }
 
 .t-circle {

projects/core/styles/mixins/browsers.less

@@ -0,0 +1,23 @@
+.firefox-only(@ruleset) {
+    @supports (-moz-appearance: none) {
+        @ruleset();
+    }
+}
+
+.safari-only(@ruleset) {
+    @supports (-webkit-hyphens: none) {
+        @ruleset();
+    }
+}
+
+.ios-only(@ruleset) {
+    @supports (-webkit-touch-callout: none) {
+        @ruleset();
+    }
+}
+
+.chrome-only(@ruleset) {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @ruleset();
+    }
+}

projects/core/styles/mixins/browsers.scss

@@ -0,0 +1,23 @@
+@mixin firefox-only {
+    @supports (-moz-appearance: none) {
+        @content;
+    }
+}
+
+@mixin safari-only {
+    @supports (-webkit-hyphens: none) {
+        @content;
+    }
+}
+
+@mixin ios-only {
+    @supports (-webkit-touch-callout: none) {
+        @content;
+    }
+}
+
+@mixin chrome-only {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @content;
+    }
+}

projects/core/styles/mixins/textfield.less

@@ -169,6 +169,12 @@
 .textfield-placeholder() {
     .transition(~'transform, font-size, color, letter-spacing');
     .text-overflow();
+    .safari-only({
+        & {
+            will-change: unset;
+            transition-property: transform, color, letter-spacing;
+        }
+    });
     display: block;
     width: 100%;
     user-select: none;
@@ -234,13 +240,6 @@
     :host[data-size='l']._focused._label-outside [tuiWrapper][data-mode='onDark'] & {
         color: var(--tui-text-02-night);
     }
-
-    @supports (-webkit-hyphens: none) {
-        & {
-            will-change: unset;
-            transition-property: transform, color, letter-spacing;
-        }
-    }
 }
 
 .input-icon() {

projects/core/styles/mixins/textfield.scss

@@ -236,7 +236,7 @@ $line-height-l: 1.25rem;
         color: var(--tui-text-02-night);
     }
 
-    @supports (-webkit-hyphens: none) {
+    @include safari-only {
         & {
             will-change: unset;
             transition-property: transform, color, letter-spacing;

projects/core/styles/taiga-ui-local.less

@@ -1,5 +1,9 @@
+/**
+ * @deprecated remove in 4.0
+ */
 @space: 0.25rem;
 
+@import 'mixins/browsers.less';
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';

projects/core/styles/taiga-ui-local.scss

@@ -1,5 +1,9 @@
-$space: 4px;
+/**
+ * @deprecated remove in 4.0
+ */
+$space: 0.25rem;
 
+@import 'mixins/browsers.scss';
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
 @import 'mixins/slider.scss';

projects/core/styles/theme/wrapper/base.less

@@ -33,10 +33,10 @@
     });
 
     // Temporary hide focus in Safari until we figure out a better approach
-    @supports (-webkit-hyphens: none) {
+    .safari-only({
         :focus-visible &,
         &:focus-visible {
             --tui-focus: transparent !important;
         }
-    }
+    });
 }