@taiga-ui/legacy 4.0.0-rc.1

package/styles/mixins/wrapper.scss

@@ -0,0 +1,59 @@
+@mixin wrapper-hover {
+    @media (hover: hover) {
+        &:hover:not(._no-hover),
+        &[data-state='hover'] {
+            @content;
+        }
+    }
+}
+
+@mixin wrapper-active {
+    &:active:not(._no-active),
+    &[data-state='active'],
+    &[data-state='active']:hover {
+        @content;
+    }
+}
+
+@mixin wrapper-readonly($native: false) {
+    // Specificity artificially increased to match `:hover:not()` level
+    @if $native == true {
+        &:read-only:read-only,
+        &[data-state='readonly'][data-state='readonly'] {
+            @content;
+        }
+    }
+
+    @if $native == false {
+        &[data-state='readonly'][data-state='readonly'] {
+            @content;
+        }
+    }
+}
+
+@mixin wrapper-disabled {
+    // Specificity artificially increased to match `:hover:not()` level
+    &:disabled:disabled,
+    &[data-state='disabled'][data-state='disabled'] {
+        @content;
+    }
+}
+
+@mixin wrapper-focus {
+    // TODO: Join rules together once all browsers support focus-visible
+    // Specificity artificially increased to match `:hover:not()` level
+    &:focus-visible:focus-visible {
+        @content;
+    }
+
+    &._focused._focused {
+        @content;
+    }
+}
+
+@mixin wrapper-invalid {
+    &:invalid:invalid,
+    &._invalid._invalid {
+        @content;
+    }
+}

package/styles/taiga-ui-local.less

@@ -0,0 +1,4 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+@import 'mixins/mixins.less';
+@import 'mixins/textfield.less';
+@import 'mixins/wrapper.less';

package/styles/taiga-ui-local.scss

@@ -0,0 +1,4 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.scss';
+@import 'mixins/mixins.scss';
+@import 'mixins/textfield.scss';
+@import 'mixins/wrapper.scss';

package/styles/taiga-ui-theme.less

@@ -0,0 +1,15 @@
+@import 'wrapper/icon.less';
+@import 'wrapper/outline.less';
+@import 'wrapper/primary.less';
+@import 'wrapper/accent.less';
+@import 'wrapper/floating.less';
+@import 'wrapper/glass.less';
+@import 'wrapper/secondary.less';
+@import 'wrapper/secondary-destructive.less';
+@import 'wrapper/table.less';
+@import 'wrapper/textfield.less';
+@import 'wrapper/whiteblock.less';
+@import 'wrapper/none.less';
+@import 'wrapper/opposite.less';
+@import 'wrapper/base.less';
+@import 'wrapper/mono.less';

package/styles/wrapper/accent.less

@@ -0,0 +1,28 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='accent'] {
+    background: var(--tui-background-accent-2);
+    color: var(--tui-text-primary-on-accent-2);
+
+    .wrapper-hover({
+        background: var(--tui-background-accent-2-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-background-accent-2-pressed);
+    });
+
+    .wrapper-invalid({
+        color: var(--tui-status-negative);
+        background: var(--tui-status-negative-pale);
+
+        .wrapper-hover({
+            background: var(--tui-status-negative-pale-hover);
+        });
+
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-status-negative);
+        });
+    });
+}

package/styles/wrapper/base.less

@@ -0,0 +1,44 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper] {
+    .transition(~'color, background, opacity');
+
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+    appearance: none;
+    border-radius: inherit;
+
+    &:after {
+        .transition(~'box-shadow, color');
+        .fullsize(absolute, inset);
+
+        content: '';
+        border-radius: inherit;
+        border: 1px solid currentColor;
+        pointer-events: none;
+        color: transparent;
+    }
+
+    .wrapper-focus({
+        &:after {
+            border-width: 2px;
+            color: var(--tui-border-focus);
+        }
+    });
+
+    .wrapper-disabled({
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+    });
+
+    // Temporary hide focus in Safari until we figure out a better approach
+    .safari-only({
+        :focus-visible &,
+        &:focus-visible {
+            --tui-border-focus: transparent !important;
+        }
+    });
+}

