@taiga-ui/core 4.68.0 → 5.0.0-canary.0c88239

package/styles/mixins/appearance.scss

@@ -13,14 +13,6 @@
     &[data-state='hover'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media ($tui-mouse) {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content;
-        }
-    }
 }
 
 @mixin appearance-active {
@@ -33,13 +25,6 @@
     &[data-state='active'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content;
-    }
 }
 
 @mixin appearance-disabled {
@@ -47,12 +32,6 @@
     &[data-state='disabled'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content;
-    }
 }
 
 @mixin appearance-focus {
@@ -63,10 +42,16 @@
     &[data-focus='true'] {
         @content;
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+@mixin appearance-invalid {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled,
+            ._disabled
+        ) {
         @content;
     }
 }

package/styles/mixins/date-picker.less

@@ -4,7 +4,7 @@
     .t-row {
         display: flex;
         justify-content: flex-start;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         &:first-child {
             justify-content: flex-end;

package/styles/mixins/mixins.less

@@ -1,11 +1,6 @@
 @import 'browsers.less';
 
 .interactive(@ruleset) {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @ruleset();
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @ruleset();
     }
@@ -75,9 +70,8 @@
     gap: calc(var(--t-gap, ~'0rem') - 2 * var(--t-margin, 0rem));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/mixins.scss

@@ -1,11 +1,6 @@
 @import 'browsers.scss';
 
 @mixin interactive {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @content;
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @content;
     }
@@ -72,9 +67,8 @@
     gap: calc(var(--t-gap) - 2 * var(--t-margin));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/picker.less

@@ -4,7 +4,7 @@
 .picker(@itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/picker.scss

@@ -4,7 +4,7 @@
 @mixin picker($itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/slider.less

@@ -1,25 +1,20 @@
-@thumb-diameters: {
-    @s: 0.5rem;
-    @m: 0.75rem;
-    @l: 0.75rem;
-};
-
 @track-inset: {
     @s: 0.625rem;
     @m: 0.75rem;
     @l: 1rem;
 };
 
-// TODO(v5): use `l` by default (default size for new textfields)
-.tui-slider-ticks-labels(@input-size: m) {
-    @thumb: @thumb-diameters[@@input-size];
+@thumb-diameter: var(--tui-thumb-size, 0.75rem);
+@thumb-radius: calc(@thumb-diameter / 2);
+@track-thickness: max(calc(@thumb-radius - 0.25rem), 0.125rem);
 
-    --t-offset: calc(@thumb / 2);
+.tui-slider-ticks-labels() {
+    --t-offset: @thumb-radius;
 
     display: flex;
-    font: var(--tui-font-text-s);
-    margin-inline-start: var(--t-offset);
-    margin-inline-end: var(--t-offset);
+    font: var(--tui-font-body-s);
+    color: var(--tui-text-secondary);
+    margin: 0.25rem var(--t-offset) 0;
 
     & > * {
         position: relative;
@@ -27,40 +22,46 @@
         text-align: center;
 
         &:first-child {
-            left: calc(-1 * var(--t-offset));
             inset-inline-start: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: start;
         }
 
         &:last-child {
-            right: calc(-1 * var(--t-offset));
+            inset-inline-end: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: end;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: calc(-1 * var(--t-offset));
-            }
         }
     }
 
-    /* TODO(v5): delete */
-    tui-input-slider + & {
-        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
+    tui-range + & {
+        --t-offset: @thumb-diameter;
     }
 
-    tui-input-range:not([new]) + &, /* TODO(v5): delete */
-    tui-range + & {
-        --t-offset: @thumb;
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield + & {
-        --t-offset: calc(@track-inset[@@input-size] + @thumb / 2);
+    tui-textfield[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb-radius);
+    }
+
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb-radius);
+    }
+
+    tui-input-range[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb-diameter);
+    }
+
+    tui-input-range[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb-diameter);
     }
 
-    tui-input-range[new] + & {
-        --t-offset: calc(@track-inset[@@input-size] + @thumb);
+    tui-input-range[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb-diameter);
     }
 }

package/styles/mixins/slider.scss

@@ -1,25 +1,20 @@
-$thumb-diameters: (
-    's': 0.5rem,
-    'm': 0.75rem,
-    'l': 0.75rem,
-);
-
 $track-inset: (
     's': 0.625rem,
     'm': 0.75rem,
     'l': 1rem,
 );
 
-// TODO(v5): use `l` by default (default size for new textfields)
-@mixin tui-slider-ticks-labels($input-size: m) {
-    $thumb: map-get($thumb-diameters, $input-size);
+$thumb-diameter: var(--tui-thumb-size, 0.75rem);
+$thumb-radius: calc($thumb-diameter / 2);
+$track-thickness: max(calc($thumb-radius - 0.25rem), 0.125rem);
 
-    --t-offset: calc($thumb / 2);
+@mixin tui-slider-ticks-labels() {
+    --t-offset: $thumb-radius;
 
     display: flex;
-    font: var(--tui-font-text-s);
-    margin-inline-start: var(--t-offset);
-    margin-inline-end: var(--t-offset);
+    font: var(--tui-font-body-s);
+    color: var(--tui-text-secondary);
+    margin: 0.25rem var(--t-offset) 0;
 
     & > * {
         position: relative;
@@ -27,45 +22,46 @@ $track-inset: (
         text-align: center;
 
         &:first-child {
-            left: calc(-1 * var(--t-offset));
             inset-inline-start: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: start;
         }
 
         &:last-child {
-            right: calc(-1 * var(--t-offset));
+            inset-inline-end: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: end;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: calc(-1 * var(--t-offset));
-            }
         }
     }
 
-    /* TODO(v5): delete */
-    tui-input-slider + & {
-        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
+    tui-range + & {
+        --t-offset: $thumb-diameter;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield + & {
-        --t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2);
+    tui-textfield[data-size='l'] + & {
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2);
+    tui-textfield[data-size='m'] + & {
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb-radius);
     }
 
-    tui-input-range:not([new]) + &, /* TODO(v5): delete */
-    tui-range + & {
-        --t-offset: $thumb;
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='s'] + & {
+        --t-offset: calc(map-get($track-inset, 's') + $thumb-radius);
+    }
+
+    tui-input-range[data-size='l'] + & {
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb-diameter);
+    }
+
+    tui-input-range[data-size='m'] + & {
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb-diameter);
     }
 
-    tui-input-range[new] + & {
-        --t-offset: calc(map-get($track-inset, $input-size) + $thumb);
+    tui-input-range[data-size='s'] + & {
+        --t-offset: calc(map-get($track-inset, 's') + $thumb-diameter);
     }
 }

package/styles/taiga-ui-local.less

@@ -3,6 +3,5 @@
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';
-@import 'mixins/wrapper.less';
 @import 'mixins/appearance.less';
 @import 'variables/media.less';

package/styles/taiga-ui-local.scss

@@ -2,6 +2,5 @@
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
 @import 'mixins/slider.scss';
-@import 'mixins/wrapper.scss';
 @import 'mixins/appearance.scss';
 @import 'variables/media.scss';

package/styles/taiga-ui-theme.less

@@ -1,5 +1,4 @@
 @import 'theme/variables.less';
 @import 'theme/palette.less';
 @import 'theme/appearance.less';
-@import 'theme/wrapper.less';
 @import 'theme/appearance/textfield.less';

package/styles/theme/appearance/action.less

@@ -1,17 +1,3 @@
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='link'] {
-    color: var(--tui-text-action);
-    background: transparent;
-
-    .appearance-hover({
-        color: var(--tui-text-action-hover);
-    });
-
-    .appearance-active({
-        color: var(--tui-text-action-hover);
-    });
-}
-
 [tuiAppearance][data-appearance='action'] {
     color: var(--tui-text-action);
     background: transparent;

package/styles/theme/appearance/floating.less

@@ -5,6 +5,11 @@
     color: var(--tui-text-primary);
     box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
 
+    &::before,
+    &::after {
+        transition-property: color;
+    }
+
     .appearance-hover({
         box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
     });

package/styles/theme/appearance/outline.less

@@ -2,9 +2,7 @@
 
 [tuiAppearance][data-appearance='outline'],
 [tuiAppearance][data-appearance='outline-destructive'],
-[tuiAppearance][data-appearance='outline-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='outline-grayscale'] {
     --t-bs: var(--tui-border-normal);
 
     color: var(--tui-text-action);
@@ -25,17 +23,14 @@
         });
     }
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
-    }
 
-    &:checked:invalid:not([data-mode]),
-    &[data-mode~='checked'][data-mode~='invalid'],
-    &:checked.tui-invalid:not([data-mode]) {
-        box-shadow: inset 0 0 0 2px var(--tui-status-negative);
-    }
+        &:checked,
+        &[data-mode~='checked'] {
+            box-shadow: inset 0 0 0 2px var(--tui-status-negative);
+        }
+    });
 
     .appearance-hover({
         cursor: pointer;
@@ -48,9 +43,7 @@
     });
 }
 
