@taiga-ui/styles 4.69.0 → 5.0.0-canary.0dd40e8

package/mixins/picker.scss

@@ -0,0 +1,199 @@
+@import 'miscellaneous';
+
+// @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/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-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/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-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/package.json

@@ -1,5 +1,12 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "4.69.0",
-    "description": "Global Styles for Taiga UI"
+    "version": "5.0.0-canary.0dd40e8",
+    "description": "Framework-agnostic package with styles for Taiga UI",
+    "license": "Apache-2.0",
+    "exports": {
+        "./*": "./*"
+    },
+    "peerDependencies": {
+        "@taiga-ui/design-tokens": "~0.277.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);
+}