@taiga-ui/core 5.0.0-rc.2 → 5.0.0-rc.4

package/styles/mixins/picker.scss

@@ -1,199 +0,0 @@
-@import 'mixins.scss';
-
-// @deprecated
-@mixin picker($itemSize) {
-    :host {
-        display: block;
-        font: var(--tui-font-body-m);
-    }
-
-    .t-row {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        height: 2.25rem;
-        isolation: isolate;
-    }
-
-    .t-item {
-        position: relative;
-        flex: 1;
-        line-height: 2rem;
-        border-radius: var(--tui-radius-m);
-
-        &:before,
-        &:after {
-            @include fullsize(absolute, inset);
-
-            content: '';
-            z-index: -1;
-            border-radius: var(--tui-radius-m);
-        }
-
-        &:after {
-            border-radius: 0.5rem;
-        }
-    }
-
-    .t-cell {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $itemSize;
-        text-align: center;
-        outline: none;
-        cursor: pointer;
-        background-clip: content-box;
-        box-sizing: border-box;
-        border: 0.125rem solid transparent;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: -1;
-            border-radius: var(--tui-radius-m);
-        }
-
-        &_today:after {
-            @include center-left();
-            content: '';
-            bottom: 0.3125rem;
-            height: 0.125rem;
-            width: 0.75rem;
-            border-radius: 0.375rem;
-            background: var(--tui-text-primary);
-        }
-
-        &_interval {
-            &:before {
-                background: var(--tui-background-base-alt);
-
-                :host._single & {
-                    background: var(--tui-background-neutral-1-hover);
-                }
-            }
-
-            &:not(:last-child):before {
-                right: -0.1875rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            &:not([data-range='start']):not(:first-child):before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:last-child:first-child:before {
-                right: 0;
-            }
-
-            &:first-child > .t-item {
-                border-top-left-radius: var(--tui-radius-m);
-                border-bottom-left-radius: var(--tui-radius-m);
-            }
-
-            &:last-child > .t-item {
-                border-top-right-radius: var(--tui-radius-m);
-                border-bottom-right-radius: var(--tui-radius-m);
-            }
-
-            & > .t-item {
-                border-radius: 0;
-            }
-        }
-
-        &[data-range] {
-            &:after {
-                background: var(--tui-text-primary-on-accent-1);
-            }
-
-            & > .t-item {
-                color: var(--tui-text-primary-on-accent-1);
-
-                &:before,
-                &:after {
-                    background: var(--tui-background-accent-1);
-                }
-            }
-
-            &:hover > .t-item:before,
-            &:hover > .t-item:after {
-                background: var(--tui-background-accent-1-hover);
-            }
-
-            &:active > .t-item:before,
-            &:active > .t-item:after {
-                background: var(--tui-background-accent-1-pressed);
-            }
-        }
-
-        &[data-range='end'] {
-            &:before {
-                background: var(--tui-background-base-alt);
-
-                :host._single & {
-                    background: var(--tui-background-neutral-1-hover);
-                }
-            }
-
-            &:not(:first-child):before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-        }
-
-        &[data-range='end'] > .t-item {
-            &:before {
-                left: 0.625rem;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:after {
-                left: -2rem;
-                right: 100%;
-                transform: translateX(1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
-            }
-        }
-
-        &[data-range='start'] > .t-item {
-            &:before {
-                right: 0.625rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            &:after {
-                left: 100%;
-                right: -2rem;
-                transform: translateX(-1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
-            }
-        }
-
-        &[data-range='single'] > .t-item:after {
-            display: none;
-        }
-
-        &_disabled {
-            pointer-events: none;
-
-            & > .t-item {
-                opacity: 0.36;
-            }
-        }
-
-        &:hover:not([data-range]) > .t-item {
-            background: var(--tui-background-neutral-1-hover);
-        }
-
-        &:active:not([data-range]) > .t-item {
-            background: var(--tui-background-neutral-1-pressed);
-        }
-    }
-}

package/styles/mixins/slider.less

@@ -1,67 +0,0 @@
-@track-inset: {
-    @s: 0.625rem;
-    @m: 0.75rem;
-    @l: 1rem;
-};
-
-@thumb-diameter: var(--tui-thumb-size, 0.75rem);
-@thumb-radius: calc(@thumb-diameter / 2);
-@track-thickness: max(calc(@thumb-radius - 0.25rem), 0.125rem);
-
-.tui-slider-ticks-labels() {
-    --t-offset: @thumb-radius;
-
-    display: flex;
-    font: var(--tui-font-body-s);
-    color: var(--tui-text-secondary);
-    margin: 0.25rem var(--t-offset) 0;
-
-    & > * {
-        position: relative;
-        flex: 2;
-        text-align: center;
-
-        &:first-child {
-            inset-inline-start: calc(-1 * var(--t-offset));
-            flex: 1;
-            text-align: start;
-        }
-
-        &:last-child {
-            inset-inline-end: calc(-1 * var(--t-offset));
-            flex: 1;
-            text-align: end;
-        }
-    }
-
-    tui-range + & {
-        --t-offset: @thumb-diameter;
-    }
-
-    /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(@track-inset[@l] + @thumb-radius);
-    }
-
-    /* TODO: add :has([tuiInputSlider]) */
-    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[data-size='s'] + & {
-        --t-offset: calc(@track-inset[@s] + @thumb-diameter);
-    }
-}

package/styles/mixins/slider.scss

@@ -1,67 +0,0 @@
-$track-inset: (
-    's': 0.625rem,
-    'm': 0.75rem,
-    'l': 1rem,
-);
-
-$thumb-diameter: var(--tui-thumb-size, 0.75rem);
-$thumb-radius: calc($thumb-diameter / 2);
-$track-thickness: max(calc($thumb-radius - 0.25rem), 0.125rem);
-
-@mixin tui-slider-ticks-labels() {
-    --t-offset: $thumb-radius;
-
-    display: flex;
-    font: var(--tui-font-body-s);
-    color: var(--tui-text-secondary);
-    margin: 0.25rem var(--t-offset) 0;
-
-    & > * {
-        position: relative;
-        flex: 2;
-        text-align: center;
-
-        &:first-child {
-            inset-inline-start: calc(-1 * var(--t-offset));
-            flex: 1;
-            text-align: start;
-        }
-
-        &:last-child {
-            inset-inline-end: calc(-1 * var(--t-offset));
-            flex: 1;
-            text-align: end;
-        }
-    }
-
-    tui-range + & {
-        --t-offset: $thumb-diameter;
-    }
-
-    /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(map-get($track-inset, 'l') + $thumb-radius);
-    }
-
-    /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='m'] + & {
-        --t-offset: calc(map-get($track-inset, 'm') + $thumb-radius);
-    }
-
-    /* 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[data-size='s'] + & {
-        --t-offset: calc(map-get($track-inset, 's') + $thumb-diameter);
-    }
-}

package/styles/taiga-ui-fonts.less

@@ -1,4 +0,0 @@
-// stylelint-disable
-// https://github.com/stackblitz/core/issues/2104#issuecomment-1397086512
-//noinspection CssUnknownTarget
-@import (optional) url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);

package/styles/taiga-ui-local.less

@@ -1,7 +0,0 @@
-@import 'mixins/browsers.less';
-@import 'mixins/date-picker.less';
-@import 'mixins/mixins.less';
-@import 'mixins/picker.less';
-@import 'mixins/slider.less';
-@import 'mixins/appearance.less';
-@import 'variables/media.less';

package/styles/taiga-ui-local.scss

@@ -1,6 +0,0 @@
-@import 'mixins/browsers.scss';
-@import 'mixins/mixins.scss';
-@import 'mixins/picker.scss';
-@import 'mixins/slider.scss';
-@import 'mixins/appearance.scss';
-@import 'variables/media.scss';

package/styles/taiga-ui-theme.less

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

package/styles/theme/appearance/accent.less

@@ -1,14 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='accent'] {
-    background: var(--tui-background-accent-2);
-    color: var(--tui-text-primary-on-accent-2);
-
-    .appearance-hover({
-        background: var(--tui-background-accent-2-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-accent-2-pressed);
-    });
-}

package/styles/theme/appearance/action.less

@@ -1,38 +0,0 @@
-[tuiAppearance][data-appearance='action'] {
-    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-destructive'] {
-    color: var(--tui-text-negative);
-    background: transparent;
-
-    .appearance-hover({
-        color: var(--tui-text-negative-hover);
-    });
-
-    .appearance-active({
-        color: var(--tui-text-negative-hover);
-    });
-}
-
-[tuiAppearance][data-appearance='action-grayscale'] {
-    color: var(--tui-text-secondary);
-    background: transparent;
-
-    .appearance-hover({
-        color: var(--tui-text-primary);
-    });
-
-    .appearance-active({
-        color: var(--tui-text-primary);
-    });
-}

package/styles/theme/appearance/flat.less

@@ -1,23 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='flat'],
-[tuiAppearance][data-appearance='flat-destructive'],
-[tuiAppearance][data-appearance='flat-grayscale'] {
-    color: var(--tui-text-action);
-
-    .appearance-hover({
-        background: var(--tui-background-neutral-1-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-neutral-1-pressed);
-    });
-}
-
-[tuiAppearance][data-appearance='flat-destructive'] {
-    color: var(--tui-text-negative);
-}
-
-[tuiAppearance][data-appearance='flat-grayscale'] {
-    color: var(--tui-text-primary);
-}

package/styles/theme/appearance/floating.less

@@ -1,21 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='floating'] {
-    background: var(--tui-background-elevation-2);
-    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);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-base-alt);
-        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
-    });
-}

package/styles/theme/appearance/glass.less

@@ -1,30 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][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);
-
-    .appearance-hover({
-        background: rgba(0, 0, 0, 0.48);
-    });
-
-    .appearance-active({
-        background: rgba(0, 0, 0, 0.6);
-    });
-}
-
-[tuiTheme='dark'] [tuiAppearance][data-appearance='glass'],
-[tuiTheme='dark'][tuiAppearance][data-appearance='glass'] {
-    background: rgba(255, 255, 255, 0.3);
-
-    .appearance-hover({
-        background: rgba(255, 255, 255, 0.4);
-    });
-
-    .appearance-active({
-        background: rgba(255, 255, 255, 0.5);
-    });
-}

package/styles/theme/appearance/outline.less

@@ -1,78 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='outline'],
-[tuiAppearance][data-appearance='outline-destructive'],
-[tuiAppearance][data-appearance='outline-grayscale'] {
-    --t-bs: var(--tui-border-normal);
-
-    color: var(--tui-text-action);
-    box-shadow: inset 0 0 0 1px var(--t-bs);
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        --t-bs: var(--tui-background-accent-1);
-
-        box-shadow: inset 0 0 0 2px var(--t-bs);
-
-        .appearance-hover({
-            --t-bs: var(--tui-background-accent-1-hover);
-        });
-
-        .appearance-active({
-            --t-bs: var(--tui-background-accent-1-pressed);
-        });
-    }
-
-    .appearance-invalid({
-        box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
-
-        &:checked,
-        &[data-mode~='checked'] {
-            box-shadow: inset 0 0 0 2px var(--tui-status-negative);
-        }
-    });
-
-    .appearance-hover({
-        cursor: pointer;
-        --t-bs: var(--tui-border-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-neutral-1);
-        --t-bs: var(--tui-border-hover);
-    });
-}
-
-[tuiAppearance][data-appearance='outline-grayscale'] {
-    color: var(--tui-text-primary);
-}
-
-[tuiAppearance][data-appearance='outline-destructive'] {
-    color: var(--tui-text-negative);
-}
-
-[tuiAppearance][data-appearance='icon'],
-[tuiAppearance][data-appearance='outline-grayscale'],
-[tuiAppearance][data-appearance='floating'] {
-    color: var(--tui-text-primary);
-
-    &::before,
-    &::after {
-        transition-property: color, transform;
-        color: var(--tui-text-tertiary);
-    }
-
-    .appearance-hover({
-        &:before,
-        &:after {
-            color: var(--tui-text-secondary);
-        }
-    });
-
-    .appearance-active({
-        &:before,
-        &:after {
-            color: var(--tui-text-primary);
-        }
-    });
-}

package/styles/theme/appearance/primary.less

@@ -1,48 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='primary'] {
-    --t-bg: var(--tui-background-accent-1);
-
-    background: var(--t-bg);
-    color: var(--tui-text-primary-on-accent-1);
-
-    .appearance-invalid({
-        background: var(--tui-status-negative);
-    });
-
-    .appearance-hover({
-        --t-bg: var(--tui-background-accent-1-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-background-accent-1-pressed);
-    });
-}
-
-[tuiAppearance][data-appearance='primary-destructive'] {
-    color: #fff;
-    background: var(--tui-status-negative);
-
-    .appearance-hover({
-        filter: saturate(1) brightness(1.3);
-    });
-
-    .appearance-active({
-        filter: saturate(0.8) brightness(1);
-    });
-}
-
-[tuiAppearance][data-appearance='primary-grayscale'] {
-    --tui-border-focus: #979797;
-
-    background: var(--tui-background-accent-opposite);
-    color: var(--tui-background-base);
-
-    .appearance-hover({
-        background: var(--tui-background-accent-opposite-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-accent-opposite-pressed);
-    });
-}

package/styles/theme/appearance/secondary.less

@@ -1,77 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='secondary'],
-[tuiAppearance][data-appearance='secondary-destructive'],
-[tuiAppearance][data-appearance='secondary-grayscale'] {
-    background: var(--tui-background-neutral-1);
-    color: var(--tui-text-action);
-
-    .appearance-hover({
-        background: var(--tui-background-neutral-1-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-neutral-1-pressed);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'],
-    &[type='checkbox']:indeterminate:not([data-mode]) {
-        background: var(--tui-background-accent-1);
-        color: var(--tui-text-primary-on-accent-1);
-
-        .appearance-hover({
-            background: var(--tui-background-accent-1-hover);
-        });
-
-        .appearance-active({
-            background: var(--tui-background-accent-1-pressed);
-        });
-
-        .appearance-invalid({
-            background: var(--tui-status-negative);
-            color: #fff;
-
-            .appearance-hover({
-                background: var(--tui-status-negative);
-                color: #fff;
-            });
-
-            .appearance-active({
-                background: var(--tui-status-negative);
-                color: #fff;
-            });
-        });
-    }
-
-    .appearance-invalid({
-        color: var(--tui-text-negative);
-        background: var(--tui-status-negative-pale);
-
-        .appearance-hover({
-            color: var(--tui-text-negative-hover);
-            background: var(--tui-status-negative-pale-hover);
-        });
-
-        .appearance-active({
-            color: var(--tui-text-negative-hover);
-            background: var(--tui-status-negative-pale-hover);
-        });
-    });
-}
-
-[tuiAppearance][data-appearance='secondary-destructive'] {
-    color: var(--tui-text-negative);
-}
-
-[tuiAppearance][data-appearance='secondary-grayscale'] {
-    color: var(--tui-text-primary);
-}
-
-// Overriding to darker colors for small items
-input[type='checkbox'][data-appearance='secondary'],
-input[type='radio'][data-appearance='secondary'] {
-    --tui-background-neutral-1: var(--tui-background-neutral-2);
-    --tui-background-neutral-1-hover: var(--tui-background-neutral-2-hover);
-    --tui-background-neutral-1-pressed: var(--tui-background-neutral-2-pressed);
-}