@taiga-ui/styles 5.24.0 → 5.25.0-canary.3fb67e2

package/components/card-large.less

@@ -6,24 +6,27 @@
     --t-space: 0.75rem;
     --t-radius: var(--tui-radius-l);
     --t-comp: -0.25rem;
-    --t-padding: 0.75rem;
     --t-dim: calc(var(--t-padding) + var(--t-comp));
+    --t-padding: 0.75rem;
+    --tui-padding-inline: 0.75rem;
 
-    padding: var(--t-padding);
+    padding: var(--t-padding) var(--tui-padding-inline);
     border-radius: var(--t-radius);
     box-sizing: border-box;
     text-align: start;
 
     &[data-space='normal'] {
         --t-radius: 1.5rem;
-        --t-padding: 1.5rem;
         --t-space: 1.5rem;
+        --t-padding: 1.5rem;
+        --tui-padding-inline: 1.5rem;
     }
 
     &[data-space='compact'] {
         --t-radius: 1rem;
-        --t-padding: 1.25rem;
         --t-space: 1.25rem;
+        --t-padding: 1.25rem;
+        --tui-padding-inline: 1.25rem;
     }
 
     &:not([tuiCell], [tuiHeader], [tuiForm]) {
@@ -37,7 +40,7 @@
     }
 
     &[tuiHeader] {
-        padding: var(--t-dim) var(--t-padding);
+        padding: var(--t-dim) var(--tui-padding-inline);
 
         [tuiButton]:last-child,
         [tuiAvatar]:last-child,
@@ -60,14 +63,18 @@
 
     [tuiCell]:not(:where(tui-textfield *, [tuiStep])) {
         inline-size: 100%;
-        margin: -0.5rem -0.5rem -0.75rem;
+        margin: -0.5rem calc(-1 * var(--tui-padding-inline)) -0.75rem;
         border-radius: var(--tui-radius-l);
 
-        --t-pad: 0.5rem;
+        --t-pad: 0.5rem var(--tui-padding-inline);
 
         &:last-of-type {
             margin-block-end: -0.5rem;
         }
+
+        [data-platform]:not([data-platform='ios'], [data-platform='android']) & {
+            --tui-padding-inline: 0.5rem;
+        }
     }
 
     [tuiHeader] + [tuiDescription] {

package/components/card-medium.less

@@ -1,14 +1,16 @@
 [tuiCardMedium]:where(*&) {
+    --tui-padding-inline: 0.75rem;
+
     inline-size: calc(8.75rem * var(--tui-font-scale));
     block-size: calc(8.75rem * var(--tui-font-scale));
     flex-direction: column;
     justify-content: space-between;
-    padding: 0.75rem;
+    padding: 0.75rem var(--tui-padding-inline);
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
 
     &[tuiTitle] {
-        padding: 0.625rem 0.75rem;
+        padding: 0.625rem var(--tui-padding-inline);
     }
 
     [tuiTitle] {

package/components/cell.less

@@ -240,8 +240,14 @@
     }
 
     &[tuiCellStretch] {
-        inline-size: 100%;
-        margin-inline: -1rem;
+        // stylelint-disable-next-line -- fix linter
+        width: -moz-available;
+        // stylelint-disable-next-line -- fix linter
+        width: stretch;
+        margin-inline-start: calc(-1 * var(--tui-padding-inline, 0px));
+        margin-inline-end: calc(-1 * var(--tui-padding-inline, 0px));
+        padding-inline-start: var(--tui-padding-inline, 0);
+        padding-inline-end: var(--tui-padding-inline, 0);
     }
 
     &[tuiCellResponsive] {
@@ -290,3 +296,8 @@
         }
     }
 }
+
+[data-platform='ios'] [tuiCellStretch]:where(*&),
+[data-platform='android'] [tuiCellStretch]:where(*&) {
+    border-radius: 0 !important;
+}

package/components/checkbox.less

@@ -37,9 +37,9 @@
         inline-size: 100%;
         font-size: 1rem;
         mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
-        transform: scale(0);
+        scale: 0;
         transition:
-            transform var(--tui-duration) ease-in-out,
+            scale var(--tui-duration) ease-in-out,
             mask 0s var(--tui-duration) ease-in-out;
     }
 