-[tuiAppearance][data-appearance='outline-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='outline-grayscale'] {
     color: var(--tui-text-primary);
 }
 
@@ -60,9 +53,7 @@
 
 [tuiAppearance][data-appearance='icon'],
 [tuiAppearance][data-appearance='outline-grayscale'],
-[tuiAppearance][data-appearance='floating'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='floating'] {
     color: var(--tui-text-primary);
 
     &::before,

package/styles/theme/appearance/primary.less

@@ -6,11 +6,9 @@
     background: var(--t-bg);
     color: var(--tui-text-primary-on-accent-1);
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         background: var(--tui-status-negative);
-    }
+    });
 
     .appearance-hover({
         --t-bg: var(--tui-background-accent-1-hover);

package/styles/theme/appearance/secondary.less

@@ -2,9 +2,7 @@
 
 [tuiAppearance][data-appearance='secondary'],
 [tuiAppearance][data-appearance='secondary-destructive'],
-[tuiAppearance][data-appearance='secondary-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='destructive'] {
+[tuiAppearance][data-appearance='secondary-grayscale'] {
     background: var(--tui-background-neutral-1);
     color: var(--tui-text-action);
 
@@ -30,9 +28,7 @@
             background: var(--tui-background-accent-1-pressed);
         });
 
-        &:invalid:not([data-mode]),
-        &[data-mode~='invalid'],
-        &.tui-invalid:not([data-mode]) {
+        .appearance-invalid({
             background: var(--tui-status-negative);
             color: #fff;
 
@@ -45,12 +41,10 @@
                 background: var(--tui-status-negative);
                 color: #fff;
             });
-        }
+        });
     }
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         color: var(--tui-text-negative);
         background: var(--tui-status-negative-pale);
 
