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

package/components/switch.less

@@ -0,0 +1,104 @@
+@import '../utils.less';
+
+/**
+ * @name Switch
+ * @selector [tuiSwitch]
+ *
+ * @description
+ * A stylized input type="checkbox" switch
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @vars
+ * --t-icon-start — checkmark icon
+ *
+ * @example
+ * <input type="checkbox" tuiSwitch tuiAppearance data-appearance="primary" />
+ *
+ * @see-also
+ * Checkbox, Radio
+ */
+[tuiSwitch]:where(*&) {
+    .transition(~'background, box-shadow');
+
+    display: inline-block;
+    inline-size: 3rem;
+    block-size: 1.5rem;
+    border-radius: 2rem;
+    overflow: hidden;
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+    color: #fff !important;
+
+    &[data-size='s'] {
+        block-size: 1rem;
+        inline-size: 2rem;
+
+        &::before {
+            inline-size: 1rem;
+            transform: translateX(calc(var(--tui-inline) * -1rem));
+            font-size: 0.75rem;
+        }
+
+        &::after {
+            inline-size: 1rem;
+            box-shadow: calc(var(--tui-inline) * -2.625rem) 0 0 0.5rem var(--tui-background-base);
+            outline-width: 0.167rem;
+            transform: scale(0.375);
+        }
+
+        &:checked::after {
+            transform: scale(0.375) translateX(calc(var(--tui-inline) * 2.625rem));
+        }
+    }
+
+    &:checked {
+        &::before {
+            transform: none;
+        }
+
+        &::after {
+            transform: scale(0.33333) translateX(calc(var(--tui-inline) * 4.5rem));
+        }
+    }
+
+    &:disabled._readonly._readonly {
+        opacity: 1;
+    }
+
+    &::before,
+    &::after {
+        position: absolute;
+        block-size: 100%;
+        inline-size: 1.5rem;
+        transition-property: transform;
+        zoom: 1;
+    }
+
+    &::before {
+        inset-inline-start: 0.125rem;
+        font-size: 1rem;
+        transform: translateX(calc(var(--tui-inline) * -1.5rem));
+    }
+
+    &::after {
+        display: block;
+        inset-inline-end: 0;
+        border-radius: 100%;
+        background: none;
+        transform: scale(0.33333);
+        box-shadow: calc(var(--tui-inline) * -4.5rem) 0 0 0.75rem var(--tui-background-base);
+        outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
+    }
+
+    &:not([data-icon-start])::after {
+        outline-offset: 20rem;
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: #fff;
+    }
+}

package/components/textfield.less