@@ -56,9 +56,9 @@
     &:indeterminate {
         &::before {
             mask-image: var(--t-icon-start);
-            transform: scale(1);
+            scale: 1;
             transition:
-                transform var(--tui-duration) ease-in-out,
+                scale var(--tui-duration) ease-in-out,
                 mask 0s ease-in-out;
             transition-duration: inherit;
         }

package/components/chip.less

@@ -68,7 +68,7 @@
 
         & > [tuiIconButton] {
             margin: -0.5rem;
-            transform: scale(0.75);
+            scale: 0.75;
         }
     }
 

package/components/header.less

@@ -23,6 +23,7 @@
     [tuiTitle] {
         max-inline-size: fit-content;
         flex: 1 0 60%;
+        align-self: center;
         margin: 0;
         margin-inline-end: auto;
         font: inherit;

package/components/like.less

@@ -35,13 +35,13 @@
         .fullsize();
 
         font-size: 1.25rem;
-        transition-property: transform, opacity;
+        transition-property: scale, opacity;
     }
 
     &::after {
         opacity: 0;
         color: var(--t-icon-color, inherit);
-        transform: scale(0);
+        scale: 0;
     }
 
     &:checked {
@@ -51,7 +51,7 @@
 
         &::after {
             opacity: 1;
-            transform: scale(1);
+            scale: 1;
             transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1.8), ease-in-out;
         }
     }

package/components/pin.less

@@ -18,7 +18,6 @@
     --t-size: calc(2rem * var(--t-scale));
 
     @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);
@@ -187,7 +186,7 @@
         }
 
         &::before {
-            transform: scale(0.99) @bubble-shift;
+            scale: 0.99;
             opacity: 1;
         }
 
@@ -230,7 +229,7 @@
         }
 
         &::before {
-            transform: scale(0.99) @bubble-shift;
+            scale: 0.99;
             opacity: 1;
         }
 
@@ -241,7 +240,7 @@
     }
 
     &::before {
-        .transition(~'transform, opacity');
+        .transition(~'scale, opacity');
 
         content: '';
         position: absolute;
@@ -253,7 +252,8 @@
         border-style: solid;
         border-color: inherit;
         opacity: 0;
-        transform: scale(0.57) @bubble-shift;
+        scale: 0.57;
+        transform: translate(calc(var(--tui-inline) * -1 * @bubble-width), calc(-1 * @bubble-width));
         transform-origin: top var(--tui-inline-start);
         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>');

package/components/radio.less

@@ -34,18 +34,18 @@
     }
 
     &::before {
-        .fullsize(absolute, inset);
-
         content: '';
+        position: absolute;
+        inset: 0;
         margin: auto;
         border-radius: 100%;
         background: currentColor;
-        transform: scale(0);
-        transition-property: transform;
+        scale: 0;
+        transition-property: scale;
     }
 
     &:checked::before {
-        transform: scale(0.5);
+        scale: 0.5;
     }
 
     &[data-size='s'] {

package/components/switch.less

@@ -46,11 +46,11 @@
             inline-size: 1rem;
             box-shadow: calc(var(--tui-inline) * -2.625rem) 0 0 0.5rem var(--tui-background-base);
             outline-width: 0.167rem;
-            transform: scale(0.375);
+            scale: 0.375;
         }
 
         &:checked::after {
-            transform: scale(0.375) translateX(calc(var(--tui-inline) * 2.625rem));
+            transform: translateX(calc(var(--tui-inline) * 2.625rem));
         }
     }
 
@@ -60,7 +60,7 @@
         }
 
         &::after {
-            transform: scale(0.33333) translateX(calc(var(--tui-inline) * 4.5rem));
+            transform: translateX(calc(var(--tui-inline) * 4.5rem));
         }
     }
 
@@ -88,7 +88,7 @@
         inset-inline-end: 0;
         border-radius: 100%;
         background: none;
-        transform: scale(0.33333);
+        scale: 0.33333;
         box-shadow: calc(var(--tui-inline) * -4.5rem) 0 0 0.75rem var(--tui-background-base);
         outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
     }

package/components/textfield.less

