@taiga-ui/styles 5.9.0 → 5.10.0-canary.b4fb16b

package/components/avatar.less

@@ -168,6 +168,7 @@
             border-radius: 100%;
             background: var(--t-badge);
             transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
+            zoom: 1;
         }
     }
 

package/components/block.less

@@ -25,6 +25,7 @@
 
     position: relative;
     display: inline-flex;
+    align-items: center;
     gap: 0.75rem;
     color: var(--tui-text-primary);
     border-radius: var(--t-radius);
@@ -129,4 +130,10 @@
         font-size: 1rem;
         border: none;
     }
+
+    &::before,
+    &::after,
+    :where(:is(input[type='checkbox'], input[type='radio'])) {
+        align-self: flex-start;
+    }
 }

package/components/button.less

@@ -21,11 +21,13 @@
     --t-size: var(--tui-height-l);
     --t-radius: var(--tui-radius-l);
     --t-gap: 0.25rem;
-    --t-padding: 0 1.25rem;
+    --t-padding: 0.5rem 1.25rem;
     --t-margin: -0.25rem;
 
     .button-base();
 
+    // stylelint-disable-next-line -- graceful degradation
+    min-block-size: fit-content;
     block-size: var(--t-size);
     justify-content: center;
     border-radius: var(--t-radius);
@@ -68,7 +70,7 @@
         --t-size: var(--tui-height-s);
         --t-radius: var(--tui-radius-s);
         --t-gap: 0.125rem;
-        --t-padding: 0 0.625rem;
+        --t-padding: 0.125rem 0.625rem;
         --t-margin: -0.125rem;
 
         font: var(--tui-typography-body-s);
@@ -89,7 +91,7 @@
         --t-size: var(--tui-height-m);
         --t-radius: var(--tui-radius-m);
         --t-gap: 0.125rem;
-        --t-padding: 0 1rem;
+        --t-padding: 0.375rem 1rem;
         --t-margin: -0.375rem;
 
         font: var(--tui-typography-body-m);
@@ -120,7 +122,6 @@
     &[tuiButtonVertical] {
         // StackBlitz changes "0rem" to "0" breaking calc
         --t-margin: ~'0rem' !important;
-        --t-line-height: 1rem;
 
         flex-direction: column;
         flex-shrink: 1;
@@ -133,6 +134,9 @@
 
         & > * {
             max-block-size: calc(var(--t-line-height) * 2);
+            line-height: inherit !important;
+
+            --t-line-height: var(--tui-lh) !important;
         }
     }
 

package/components/chip.less

@@ -20,7 +20,7 @@
     --t-gap: 0.125rem;
     --t-margin: -0.125rem;
     --t-icon-size: 1rem;
-    --t-padding: 0 0.625rem;
+    --t-padding: 0.125rem 0.625rem;
     --t-size: var(--tui-height-s);
 
     .button-base();
@@ -28,7 +28,7 @@
     font: var(--tui-typography-body-s);
     border-radius: var(--tui-radius-m);
     padding: var(--t-padding);
-    block-size: var(--t-size);
+    min-block-size: var(--t-size);
     inline-size: fit-content;
     max-inline-size: 100%;
     isolation: isolate;
