@taiga-ui/styles 5.9.0 → 5.10.0-canary.9984aef

package/components/avatar.less

@@ -30,6 +30,7 @@
     display: inline-flex;
     flex-shrink: 0;
     inline-size: var(--t-size);
+    min-inline-size: var(--t-size);
     block-size: var(--t-size);
     align-items: center;
     justify-content: center;
@@ -168,6 +169,7 @@
             border-radius: 100%;
             background: var(--t-badge);
             transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
+            zoom: 1;
         }
     }
 

package/components/badge.less

@@ -17,8 +17,9 @@
  * Icons, Appearance, Chip, Block
  */
 [tuiBadge]:where(*&) {
+    --t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);
     --t-icon-size: 1rem;
-    --t-padding: 0 0.5rem;
+    --t-padding: calc(0.5rem * var(--t-scale));
     --t-size: var(--tui-height-xs);
     --t-margin: -0.25rem;
 
@@ -28,22 +29,23 @@
     justify-content: center;
     background: #959595;
     color: var(--tui-background-base);
-    padding: var(--t-padding);
+    padding: 0.0625rem var(--t-padding);
     block-size: var(--t-size);
-    min-inline-size: var(--t-size);
+    min-block-size: calc(var(--tui-lh) + 0.125rem);
+    min-inline-size: ~'max(calc(var(--tui-lh) + 0.125rem), var(--t-size))';
     inline-size: fit-content;
-    font: var(--tui-typography-body-s);
+    font: var(--tui-typography-ui-s);
+    zoom: 1;
 
-    &[tuiStatus]::before {
-        inline-size: 0.375rem;
-        block-size: 0.375rem;
-        margin: 0;
+    @supports not (font-size: 1lh) {
+        --tui-lh: 1.2em;
     }
 
     > tui-icon,
     &[tuiIcons]::before,
     &[tuiIcons]::after {
-        font-size: var(--t-icon-size) !important;
+        font-size: calc(var(--t-icon-size) * var(--t-scale)) !important;
+        zoom: 1;
     }
 
     &[data-appearance='negative'] {
@@ -67,22 +69,23 @@
     }
 
     &[data-size='s'] {
-        --t-padding: 0 0.3125rem;
+        --t-padding: calc(0.25rem * var(--tui-font-scale) * var(--t-scale));
         --t-size: 1rem;
         --t-icon-size: 0.625rem;
-        --t-margin: -0.125rem;
+        --t-margin: -0.0625rem;
 
         font: var(--tui-typography-ui-2xs);
+        gap: 0.1875rem;
 
         &[tuiStatus]::before {
             inline-size: 0.25rem;
             block-size: 0.25rem;
-            margin-inline-end: -0.125rem;
+            margin-inline: 0.0625rem -0.125rem;
         }
     }
 
     &[data-size='m'] {
-        --t-padding: 0 0.375rem;
+        --t-padding: calc(0.375rem * var(--tui-font-scale));
         --t-size: 1.25rem;
         --t-icon-size: 0.75rem;
         --t-margin: -0.125rem;
@@ -90,15 +93,14 @@
 
     &[data-size='xl'] {
         --t-margin: -0.25rem;
-        --t-padding: 0 0.75rem;
+        --t-padding: 0.75rem;
         --t-size: var(--tui-height-s);
 
-        font: var(--tui-typography-body-m);
+        font: var(--tui-typography-ui-m);
 
         &[tuiStatus]::before {
             inline-size: 0.5rem;
             block-size: 0.5rem;
-            margin-inline-end: -0.125rem;
         }
     }
 
@@ -109,15 +111,22 @@
     &[tuiAppearance][data-appearance='neutral'] {
         color: var(--tui-text-primary);
     }
+
+    &[tuiStatus]::before {
+        inline-size: 0.375rem;
+        block-size: 0.375rem;
+        margin: 0;
+    }
 }
 
-img[tuiBadge]:where(*&) {
+img[tuiBadge]:where(*&),
+tui-icon[tuiBadge]:where(*&) {
     padding: 0;
     inline-size: var(--t-size);
-}
 
-tui-icon[tuiBadge]:where(*&)::before {
-    .fullsize();
+    &::before {
+        .fullsize();
 
-    --t-margin: 0;
+        --t-margin: 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.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] {
@@ -174,7 +174,7 @@ tui-textfield:where(*&) {
             opacity: 1;
         }
 
-        tui-icon {
+        & > .t-content > tui-icon {
             display: none;
         }
     }

package/components/toast.less

@@ -3,7 +3,8 @@
 [tuiToast]:where(*&) {
     .transition(transform);
 
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
     grid-row: 1 / span 2;
     box-sizing: border-box;
     gap: 0.75rem;
@@ -28,10 +29,14 @@
         cursor: pointer;
     });
 
-    > *:not(tui-shrink-wrap),
+    > *:not(tui-shrink-wrap) {
+        max-inline-size: 50%;
+        margin: 0 -0.25rem;
+    }
+
     &::after,
     &::before {
-        max-inline-size: 50%;
+        min-inline-size: 1em;
         margin: 0 -0.25rem;
     }
 
@@ -43,4 +48,9 @@
     [tuiAvatar] {
         margin-inline-end: 0;
     }
+
+    tui-loader,
+    [tuiButton] {
+        min-inline-size: fit-content;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.9.0",
+    "version": "5.10.0-canary.9984aef",
     "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'] {