@taiga-ui/styles 5.9.0 → 5.10.0

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.2;
             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/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",
     "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.303.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);