@@ -0,0 +1,362 @@
+@import '../utils.less';
+
+tui-textfield:where(*&) {
+    .scrollbar-hidden();
+    .transition(color);
+
+    --t-height: calc(var(--tui-height-l) + 2.5 * var(--t-label) * var(--tui-font-offset));
+    --t-padding: var(--tui-padding-l);
+    --t-label: 0;
+    --t-label-y: -0.75rem;
+    --t-label-font: var(--tui-typography-ui-s);
+    --t-end: ~'0px';
+    --t-start: ~'0px';
+    --t-side: ~'0px';
+    --t-max: 0.75rem;
+    --t-space: ~'clamp(0px, calc(var(--t-side) + var(--t-end)), var(--t-max))';
+
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    min-block-size: var(--t-height);
+    padding: 0 var(--t-padding);
+    border-radius: var(--tui-radius-l);
+    font: var(--tui-typography-ui-m);
+    box-sizing: border-box;
+    isolation: isolate;
+
+    &[tuiAppearance] {
+        outline: none;
+
+        &[data-appearance=''] {
+            color: var(--tui-text-tertiary);
+
+            &:not([data-mode~='readonly']) {
+                .appearance-hover({
+                    color: var(--tui-text-secondary);
+                });
+            }
+        }
+    }
+
+    &[data-icon-start] {
+        --t-start: 2.5rem;
+    }
+
+    &[data-icon-end] {
+        --t-end: 1.75rem;
+    }
+
+    &[tuiIcons] {
+        &::before {
+            z-index: 1;
+            block-size: var(--t-height);
+            inline-size: 1.5rem;
+            margin-inline-end: 1rem;
+            pointer-events: none;
+        }
+
+        &::after {
+            position: relative;
+            block-size: var(--t-height);
+            inline-size: calc(1.5rem + 2 * var(--t-padding));
+            cursor: pointer;
+            margin-inline-start: calc(0.25rem - var(--t-padding));
+            margin-inline-end: calc(-1 * var(--t-padding));
+        }
+    }
+
+    &::-webkit-resizer {
+        border: 0.25rem solid transparent;
+        inline-size: 0.5rem;
+        block-size: 0.5rem;
+        box-sizing: content-box;
+        color: var(--tui-text-tertiary);
+        background: linear-gradient(
+            -45deg,
+            transparent,
+            transparent 0.125rem,
+            currentColor 0.125rem,
+            currentColor 0.1875rem,
+            transparent 0.1875rem,
+            transparent 0.25rem,
+            currentColor 0.25rem,
+            currentColor 0.3125rem,
+            transparent 0.35rem
+        );
+        background-clip: content-box;
+    }
+
+    [tuiLabel],
+    & > .t-content,
+    & > .t-template {
+        pointer-events: none;
+    }
+
+    &[data-size='s'] {
+        --t-height: var(--tui-height-s);
+        --t-padding: var(--tui-padding-s);
+        --t-max: ~'0px';
+
+        border-radius: var(--tui-radius-m);
+        font: var(--tui-typography-ui-s);
+
+        &[data-icon-start] {
+            --t-start: 1.5rem;
+        }
+
+        &[data-icon-end] {
+            --t-end: 1.5rem;
+        }
+
+        &::before {
+            font-size: 1rem;
+            margin-inline: -0.25rem 0.25rem;
+        }
+
+        &::after {
+            inline-size: calc(0.75rem + 2 * var(--t-padding));
+            margin-inline: 0 -0.5rem;
+            font-size: 1rem;
+        }
+
+        & > .t-content {
+            gap: 0;
+
+            > *:last-child {
+                margin-inline-end: -0.25rem;
+            }
+        }
+    }
+
+    &[data-size='m'] {
+        --t-height: calc(var(--tui-height-m) + 2.5 * var(--t-label) * var(--tui-font-offset));
+        --t-padding: var(--tui-padding-m);
+        --t-label-font: var(--tui-typography-ui-xs);
+        --t-label-y: -0.5625rem;
+        --t-max: 0.125rem;
+
+        border-radius: var(--tui-radius-m);
+        font: var(--tui-typography-ui-s);
+
+        &[data-icon-start] {
+            --t-start: 2.125rem;
+        }
+
+        &[data-icon-end] {
+            --t-end: 1.75rem;
+        }
+
+        &::before {
+            margin-inline: -0.125rem 0.75rem;
+        }
+
+        &::after {
+            inline-size: calc(1.25rem + 2 * var(--t-padding));
+            margin-inline-start: calc(0.5rem - var(--t-padding));
+        }
+
+        & > .t-content > *:last-child {
+            margin-inline-end: -0.125rem;
+        }
+    }
+
+    &:is(._disabled, [data-state='disabled']) {
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+
+        [tuiAppearance]:is(._disabled, :disabled, [data-state='disabled']) {
+            opacity: 1;
+        }
+
+        tui-icon {
+            display: none;
+        }
+    }
+
+    &._with-label {
+        --t-label: 1;
+
+        & > .t-template,
+        .t-filler,
+        [tuiInput] {
+            inset-block-end: 0;
+            padding-block-start: calc(var(--t-height) / 3);
+            padding-block-end: 0;
+        }
+
+        &:is(:not([data-focus='true']), [data-mode~='readonly']) {
+            & > .t-template,
+            [tuiInput] {
+                &::placeholder,
+                &._empty {
+                    color: transparent;
+                }
+            }
+        }
+    }
+
+    & > .t-template,
+    .t-filler,
+    [tuiInput] {
+        position: absolute;
+        inset-inline: 0;
+        inline-size: auto;
+        block-size: var(--t-height);
+        appearance: none;
+        background: none;
+        font: inherit;
+        resize: none;
+        outline: none;
+        color: var(--tui-text-primary);
+        box-sizing: border-box;
+        border-radius: inherit;
+        border-width: 0;
+        overscroll-behavior: none;
+        padding-inline-start: calc(var(--t-start) + var(--t-padding));
+        padding-inline-end: calc(var(--t-end) + var(--t-side) + var(--t-padding) + var(--t-space));
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:is(input, textarea):read-only ~ .t-filler {
+            display: none;
+        }
+
+        &:disabled {
+            animation: tuiPresent 1s infinite;
+            opacity: 1;
+        }
+
+        &[inputmode='none'] {
+            caret-color: transparent;
+        }
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
+    }
+
+    &._with-template [tuiInput]:first-of-type {
+        color: transparent !important;
+    }
+
+    [tuiInput]:-webkit-autofill,
+    [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    [tuiInput]:not(._empty, :placeholder-shown),
+    &[multi][multi]:not(._empty) {
+        [tuiLabel],
+        &:not(tui-textfield) ~ [tuiLabel] {
+            font: var(--t-label-font);
+            transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
+        }
+    }
+
+    // Increasing specificity to override all other styles
+    [tuiLabel][tuiLabel][tuiLabel] {
+        .transition(all);
+        .text-overflow();
+
+        position: relative;
+        display: block;
+        max-inline-size: calc(100% - var(--t-start));
+        flex: 1;
+        align-self: flex-start;
+        font: inherit;
+        user-select: none;
+        padding: calc(var(--t-height) / 2 - 0.625em) 0;
+        line-height: 1.25 !important;
+        transition-duration: inherit;
+
+        + .t-content {
+            margin-inline-start: 0;
+        }
+    }
+
+    [tuiLabel],
+    [tuiInput]::placeholder,
+    [tuiInput]._empty {
+        color: var(--tui-text-secondary);
+    }
+
+    select {
+        option[value='']:disabled {
+            // Hide placeholder from native datalist (Windows OS only)
+            color: transparent;
+        }
+
+        optgroup,
+        option {
+            // Windows OS only
+            background-color: var(--tui-background-elevation-3);
+        }
+
+        optgroup,
+        option:not(:disabled) {
+            // In Windows OS native options inherit color of host <select>
+            color: var(--tui-text-primary);
+        }
+    }
+
+    button,
+    a,
+    tui-icon {
+        pointer-events: auto;
+    }
+
+    & > .t-content {
+        z-index: 1;
+        display: flex;
+        block-size: var(--t-height);
+        align-items: center;
+        gap: 0.25rem;
+        margin-inline-start: auto;
+        isolation: isolate;
+        border-radius: inherit;
+    }
+
+    textarea ~ .t-content {
+        min-inline-size: 0.5rem;
+    }
+
+    &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) [tuiButtonX],
+    [tuiInput]._empty ~ .t-content [tuiButtonX],
+    [tuiInput]:disabled ~ .t-content [tuiButtonX] {
+        display: none;
+    }
+
+    .t-filler {
+        pointer-events: none !important;
+        color: var(--tui-text-tertiary);
+    }
+
+    [tuiFluidTypography] {
+        font-weight: bold;
+    }
+
+    [tuiSelectLike]:not(:read-only) {
+        cursor: pointer;
+    }
+
+    &:has(input[type='tel']) {
+        direction: ltr;
+    }
+
+    .appearance-invalid({
+        [tuiInput]:not(._empty) ~ [tuiLabel],
+        &[multi]:not(._empty) [tuiLabel] {
+            color: var(--tui-text-negative);
+        }
+    });
+
+    &:not([data-mode~='readonly']) {
+        .appearance-focus({
+            [tuiLabel] {
+                color: var(--tui-text-primary) !important;
+                font: var(--t-label-font);
+                transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
+            }
+        });
+    }
+}