@@ -68,7 +68,7 @@
     }
 
     &[data-size='xs'] {
-        --t-padding: 0 0.375rem;
+        --t-padding: 0.125rem 0.375rem;
         --t-size: var(--tui-height-xs);
 
         border-radius: var(--tui-radius-xs);
@@ -81,7 +81,7 @@
     &[data-size='m'] {
         --t-margin: -0.375rem;
         --t-icon-size: 1.5rem;
-        --t-padding: 0 1rem;
+        --t-padding: 0.125rem 1rem;
         --t-size: var(--tui-height-m);
 
         font: var(--tui-typography-body-m);

package/components/icons.less

@@ -20,7 +20,8 @@
 :where([tuiIcons]&) {
     --t-icon-start: none;
     --t-icon-end: none;
-    --t-zoom: ~'calc(clamp(0px, var(--tui-font-offset) - 10px, 1px) / 1px)';
+    // Equals to 1 if the font offset is over 10px (150% OS scaling)
+    --t-zoom: ~'calc(clamp(0, var(--t-font-offset, 0) - 10, 1))';
 
     &::before,
     &::after {

package/components/label.less

@@ -29,11 +29,14 @@
 
     input[type='checkbox'],
     input[type='radio'] {
+        font: inherit;
+        inset-block-start: calc(var(--tui-lh) / 2);
+        transform: translateY(-50%);
         margin-inline-end: 0.5rem;
 
         &[data-size='s'] {
+            line-height: 1.3;
             margin-inline-end: 0.25rem;
-            margin-block-start: 0.125rem;
         }
     }
 

package/components/notification.less

@@ -58,7 +58,7 @@
     &::before {
         position: absolute;
         inset-inline-start: -1rem;
-        inset-block-start: calc(var(--t-offset) + var(--tui-lh));
+        inset-block-start: calc((var(--t-offset) + var(--tui-lh)) * (1 - 0.15 * var(--t-zoom)));
         transform: translateY(-100%);
     }
 
@@ -85,7 +85,8 @@
         }
 
         &::before {
-            inset-inline-start: -1rem;
+            inset-inline-start: calc(-1rem * (1 - 0.2 * var(--t-zoom)));
+            inset-block-start: calc((var(--t-offset) + var(--tui-lh)) * (1 - 0.1 * var(--t-zoom)));
             font-size: 1rem;
         }
 

package/components/pin.less

@@ -14,10 +14,11 @@
  * Compass
  */
 [tuiPin]:where(*&) {
-    --t-size: 2rem;
+    --t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);
+    --t-size: calc(2rem * var(--t-scale));
 
-    @bubble-width: 1.875rem;
-    @bubble-shift: translate(calc(var(--tui-inline) * -@bubble-width), -@bubble-width);
+    @bubble-width: calc(1.875rem * var(--t-scale));
+    @bubble-shift: translate(calc(var(--tui-inline) * -1 * @bubble-width), calc(-1 * @bubble-width));
     @ground-shift: translate(calc(var(--tui-inline) * -50%), -50%);
 
     .transition(~'min-inline-size, grid-template-columns, block-size, border, margin, font', @tui-duration-fast);
@@ -30,7 +31,7 @@
     grid-template-rows: 100%;
     grid-template-columns: var(--t-size) 1fr;
     min-inline-size: var(--t-size);
-    max-inline-size: 11.25rem;
+    max-inline-size: calc(11.25rem * var(--t-scale));
     block-size: var(--t-size);
     text-align: center;
     border-radius: 100rem;
@@ -39,7 +40,7 @@
     box-sizing: border-box;
     color: var(--tui-text-primary-on-accent-2);
     background: var(--tui-background-accent-2);
-    box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-1);
+    box-shadow: 0 0 0 calc(0.125rem * var(--t-scale)) var(--tui-background-elevation-1);
     border: 0 solid var(--tui-background-accent-2);
     transform: @ground-shift;
 
@@ -48,7 +49,7 @@
     });
 
     &:empty {
-        --t-size: 0.75rem;
+        --t-size: calc(0.75rem * var(--t-scale));
 
         &::before {
             display: none;
@@ -127,22 +128,23 @@
 
             content: '';
             position: absolute;
-            inset: 0;
+            inset: -1px 0;
             z-index: -1;
             inset-inline-end: -1px;
             background: var(--tui-background-elevation-1);
             border-radius: 100rem;
             mask-image: radial-gradient(
-                circle closest-corner at left center,
-                transparent calc(100% - 0.5px),
-                black calc(100%)
+                circle closest-corner at var(--tui-inline-start) center,
+                transparent calc(100% - 1px),
+                black calc(100% - 0.5px)
             );
-            mask-position: calc(var(--t-size) / 2);
+            mask-position: calc(var(--tui-inline) * var(--t-size) / 2);
             mask-repeat: no-repeat;
         }
 
         [tuiSubtitle] {
             display: flex;
+            align-items: center;
             gap: 0.125rem;
             font: var(--tui-typography-ui-2xs);
             color: var(--tui-text-secondary);
@@ -154,7 +156,7 @@
     }
 
     &:has(:checked) {
-        --t-size: 3.5rem;
+        --t-size: calc(3.5rem * var(--t-scale));
 
         font: var(--tui-typography-body-l);
         font-weight: bold;
@@ -190,14 +192,14 @@
         }
 
         &::after {
-            inset-block-start: 4.5rem;
+            inset-block-start: calc(4.5rem * var(--t-scale));
             opacity: 1;
         }
     }
 
     // TODO: Fallback until Safari 15.4
     &._open {
-        --t-size: 3.5rem;
+        --t-size: calc(3.5rem * var(--t-scale));
 
         font: var(--tui-typography-body-l);
         font-weight: bold;
@@ -233,7 +235,7 @@
         }
 
         &::after {
-            inset-block-start: 4.5rem;
+            inset-block-start: calc(4.5rem * var(--t-scale));
             opacity: 1;
         }
     }
@@ -244,10 +246,10 @@
         content: '';
         position: absolute;
         z-index: -1;
-        inset-block: 50% -0.625rem;
-        inset-inline: 50% -0.25rem;
+        inset-block: 50% calc(-0.625rem * var(--t-scale));
+        inset-inline: 50% calc(-0.25rem * var(--t-scale));
         box-sizing: border-box;
