@taiga-ui/styles 4.71.1 → 5.0.0-canary.2da416d

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.71.1",
-    "description": "Global Styles for Taiga UI"
+    "version": "5.0.0-canary.2da416d",
+    "description": "Framework-agnostic package with styles for Taiga UI",
+    "license": "Apache-2.0",
+    "exports": {
+        "./*": "./*"
+    },
+    "peerDependencies": {
+        "@taiga-ui/design-tokens": "~0.283.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);
+}

package/theme/appearance/status.less

@@ -0,0 +1,125 @@
+@import '../../utils.less';
+
+[tuiAppearance][data-appearance='negative'],
+[tuiAppearance][data-appearance='positive'],
+[tuiAppearance][data-appearance='warning'],
+[tuiAppearance][data-appearance='info'],
+[tuiAppearance][data-appearance='neutral'] {
+    background: var(--t-bg);
+    color: var(--tui-text-primary);
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        color: #fff;
+    }
+}
+
+[tuiAppearance][data-appearance='negative'] {
+    --t-bg: var(--tui-status-negative-pale);
+
+    &::before,
+    &::after {
+        color: var(--tui-status-negative);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--tui-status-negative-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--tui-status-negative-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--tui-status-negative);
+    }
+}
+
+[tuiAppearance][data-appearance='positive'] {
+    --t-bg: var(--tui-status-positive-pale);
+
+    &::before,
+    &::after {
+        color: var(--tui-status-positive);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--tui-status-positive-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--tui-status-positive-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--tui-status-positive);
+    }
+}
+
+[tuiAppearance][data-appearance='warning'] {
+    --t-bg: var(--tui-status-warning-pale);
+
+    &::before,
+    &::after {
+        color: var(--tui-status-warning);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--tui-status-warning-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--tui-status-warning-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--tui-status-warning);
+    }
+}
+
+[tuiAppearance][data-appearance='info'] {
+    --t-bg: var(--tui-status-info-pale);
+
+    &::before,
+    &::after {
+        color: var(--tui-status-info);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--tui-status-info-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--tui-status-info-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--tui-status-info);
+    }
+}
+
+[tuiAppearance][data-appearance='neutral'] {
+    --t-bg: var(--tui-background-neutral-1);
+
+    &::before,
+    &::after {
+        color: var(--tui-status-neutral);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--tui-background-neutral-1-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--tui-background-neutral-1-pressed);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--tui-status-neutral);
+    }
+}

package/theme/appearance/table.less

@@ -0,0 +1,68 @@
+@import '../../utils.less';
+
+[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;
+    margin: -1px -1px 0;
+    overflow: hidden;
+
+    &: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;
+    }
+
+    &::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({
+        border-image: conic-gradient(var(--tui-border-focus) 0 0) 1 / 0.125rem / 0 0 1px;
+    });
+
+    .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);
+        }
+
+        .appearance-hover({
+            &[data-focus='false'] {
+                background-color: var(--tui-status-negative-pale-hover);
+            }
+        });
+
+        .appearance-disabled({
+            background: transparent;
+            outline: none;
+        });
+
+        .appearance-focus({
+            background-color: transparent;
+            border-image: conic-gradient(var(--tui-status-negative) 0 0) 1 / 1px / 0 0 1px;
+        });
+    });
+}