@taiga-ui/styles 5.0.0-canary.efd526e → 5.0.0-rc.4

package/components/notification.less

@@ -28,7 +28,7 @@
     display: flow-root;
     max-block-size: 100%;
     color: var(--tui-text-primary);
-    padding: 1rem;
+    padding: var(--tui-padding-l);
     font: var(--tui-typography-body-m);
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
@@ -69,7 +69,7 @@
     }
 
     &[data-size='s'] {
-        padding: 0.375rem 0.625rem;
+        padding: 0.375rem var(--tui-padding-s);
         font: var(--tui-typography-body-s);
         border-radius: var(--tui-radius-m);
 
@@ -112,7 +112,7 @@
     }
 
     &[data-size='m'] {
-        padding: 0.75rem;
+        padding: var(--tui-padding-m);
         font: var(--tui-typography-body-s);
         border-radius: var(--tui-radius-m);
 

package/components/textfield.less

@@ -4,10 +4,11 @@ tui-textfield:where(*&) {
     .scrollbar-hidden();
     .transition(color);
 
-    --t-height: var(--tui-height-l);
+    --t-height: calc(var(--tui-height-l) + 2.5 * var(--t-label) * var(--tui-font-offset));
     --t-padding: var(--tui-padding-l);
+    --t-label: 0;
     --t-label-y: -0.75rem;
-    --t-label-font: var(--tui-typography-body-s);
+    --t-label-font: var(--tui-typography-ui-s);
     --t-end: ~'0px';
     --t-start: ~'0px';
     --t-side: ~'0px';
@@ -22,7 +23,6 @@ tui-textfield:where(*&) {
     padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
     font: var(--tui-typography-ui-m);
-    line-height: 1.25rem;
     box-sizing: border-box;
     isolation: isolate;
 
@@ -101,7 +101,6 @@ tui-textfield:where(*&) {
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-typography-ui-s);
-        line-height: 1rem;
 
         &[data-icon-start] {
             --t-start: 1.5rem;
@@ -132,15 +131,14 @@ tui-textfield:where(*&) {
     }
 
     &[data-size='m'] {
-        --t-height: var(--tui-height-m);
+        --t-height: calc(var(--tui-height-m) + 2.5 * var(--t-label) * var(--tui-font-offset));
         --t-padding: var(--tui-padding-m);
-        --t-label-font: var(--tui-typography-body-xs);
+        --t-label-font: var(--tui-typography-ui-xs);
         --t-label-y: -0.5625rem;
         --t-max: 0.125rem;
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-typography-ui-s);
-        line-height: 1rem;
 
         &[data-icon-start] {
             --t-start: 2.125rem;
@@ -164,10 +162,6 @@ tui-textfield:where(*&) {
         }
     }
 
-    &[data-size='l'] {
-        --t-label: -0.7rem;
-    }
-
     &:is(._disabled, [data-state='disabled']) {
         pointer-events: none;
         opacity: var(--tui-disabled-opacity);
@@ -182,6 +176,8 @@ tui-textfield:where(*&) {
     }
 
     &._with-label {
+        --t-label: 1;
+
         & > .t-template,
         .t-filler,
         [tuiInput] {
@@ -253,8 +249,7 @@ tui-textfield:where(*&) {
         [tuiLabel],
         &:not(tui-textfield) ~ [tuiLabel] {
             font: var(--t-label-font);
-            line-height: var(--t-height);
-            transform: translateY(var(--t-label-y));
+            transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
         }
     }
 
@@ -265,13 +260,19 @@ tui-textfield:where(*&) {
 
         position: relative;
         display: block;
+        max-inline-size: calc(100% - var(--t-start));
         flex: 1;
         align-self: flex-start;
-        font-size: inherit;
+        font: inherit;
         user-select: none;
-        line-height: var(--t-height);
+        padding: calc(var(--t-height) / 2 - 0.625em) 0;
+        line-height: 1.25 !important;
         letter-spacing: calc((max(1em, 0.75rem) - 1em) * 0.4);
         transition-duration: inherit;
+
+        + .t-content {
+            margin-inline-start: 0;
+        }
     }
 
     [tuiLabel],
@@ -355,8 +356,7 @@ tui-textfield:where(*&) {
             [tuiLabel] {
                 color: var(--tui-text-primary) !important;
                 font: var(--t-label-font);
-                line-height: var(--t-height);
-                transform: translateY(var(--t-label-y));
+                transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
             }
         });
     }

package/mixins/hitbox.less

@@ -0,0 +1,17 @@
+@import '../variables/media';
+
+.tui-hitbox(@size) {
+    @media @tui-mobile {
+        position: relative;
+        overflow: visible;
+
+        &::after {
+            content: '';
+            position: absolute;
+            display: block !important;
+            inline-size: max(100%, @size);
+            block-size: max(100%, @size);
+            background: transparent;
+        }
+    }
+}

package/mixins/hitbox.scss

@@ -0,0 +1,17 @@
+@import '../variables/media';
+
+@mixin hitbox($size) {
+    @media ($tui-mobile) {
+        position: relative;
+        overflow: visible;
+
+        &::after {
+            content: '';
+            position: absolute;
+            display: block !important;
+            inline-size: max(100%, $size);
+            block-size: max(100%, $size);
+            background: transparent;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.0.0-canary.efd526e",
+    "version": "5.0.0-rc.4",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "license": "Apache-2.0",
     "exports": {

package/theme/variables.less

@@ -27,7 +27,7 @@
         var(--tui-typography-family-text);
     --tui-typography-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14)
         var(--tui-typography-family-text);
-    --tui-typography-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11)
+    --tui-typography-body-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(16 / 12)
         var(--tui-typography-family-text);
     // Reduced
     --tui-typography-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17)

package/utils.less

@@ -3,4 +3,5 @@
 @import 'mixins/miscellaneous.less';
 @import 'mixins/slider.less';
 @import 'mixins/appearance.less';
+@import 'mixins/hitbox.less';
 @import 'variables/media.less';

package/utils.scss

@@ -3,4 +3,5 @@
 @import 'mixins/miscellaneous';
 @import 'mixins/slider';
 @import 'mixins/appearance';
+@import 'mixins/hitbox';
 @import 'variables/media';