fix(core): styles sync .scss-files with .less-files (#2717)

projects/core/styles/mixins/mixins.scss

@@ -53,8 +53,33 @@
     line-height: inherit;
 }
 
-@mixin clearinput() {
+@mixin autofill($mode: default) {
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+        caret-color: var(--tui-base-09);
+        border-radius: inherit;
+        color: inherit !important;
+        background-color: transparent !important;
+
+        @if ($mode == default) {
+            -webkit-text-fill-color: var(--tui-text-01) !important;
+            border-color: var(--tui-autofill);
+            -webkit-box-shadow: 0 0 0 100rem var(--tui-autofill) inset !important; // to overlay native background
+        }
+
+        @if ($mode == dark) {
+            -webkit-text-fill-color: var(--tui-text-01-night) !important;
+            border-color: var(--tui-autofill-night);
+            -webkit-box-shadow: 0 0 0 100rem var(--tui-autofill-night) inset !important;
+        }
+    }
+}
+
+@mixin clearinput($mode: default) {
+    @include autofill($mode);
     padding: 0;
+    margin: 0;
     border: 0;
     border-radius: inherit;
     background: none;
@@ -67,16 +92,6 @@
     appearance: none;
     word-break: keep-all;
     -webkit-text-fill-color: currentColor; // for Safari
-
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus {
-        border-radius: inherit;
-        -webkit-text-fill-color: inherit !important;
-        color: inherit !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: 0 0 0 1000px var(--tui-autofill) inset !important; // to overlay native background
-    }
 }
 
 @mixin visually-hidden() {
@@ -101,7 +116,7 @@
             height: 1rem;
             border-radius: 6.25rem;
             background-clip: padding-box;
-            border: 0.375rem solid transparent;
+            border: 2.667rem solid transparent;
         }
 
         &::-webkit-scrollbar {
@@ -131,12 +146,12 @@
 
     // Dropdown
     @if ($mode == 2) {
-        box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.2);
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
     }
 
     // Modal
     @if ($mode == 3) {
-        box-shadow: 0 1.125rem 1.875rem rgba(51, 51, 51, 0.52);
+        box-shadow: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
     }
 
     // Sidebar
@@ -156,7 +171,7 @@
 
     // Modal mobile
     @if ($mode == 7) {
-        box-shadow: 0 -1rem 1.75rem rgba(51, 51, 51, 0.24);
+        box-shadow: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
     }
 }
 
@@ -260,16 +275,16 @@
 }
 
 // typical properties for text overflow with ellipsis
-@mixin text-overflow() {
-    white-space: nowrap;
+@mixin text-overflow($type: nowrap) {
+    white-space: $type;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 /* stylelint-disable selector-max-specificity */
 @mixin text-overflow-with-fade(
-    $color: rgba(255, 255, 255, 1),
-    $transparentColor: rgba(255, 255, 255, 0),
+    $color: var(--tui-base-01),
+    $transparentColor: transparent,
     $width: 1.875rem
 ) {
     position: relative;
@@ -357,12 +372,12 @@
 
 // hide an element visually without hiding it from screen readers
 @mixin sr-only() {
+    position: absolute;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     width: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
-    position: absolute;
 }

projects/core/styles/mixins/picker.scss

@@ -1,20 +1,20 @@
 @mixin picker($itemSize) {
     :host {
-        @include text-body-m();
         display: block;
+        font: var(--tui-font-text-m);
     }
 
     .t-row {
         @include createStackingContext();
         display: flex;
         justify-content: space-between;
-        height: 36px;
+        height: 2.25rem;
     }
 
     .t-item {
         position: relative;
         flex: 1;
-        line-height: 32px;
+        line-height: 2rem;
         border-radius: var(--tui-radius-m);
 
         &:before,
@@ -57,10 +57,10 @@
         &_today:after {
             @include center-left();
             content: '';
-            bottom: 5px;
-            height: 2px;
-            width: 12px;
-            border-radius: 6px;
+            bottom: 0.3125rem;
+            height: 0.125rem;
+            width: 0.75rem;
+            border-radius: 0.375rem;
             background-color: var(--tui-text-02);
         }
 
@@ -123,25 +123,25 @@
 
         &[data-range='end'] > .t-item {
             &:before {
-                left: 4px;
+                left: 0.25rem;
             }
 
             &:after {
-                left: -32px;
+                left: -2rem;
                 right: 100%;
-                transform: translateX(23px) scaleY(0.6) scaleX(0.4) rotate(45deg);
+                transform: translateX(1.4375rem) scaleY(0.6) scaleX(0.4) rotate(45deg);
             }
         }
 
         &[data-range='start'] > .t-item {
             &:before {
-                right: 4px;
+                right: 0.25rem;
             }
 
             &:after {
                 left: 100%;
-                right: -32px;
-                transform: translateX(-23px) scaleY(0.6) scaleX(0.4) rotate(45deg);
+                right: -2rem;
+                transform: translateX(-1.4375rem) scaleY(0.6) scaleX(0.4) rotate(45deg);
             }
         }
 

projects/core/styles/mixins/slider.scss

@@ -31,4 +31,21 @@ $thumb-diameters: (
     tui-input-slider + & {
         margin-left: calc(var(--tui-radius-m) / 2 + #{$first-tick-center});
     }
+
+    tui-input-range + &,
+    tui-range + & {
+        $thumb: map-get($thumb-diameters, $input-size);
+        margin-left: $thumb;
+        margin-right: $thumb;
+
+        & > * {
+            &:first-child {
+                left: -$thumb;
+            }
+
+            &:last-child {
+                right: -$thumb;
+            }
+        }
+    }
 }

projects/core/styles/mixins/text.scss

@@ -3,6 +3,8 @@
     color: var(--tui-text-01);
 }
 
+// TODO: 4.0 delete all deprecations below
+
 // headings
 
 // deprecated