@taiga-ui/styles 5.0.0-canary.2da416d → 5.0.0-canary.2f662cc

package/components/appearance.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Appearance

package/components/avatar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Avatar

package/components/badge.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Badge

package/components/block.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Block

package/components/button.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Button

package/components/checkbox.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Checkbox

package/components/chip.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Chip

package/components/comment.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Comment

package/components/compass.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Compass

package/components/icon.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Icon

package/components/label.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Label

package/components/like.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Like

package/components/link.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Link

package/components/message.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Message

package/components/notification.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Notification
@@ -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/pin.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Pin

package/components/progress-bar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name ProgressBar

package/components/radio.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Radio

package/components/switch.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Switch

package/components/textfield.less

@@ -1,13 +1,14 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 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,12 +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],
@@ -354,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/components/toast.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 [tuiToast]:where(*&) {
     .transition(transform);

package/mixins/hitbox.less

@@ -0,0 +1,17 @@
+@import '../variables/media.less';
+
+.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,12 +1,12 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.0.0-canary.2da416d",
+    "version": "5.0.0-canary.2f662cc",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "license": "Apache-2.0",
     "exports": {
         "./*": "./*"
     },
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.283.0"
+        "@taiga-ui/design-tokens": "~0.285.0"
     }
 }

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';