package/styles/wrapper/floating.less

@@ -0,0 +1,19 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='floating'] {
+    .transition(~'background, box-shadow');
+
+    background: #fff;
+    color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+
+    .wrapper-hover({
+        box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
+    });
+
+    .wrapper-active({
+        background: #f6f7f8;
+        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    });
+}

package/styles/wrapper/glass.less

@@ -0,0 +1,31 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='glass'] {
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    backdrop-filter: blur(1rem);
+
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
+
+    .wrapper-hover({
+        background: rgba(0, 0, 0, 0.48);
+    });
+
+    .wrapper-active({
+        background: rgba(0, 0, 0, 0.6);
+    });
+
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
+        background: rgba(255, 255, 255, 0.3);
+
+        .wrapper-hover({
+            background: rgba(255, 255, 255, 0.4);
+        });
+
+        .wrapper-active({
+            background: rgba(255, 255, 255, 0.5);
+        });
+    }
+}

package/styles/wrapper/icon.less

@@ -0,0 +1,53 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+// TODO: Remove manual specificity after FM is updated to 3.18+
+[tuiWrapper][data-appearance='icon'][data-appearance='icon'] {
+    .transition(opacity);
+
+    color: var(--tui-text-primary);
+    opacity: 0.5;
+
+    [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
+        opacity: 0.65;
+    }
+
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
+        color: var(--tui-text-primary);
+
+        [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
+            opacity: 1;
+        }
+
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-background-base);
+        });
+
+        .wrapper-hover({
+            opacity: 1;
+        });
+    }
+
+    .wrapper-hover({
+        opacity: 0.65;
+    });
+
+    .wrapper-active({
+        opacity: 1;
+    });
+
+    .wrapper-disabled({
+        opacity: calc(0.5 * var(--tui-disabled-opacity));
+    });
+}
+
+tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
+tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
+tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'] {
+    color: var(--tui-text-secondary);
+
+    [tuiTheme='dark'] & {
+        color: var(--tui-text-primary);
+    }
+}

package/styles/wrapper/mono.less

@@ -0,0 +1,23 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='mono'],
+[tuiWrapper][data-appearance='mono'] {
+    background: var(--tui-background-base);
+    color: var(--tui-text-primary);
+
+    .wrapper-hover({
+        color: var(--tui-text-tertiary);
+    });
+
+    .wrapper-active({
+        color: var(--tui-text-secondary);
+    });
+
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-text-primary);
+        });
+    }
+}

package/styles/wrapper/none.less

@@ -0,0 +1,5 @@
+[tuiWrapper][data-appearance='none'] {
+    &:after {
+        border: none;
+    }
+}

package/styles/wrapper/opposite.less

@@ -0,0 +1,33 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='opposite'] {
+    background: #000;
+    color: #fff;
+
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
+
+    .wrapper-hover({
+        background: #333;
+    });
+
+    .wrapper-active({
+        background: #5c636b;
+    });
+
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
+        color: rgba(0, 0, 0, 0.8);
+        background: #fff;
+
+        --tui-border-focus: rgba(51, 51, 51, 0.48);
+
+        .wrapper-hover({
+            background: #f3F4f6;
+        });
+
+        .wrapper-active({
+            background: #eaecee;
+        });
+    }
+}

package/styles/wrapper/outline.less