-        border-width: 2.2rem @bubble-width;
+        border-width: calc(2.2rem * var(--t-scale)) @bubble-width;
         border-style: solid;
         border-color: inherit;
         opacity: 0;
@@ -256,6 +258,7 @@
         pointer-events: none;
         mask-image: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>');
         mask-repeat: no-repeat;
+        mask-size: 100%;
     }
 
     &::after {

package/components/textfield.less

@@ -41,7 +41,7 @@ tui-textfield:where(*&) {
     }
 
     &[data-icon-start] {
-        --t-start: 2.5rem;
+        --t-start: calc(2.5rem * (1 + 0.25 * var(--t-zoom)));
     }
 
     &[data-icon-end] {
@@ -55,8 +55,8 @@ tui-textfield:where(*&) {
             inline-size: 1.5rem;
             margin-inline-end: 1rem;
             pointer-events: none;
-            // Cancelling zoom so it does not shift label
-            zoom: 1;
+            // Compensating zoomed icons at high font-scaling
+            max-block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
         }
 
         &::after {
@@ -145,7 +145,7 @@ tui-textfield:where(*&) {
         font: var(--tui-typography-ui-s);
 
         &[data-icon-start] {
-            --t-start: 2.125rem;
+            --t-start: calc(2.125rem * (1 + 0.25 * var(--t-zoom)));
         }
 
         &[data-icon-end] {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.9.0",
+    "version": "5.10.0-canary.b4fb16b",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "repository": {
         "type": "git",
@@ -25,6 +25,6 @@
         "./*": "./*"
     },
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.302.0"
+        "@taiga-ui/design-tokens": "~0.304.0"
     }
 }

package/theme/palette.less

@@ -20,9 +20,9 @@
     --tui-border-hover: rgba(255, 255, 255, 0.6);
     --tui-border-focus: rgba(255, 255, 255, 0.64);
     // Statuses
-    --tui-status-negative: rgba(255, 140, 103, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.32);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
+    --tui-status-negative: #ff4d4d;
+    --tui-status-negative-pale: rgba(255, 77, 77, 0.24);
+    --tui-status-negative-pale-hover: rgba(255, 77, 77, 0.32);
     --tui-status-positive: rgb(74, 201, 155);
     --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
     --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
@@ -41,8 +41,8 @@
     --tui-text-action-hover: #526ed3;
     --tui-text-positive: #44c596;
     --tui-text-positive-hover: #3aa981;
-    --tui-text-negative: #ff8c67;
-    --tui-text-negative-hover: #bb593a;
+    --tui-text-negative: #ff4d4d;
+    --tui-text-negative-hover: #f66;
 }
 
 .light() {
@@ -75,9 +75,9 @@
     --tui-border-hover: rgba(0, 0, 0, 0.16);
     --tui-border-focus: rgba(51, 51, 51, 0.64);
     // Statuses
-    --tui-status-negative: rgba(244, 87, 37, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.12);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
+    --tui-status-negative: #ff291a;
+    --tui-status-negative-pale: rgba(245, 34, 34, 0.08);
+    --tui-status-negative-pale-hover: rgba(245, 34, 34, 0.16);
     --tui-status-positive: rgba(74, 201, 155, 1);
     --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
     --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
@@ -98,8 +98,8 @@
     --tui-text-action-hover: #6c86e2;
     --tui-text-positive: #3aa981;
     --tui-text-positive-hover: #7ac5aa;
-    --tui-text-negative: #dd4c1e;
-    --tui-text-negative-hover: #e38163;
+    --tui-text-negative: #ff291a;
+    --tui-text-negative-hover: #ff4d4d;
     // Charts
     --tui-chart-categorical-00: var(--tui-background-accent-1);
     --tui-chart-categorical-01: #ea97c4;

package/theme/variables.less

@@ -6,7 +6,8 @@
     // Fonts
     --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
     --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
-    --tui-font-offset: ~'0rem';
+    --tui-font-offset: calc(var(--t-font-offset, 0) * 1px);
+    --tui-font-scale: calc((22 + var(--t-font-offset, 0)) / 22);
     // Heading
     --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(56 / 50) var(--tui-typography-family-display);
     --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-typography-family-display);
@@ -53,6 +54,12 @@
     @supports (font-size: 1lh) {
         --tui-lh: 1lh;
     }
+
+    // TODO: drop in v6
+    --tui-duration-slowest: calc(var(--tui-duration) / 0.429);
+    --tui-duration-slow: calc(var(--tui-duration) / 0.6);
+    --tui-duration-fast: calc(var(--tui-duration) / 2);
+    --tui-duration-fastest: calc(var(--tui-duration) / 4);
 }
 
 [dir='rtl'] {