@taiga-ui/styles 4.75.0 → 5.0.0-canary.1e78a8a

package/mixins/miscellaneous.scss

@@ -0,0 +1,164 @@
+@import 'browsers';
+
+@mixin interactive {
+    &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
+        @content;
+    }
+}
+
+// centering with translate
+@mixin center-left() {
+    position: absolute;
+    // stylelint-disable-next-line
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+@mixin center-top() {
+    position: absolute;
+    // stylelint-disable-next-line
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+@mixin center-all() {
+    position: absolute;
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+}
+
+//.fullsize
+@mixin fullsize($position: absolute, $mode: height) {
+    position: $position;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+
+    @if ($mode == height) {
+        inline-size: 100%;
+        block-size: 100%;
+    }
+
+    @if ($mode == inset) {
+        inset-block-end: 0;
+        inset-inline-end: 0;
+    }
+}
+
+@mixin button-clear() {
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    line-height: inherit;
+    text-decoration: none;
+}
+
+@mixin button-base() {
+    @include button-clear();
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    max-inline-size: 100%;
+    gap: calc(var(--t-gap) - 2 * var(--t-margin));
+
+    > img,
+    > tui-icon,
+    > [tuiAvatar],
+    > tui-badge,
+    > [tuiBadge],
+    > [tuiRadio],
+    > [tuiSwitch],
+    > [tuiCheckbox],
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        margin: var(--t-margin);
+    }
+}
+
+// transition
+@mixin transition($param: all, $speed: var(--tui-duration, 300ms)) {
+    transition-property: $param;
+    transition-duration: $speed;
+    transition-timing-function: ease-in-out;
+}
+
+// gradient
+@mixin gradient($start-color, $end-color, $angle: 45deg) {
+    background-image: linear-gradient($angle, $start-color 0%, $end-color 100%);
+}
+
+// typical properties for text overflow with ellipsis
+@mixin text-overflow($type: nowrap) {
+    white-space: $type;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin scrollbar-hidden() {
+    /* stylelint-disable*/
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    /* stylelint-enable*/
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-thumb {
+        display: none;
+    }
+}
+
+// hide an element visually without hiding it from screen readers
+@mixin sr-only() {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+}
+
+// prevent scrolling to focused element on IOS
+@mixin tui-prevent-ios-scroll() {
+    &:focus {
+        animation: tuiPreventIOSScroll 0.001s;
+    }
+
+    @keyframes tuiPreventIOSScroll {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}
+
+@mixin text-truncate() {
+    @include text-overflow();
+
+    flex: 1;
+    min-inline-size: 0;
+    max-inline-size: max-content;
+}
+
+@mixin tui-line-clamp($count: 3) {
+    display: -webkit-box;
+    -webkit-box-orient: block-axis;
+    -webkit-line-clamp: $count;
+    line-clamp: $count;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin tui-mask($x, $y, $r) {
+    mask: radial-gradient(circle at $x $y, transparent $r, black $r);
+}

package/mixins/slider.less

@@ -0,0 +1,67 @@
+@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-typography-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/mixins/slider.scss

@@ -0,0 +1,67 @@
+$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-typography-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/package.json

@@ -1,5 +1,12 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "4.75.0",
-    "description": "Global Styles for Taiga UI"
+    "version": "5.0.0-canary.1e78a8a",
+    "description": "Framework-agnostic package with styles for Taiga UI",
+    "license": "Apache-2.0",
+    "exports": {
+        "./*": "./*"
+    },
+    "peerDependencies": {
+        "@taiga-ui/design-tokens": "~0.286.0"
+    }
 }

package/taiga-ui-fonts.less

@@ -0,0 +1,4 @@
+// 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/taiga-ui-theme.less

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

package/theme/appearance/accent.less

@@ -0,0 +1,14 @@
+@import '../../utils.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/theme/appearance/action.less

@@ -0,0 +1,38 @@
+[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/theme/appearance/flat.less

@@ -0,0 +1,23 @@
+@import '../../utils.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/theme/appearance/floating.less

@@ -0,0 +1,21 @@
+@import '../../utils.less';
+
+[tuiAppearance][data-appearance='floating'] {
+    background: var(--tui-background-elevation-2);
+    color: var(--tui-text-primary);
+    box-shadow: var(--tui-shadow-small);
+
+    &::before,
+    &::after {
+        transition-property: color;
+    }
+
+    .appearance-hover({
+        box-shadow: var(--tui-shadow-small-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-background-base-alt);
+        box-shadow: var(--tui-shadow-small);
+    });
+}

package/theme/appearance/glass.less

@@ -0,0 +1,30 @@
+@import '../../utils.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/theme/appearance/outline.less

@@ -0,0 +1,78 @@
+@import '../../utils.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/theme/appearance/primary.less

@@ -0,0 +1,48 @@
+@import '../../utils.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/theme/appearance/secondary.less

@@ -0,0 +1,77 @@
+@import '../../utils.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);
+}