@taiga-ui/styles - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

components/notification.less

@@ -31,3 +31,3 @@ @import '../utils.less';
     color: var(--tui-text-primary);
-    padding: var(--tui-padding-l);
+    padding: var(--t-offset) var(--tui-padding-l);
     font: var(--tui-typography-body-m);
@@ -41,2 +41,5 @@ border-radius: var(--tui-radius-l);
 
+    --t-offset: calc((var(--t-height) - var(--tui-lh)) / 2);
+    --t-height: var(--tui-height-l);
+
     .interactive({
@@ -60,2 +63,4 @@ cursor: pointer;
         inset-inline-start: -1rem;
+        inset-block-start: calc(var(--t-offset) + var(--tui-lh));
+        transform: translateY(-100%);
     }
@@ -75,6 +80,8 @@
     &[data-size='s'] {
-        padding: 0.375rem 0.5rem;
+        padding: var(--t-offset) 0.5rem;
         font: var(--tui-typography-body-s);
         border-radius: var(--tui-radius-m);
 
+        --t-height: var(--tui-height-s);
+
         &[data-icon-start] {
@@ -85,3 +92,2 @@ --t-start: 1.5rem;
         &::before {
-            inset-block-start: 0.5rem;
             inset-inline-start: -1rem;
@@ -120,6 +126,8 @@ font-size: 1rem;
     &[data-size='m'] {
-        padding: var(--tui-padding-m);
+        padding: var(--t-offset) var(--tui-padding-m);
         font: var(--tui-typography-body-s);
         border-radius: var(--tui-radius-m);
 
+        --t-height: var(--tui-height-m);
+
         &[data-icon-start] {
@@ -126,0 +134,0 @@ --t-start: 1.625rem;

package.json

 {
     "name": "@taiga-ui/styles",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "description": "Framework-agnostic package with styles for Taiga UI",
@@ -28,4 +28,4 @@ "repository": {
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.291.0"
+        "@taiga-ui/design-tokens": "~0.293.0"
     }
 }

theme/variables.less

@@ -11,3 +11,3 @@ @import (inline, once) '@taiga-ui/design-tokens/palette/animation.css';
     // Heading
-    --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56)
+    --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(56 / 50)
         var(--tui-typography-family-display);
@@ -62,2 +62,3 @@ --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44)
     --tui-disabled-opacity: 0.56;
+    --tui-lh: 1.4em;
     // logical
@@ -67,2 +68,6 @@ --tui-inline-start: left;
     --tui-inline: 1;
+
+    @supports (font-size: 1lh) {
+        --tui-lh: 1lh;
+    }
 }
@@ -69,0 +74,0 @@

No alert changes

Improved metrics

Total package byte prevSize

124110

0.3%

No dependency changes