@@ -0,0 +1,52 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='outline'] {
+    background: transparent;
+    color: var(--tui-text-primary);
+
+    &:after {
+        color: var(--tui-border-normal);
+    }
+
+    [tuiTheme='dark'] &,
+    &[tuiTheme='dark'] {
+        color: var(--tui-text-primary);
+
+        &:after {
+            color: var(--tui-text-primary);
+        }
+
+        .wrapper-hover({
+            background: var(--tui-background-neutral-1-hover);
+
+            &:after {
+                color: var(--tui-text-tertiary);
+            }
+        });
+
+        .wrapper-active({
+            background: var(--tui-background-neutral-1-pressed);
+
+            &:after {
+                color: var(--tui-text-tertiary);
+            }
+        });
+
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-text-primary);
+        });
+    }
+
+    .wrapper-hover({
+        &:after {
+            color: var(--tui-border-hover);
+        }
+    });
+
+    .wrapper-active({
+        &:after {
+            color: var(--tui-border-hover);
+        }
+    });
+}

package/styles/wrapper/primary.less

@@ -0,0 +1,32 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='primary'] {
+    background: var(--tui-background-accent-1);
+    color: var(--tui-text-primary-on-accent-1);
+
+    .wrapper-hover({
+        background: var(--tui-background-accent-1-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-background-accent-1-pressed);
+    });
+
+    .wrapper-invalid({
+        color: var(--tui-status-negative);
+        background: var(--tui-status-negative-pale);
+
+        .wrapper-hover({
+            background: var(--tui-status-negative-pale-hover);
+        });
+
+        .wrapper-active({
+            background: var(--tui-status-negative-pale-hover);
+        });
+
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-status-negative);
+        })
+    });
+}

package/styles/wrapper/secondary-destructive.less

@@ -0,0 +1,16 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='secondary-destructive'],
+[tuiWrapper][data-appearance='secondary-destructive'] {
+    background: var(--tui-status-negative-pale);
+    color: var(--tui-status-negative);
+
+    .wrapper-hover({
+        background: var(--tui-status-negative-pale-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-status-negative-pale-hover);
+    });
+}

package/styles/wrapper/secondary.less

@@ -0,0 +1,47 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='secondary'],
+[tuiWrapper][data-appearance='flat'],
+[tuiWrapper][data-appearance='destructive'] {
+    background: var(--tui-background-neutral-1);
+    color: var(--tui-text-action);
+
+    .wrapper-hover({
+        background: var(--tui-background-neutral-1-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-background-neutral-1-pressed);
+    });
+
+    .wrapper-invalid({
+        color: var(--tui-status-negative);
+        background: var(--tui-status-negative-pale);
+
+        .wrapper-hover({
+            background: var(--tui-status-negative-pale-hover);
+        });
+
+        .wrapper-focus({
+            --tui-border-focus: var(--tui-status-negative);
+        });
+    });
+}
+
+[tuiWrapper][data-appearance='flat'] {
+    background: transparent;
+}
+
+[tuiWrapper][data-appearance='destructive'] {
+    color: var(--tui-status-negative);
+    background: var(--tui-status-negative-pale);
+
+    .wrapper-hover({
+        background: var(--tui-status-negative-pale-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-status-negative-pale-hover);
+    });
+}

package/styles/wrapper/table.less