@@ -63,12 +57,10 @@
             color: var(--tui-text-negative-hover);
             background: var(--tui-status-negative-pale-hover);
         });
-    }
+    });
 }
 
-[tuiAppearance][data-appearance='secondary-destructive'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='destructive'] {
+[tuiAppearance][data-appearance='secondary-destructive'] {
     color: var(--tui-text-negative);
 }
 

package/styles/theme/appearance/status.less

@@ -1,7 +1,5 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='negative'],
 [tuiAppearance][data-appearance='positive'],
 [tuiAppearance][data-appearance='warning'],
@@ -16,7 +14,6 @@
     }
 }
 
-[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='negative'] {
     --t-bg: var(--tui-status-negative-pale);
 
@@ -39,7 +36,6 @@
     }
 }
 
-[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='positive'] {
     --t-bg: var(--tui-status-positive-pale);
 

package/styles/theme/appearance/table.less

@@ -1,47 +1,49 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-/*
-TODO: remove :not([tuiWrapper]) after legacy controls deletion
-*/
-[tuiAppearance][data-appearance='table']:not([tuiWrapper]) {
-    content: '';
-    position: fixed;
-    /* TODO: Use inset: -1px after Safari 14+ support */
-    top: -1px;
-    bottom: -1px;
-    left: -1px;
-    right: -1px;
-    inline-size: auto;
-    block-size: auto;
-    border-radius: 0;
+[tuiAppearance][data-appearance='table'] {
+    min-block-size: calc(100% + 1px);
+    border-radius: 0 !important;
     background: transparent;
+    color: var(--tui-text-primary);
     border: none;
     outline: none;
-    border-block-end: calc(var(--t-row-height) - var(--t-height)) solid transparent;
+    margin: -1px -1px 0;
+    overflow: hidden;
 
-    &:not(._empty) {
-        color: var(--tui-text-primary);
+    &:not(tui-textfield[multi], tui-input-card-group) [tuiInput]:not(textarea) {
+        block-size: var(--t-height);
+        border-block-end: 100rem solid transparent;
+        box-sizing: content-box;
     }
 
-    .appearance-hover({
-        &[data-focus='false'] {
-            background-color: var(--tui-background-neutral-1);
-        }
-    });
+    &::before,
+    &::after {
+        color: var(--tui-text-tertiary);
+    }
+
+    &:not([data-mode~='readonly']) {
+        .appearance-hover({
+            &[data-focus='false'] {
+                background-color: var(--tui-background-neutral-1);
+            }
+
+            &::before,
+            &::after {
+                color: var(--tui-text-secondary);
+            }
+        });
+    }
 
     .appearance-focus({
-        outline-offset: -0.125rem;
-        outline: 0.125rem solid var(--tui-border-focus);
+        border-image: conic-gradient(var(--tui-border-focus) 0 0) 1 / 0.125rem / 0 0 1px;
     });
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
-        background-origin: border-box;
-        background-position: top right;
-        background-repeat: no-repeat;
-        background-image: linear-gradient(to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%);
-        background-size: 0.5rem 0.5rem;
+    .appearance-invalid({
+        background:
+            linear-gradient(to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%)
+            top right / 0.5rem 0.5rem
+            no-repeat
+            border-box;
 
         &[data-focus='false'] {
             background-color: var(--tui-status-negative-pale);
@@ -60,8 +62,7 @@ TODO: remove :not([tuiWrapper]) after legacy controls deletion
 
         .appearance-focus({
             background-color: transparent;
-            outline-offset: -0.0625rem;
-            outline: 0.0625rem solid var(--tui-status-negative);
+            border-image: conic-gradient(var(--tui-status-negative) 0 0) 1 / 1px / 0 0 1px;
         });
-    }
+    });
 }