@@ -1,7 +1,6 @@
 @import '../utils.less';
 
 tui-textfield:where(*&) {
-    .scrollbar-hidden();
     .transition(color, @tui-duration-fast);
 
     --t-height: calc(var(--tui-height-l) + 2.5 * var(--t-label) * var(--tui-font-offset));
@@ -26,6 +25,7 @@ tui-textfield:where(*&) {
     font: var(--tui-typography-ui-m);
     box-sizing: border-box;
     isolation: isolate;
+    scrollbar-width: thin;
 
     &[tuiAppearance] {
         outline: none;
@@ -325,8 +325,12 @@ tui-textfield:where(*&) {
         border-radius: inherit;
     }
 
-    textarea ~ .t-content {
-        min-inline-size: 1px;
+    textarea {
+        scrollbar-width: thin;
+
+        & ~ .t-content {
+            min-inline-size: 1px;
+        }
     }
 
     &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) [tuiButtonX],

package/components/toast.less

@@ -1,7 +1,7 @@
 @import '../utils.less';
 
 [tuiToast]:where(*&) {
-    .transition(transform);
+    .transition(scale);
 
     display: grid;
     grid-auto-flow: column;

package/mixins/appearance.less

@@ -44,13 +44,10 @@
 }
 
 .appearance-invalid(@content) {
-    &:is([data-mode~='invalid'], .tui-invalid, :invalid:not(._untouched)):not(
-            [data-mode~='readonly'],
-            [data-mode~='valid'],
-            [data-state='disabled'],
-            :disabled,
-            ._disabled
-        ) {
-        @content();
+    &:is([data-mode~='invalid'], .tui-invalid),
+    &:invalid:not(._untouched) {
+        &:not([data-mode~='readonly'], [data-mode~='valid'], [data-state='disabled'], :disabled, ._disabled) {
+            @content();
+        }
     }
 }

package/mixins/appearance.scss

@@ -45,13 +45,10 @@
 }
 
 @mixin appearance-invalid {
-    &:is([data-mode~='invalid'], .tui-invalid, :invalid:not(._untouched)):not(
-            [data-mode~='readonly'],
-            [data-mode~='valid'],
-            [data-state='disabled'],
-            :disabled,
-            ._disabled
-        ) {
-        @content;
+    &:is([data-mode~='invalid'], .tui-invalid),
+    &:invalid:not(._untouched) {
+        &:not([data-mode~='readonly'], [data-mode~='valid'], [data-state='disabled'], :disabled, ._disabled) {
+            @content;
+        }
     }
 }

package/mixins/liquid-glass.less

@@ -35,16 +35,15 @@
 
 .liquid-glass-vars() {
     --t-glass-background: rgba(255, 255, 255, 0.7);
-    --t-glass-glow: var(--tui-background-base);
-    --t-glass-filter: blur(0.25rem) saturate(6) brightness(1.05);
+    --t-glass-glow: rgba(255, 255, 255, 0.1);
+    --t-glass-filter: blur(0.25rem) saturate(1.3) brightness(1.05);
     --t-glass-bevel: @tui-glass-bevel-light;
     --t-glass-bevel-filter: none;
 }
 
 .liquid-glass-dark() {
-    --t-glass-background: rgba(88, 88, 88, 0.31);
-    --t-glass-glow: rgba(31, 31, 31, 0.8);
-    --t-glass-filter: blur(0.25rem) saturate(4);
+    --t-glass-background: rgba(255, 255, 255, 0.1);
+    --t-glass-glow: rgba(31, 31, 31, 0.08);
     --t-glass-bevel: @tui-glass-bevel-dark;
     --t-glass-bevel-filter: brightness(0.6);
 }
@@ -55,7 +54,7 @@
     background-color: var(--t-glass-background);
     box-shadow:
         @shadow,
-        inset 0 0 0.75rem var(--t-glass-glow);
+        inset 0 0 0.5rem var(--t-glass-glow);
 }
 
 // The bevel of the glass: a gradient clipped to a 1px ring by subtracting the

package/mixins/miscellaneous.less

@@ -104,7 +104,6 @@
 
 .scrollbar-hidden() {
     scrollbar-width: none;
-    -ms-overflow-style: none;
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {

package/mixins/theme/palette.less

@@ -96,9 +96,9 @@
     --tui-text-primary-on-accent-2: #fff;
     --tui-text-action: #4c66c3;
     --tui-text-action-hover: #6c86e2;
-    --tui-text-positive: #3aa981;
+    --tui-text-positive: #008764;
     --tui-text-positive-hover: #7ac5aa;
-    --tui-text-negative: #ff291a;
+    --tui-text-negative: #eb1700;
     --tui-text-negative-hover: #ff4d4d;
     // Charts
     --tui-chart-categorical-00: var(--tui-background-accent-1);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.24.0",
+    "version": "5.25.0-canary.3fb67e2",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "repository": {
         "type": "git",