@@ -0,0 +1,82 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='table'] {
+    border-radius: 0;
+    background: transparent;
+    color: var(--tui-text-primary);
+
+    /* stylelint-disable meowtec/no-px */
+    &:before,
+    &[data-appearance='table']:after {
+        position: fixed;
+        top: -0.03125rem;
+        left: -1px;
+        right: -0.03125rem;
+        bottom: -1px;
+    }
+    /* stylelint-enable meowtec/no-px */
+
+    &:before {
+        .transition(background);
+
+        content: '';
+        z-index: -1;
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-size: 0.5rem 0.5rem;
+    }
+
+    table &[data-appearance='table']:not(._focused):after {
+        border-width: 0;
+    }
+
+    table &._focused {
+        z-index: 1;
+    }
+
+    &[data-appearance='table']:after {
+        border-width: 1px;
+        color: var(--tui-border-normal);
+    }
+
+    .wrapper-hover({
+        &:not(._focused):before {
+            background-color: var(--tui-background-neutral-1);
+        }
+    });
+
+    .wrapper-focus({
+        background: transparent;
+    });
+
+    .wrapper-invalid({
+        &:before {
+            background-image: linear-gradient(to top right, transparent 0%, transparent 50%, var(--tui-status-negative) 50%, var(--tui-status-negative) 100%);
+        }
+
+        &:not(._focused):before {
+            background-color: var(--tui-status-negative-pale);
+        }
+
+        .wrapper-hover({
+            &:not(._focused):before {
+                background-color: var(--tui-status-negative-pale-hover);
+            }
+        });
+
+        .wrapper-disabled({
+            background: transparent;
+        });
+
+        .wrapper-focus({
+            background: transparent;
+
+            --tui-border-focus: var(--tui-status-negative);
+
+            &:after {
+                border-width: 1px;
+            }
+        });
+    });
+}

package/styles/wrapper/textfield.less

@@ -0,0 +1,80 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='textfield'] {
+    .transition(~'box-shadow, background');
+
+    background: var(--tui-background-base);
+    color: var(--tui-text-primary);
+    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+
+    &[data-appearance='textfield']:after {
+        .transition(color);
+
+        color: var(--tui-border-normal);
+    }
+
+    .wrapper-hover({
+        box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+    });
+
+    .wrapper-focus({
+        box-shadow: none;
+
+        &:after {
+            --tui-border-focus: var(--tui-background-accent-1);
+        }
+    });
+
+    .wrapper-readonly({
+        box-shadow: none;
+
+        &:after {
+            color: var(--tui-border-normal);
+        }
+    });
+
+    .wrapper-disabled({
+        box-shadow: none;
+    });
+
+    .wrapper-invalid({
+        &:after {
+            color: var(--tui-status-negative);
+            --tui-border-focus: var(--tui-status-negative);
+        }
+    });
+}
+
+[tuiWrapper][data-appearance='textfield'][tuiTheme='dark'],
+[tuiTheme='dark'] [tuiWrapper][data-appearance='textfield'] {
+    background: var(--tui-background-neutral-1);
+    color: var(--tui-text-primary);
+
+    &:after {
+        color: var(--tui-border-normal);
+    }
+
+    .wrapper-hover({
+        background: var(--tui-background-neutral-1-hover);
+    });
+
+    .wrapper-readonly({
+        background: transparent;
+    });
+
+    .wrapper-focus({
+        background: transparent;
+
+        &:after {
+            transition: none;
+            --tui-border-focus: var(--tui-background-accent-1);
+        }
+    });
+
+    .wrapper-invalid({
+        &:after {
+            --tui-border-focus: var(--tui-status-negative);
+        }
+    });
+}

package/styles/wrapper/whiteblock.less

@@ -0,0 +1,47 @@
+@import '@taiga-ui/legacy/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='whiteblock'],
+[tuiWrapper][data-appearance='whiteblock-active'] {
+    background: var(--tui-background-base);
+    color: var(--tui-text-primary);
+
+    &:after {
+        color: var(--tui-border-normal);
+    }
+
+    .wrapper-hover({
+        background: var(--tui-background-base-alt);
+
+        &:after {
+            color: var(--tui-border-normal);
+        }
+    });
+
+    .wrapper-active({
+        background: var(--tui-background-base-alt);
+
+        &:after {
+            color: var(--tui-border-normal);
+        }
+    });
+}
+
+[tuiWrapper][data-appearance='whiteblock-active'] {
+    &:after {
+        color: var(--tui-background-accent-1);
+        border-width: 2px;
+    }
+
+    .wrapper-hover({
+        &:after {
+            color: var(--tui-background-accent-1-hover);
+        }
+    });
+
+    .wrapper-active({
+        &:after {
+            color: var(--tui-background-accent-1-pressed);
+        }
+    });
+}