package/components/title.less

@@ -0,0 +1,80 @@
+/**
+ * @name Title
+ * @selector [tuiTitle], [tuiSubtitle]
+ *
+ * @description
+ * Basic layout block for titles and subtitles
+ * Often used by other more complex elements
+ *
+ * @attributes
+ * data-size — optional size ('s' | 'm' | 'l')
+ *
+ * @example
+ * <h2 tuiTitle>
+ *   Title
+ *   <span tuiSubtitle>Subtitle</span>
+ * </h2>
+ *
+ * @see-also
+ * Label
+ */
+[tuiTitle]:where(*&) {
+    position: relative;
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    text-align: start;
+    gap: 0.25rem;
+    margin: 0;
+    font: var(--tui-typography-ui-m);
+
+    &[data-size='s'] {
+        gap: 0.125rem;
+        font: var(--tui-typography-body-s);
+
+        [tuiSubtitle] {
+            font: var(--tui-typography-body-xs);
+        }
+    }
+
+    &[data-size='m'] {
+        gap: 0.125rem;
+        font: var(--tui-typography-heading-h5);
+
+        [tuiSubtitle] {
+            font: var(--tui-typography-body-m);
+        }
+    }
+
+    &[data-size='l'] {
+        gap: 0.5rem;
+        font: var(--tui-typography-heading-h3);
+
+        [tuiSubtitle] {
+            font: var(--tui-typography-body-m);
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        font: inherit;
+    }
+
+    [tuiSubtitle] {
+        font: var(--tui-typography-ui-s);
+        margin: 0;
+    }
+}
+
+[tuiButton]:where(*&) [tuiTitle] {
+    margin-inline-end: auto;
+
+    [tuiSubtitle] {
+        color: var(--tui-text-secondary);
+    }
+}

package/components/toast.less

@@ -0,0 +1,46 @@
+@import '../utils.less';
+
+[tuiToast]:where(*&) {
+    .transition(transform);
+
+    display: flex;
+    grid-row: 1 / span 2;
+    box-sizing: border-box;
+    gap: 0.75rem;
+    color: var(--tui-text-primary);
+    background: var(--tui-background-elevation-3);
+    min-block-size: 3.5rem;
+    border-radius: 1rem;
+    padding: 0.75rem 1rem;
+    box-shadow: var(--tui-shadow-medium);
+    align-items: center;
+    justify-content: center;
+    inline-size: max-content;
+    font: var(--tui-typography-ui-s);
+    max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
+    border: inherit;
+    text-decoration: none;
+    white-space: pre-line;
+    text-align: start;
+    overflow: hidden;
+
+    .interactive({
+        cursor: pointer;
+    });
+
+    > *:not(tui-shrink-wrap),
+    &::after,
+    &::before {
+        max-inline-size: 50%;
+        margin: 0 -0.25rem;
+    }
+
+    &::after {
+        font-size: 1rem;
+        color: var(--tui-text-tertiary);
+    }
+
+    [tuiAvatar] {
+        margin-inline-end: 0;
+    }
+}

package/mixins/appearance.less

@@ -0,0 +1,56 @@
+@import 'miscellaneous.less';
+
+.appearance-hover(@content) {
+    .interactive({
+        @media @tui-mouse {
+            &:hover:not([data-state]) {
+                @content();
+            }
+        }
+    });
+
+    &[data-state='hover'] {
+        @content();
+    }
+}
+
+.appearance-active(@content) {
+    .interactive({
+        &:active:not([data-state]) {
+            @content();
+        }
+    });
+
+    &[data-state='active'] {
+        @content();
+    }
+}
+
+.appearance-disabled(@content) {
+    &:disabled:not([data-state]),
+    &[data-state='disabled'] {
+        @content();
+    }
+}
+
+.appearance-focus(@content) {
+    &:focus-visible:not([data-focus='false']) {
+        @content();
+    }
+
+    &[data-focus='true'] {
+        @content();
+    }
+}
+
+.appearance-invalid(@content) {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled,
+            ._disabled
+        ) {
+        @content();
+    }
+}

package/mixins/appearance.scss

@@ -0,0 +1,57 @@
+@import 'miscellaneous';
+@import '../variables/media';
+
+@mixin appearance-hover {
+    @include interactive {
+        @media ($tui-mouse) {
+            &:hover:not([data-state]) {
+                @content;
+            }
+        }
+    }
+
+    &[data-state='hover'] {
+        @content;
+    }
+}
+
+@mixin appearance-active {
+    @include interactive {
+        &:active:not([data-state]) {
+            @content;
+        }
+    }
+
+    &[data-state='active'] {
+        @content;
+    }
+}
+
+@mixin appearance-disabled {
+    &:disabled:not([data-state]),
+    &[data-state='disabled'] {
+        @content;
+    }
+}
+
+@mixin appearance-focus {
+    &:focus-visible:not([data-focus='false']) {
+        @content;
+    }
+
+    &[data-focus='true'] {
+        @content;
+    }
+}
+
+@mixin appearance-invalid {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled,
+            ._disabled
+        ) {
+        @content;
+    }
+}