@taiga-ui/styles 4.70.0 → 5.0.0-rc.3

package/components/appearance.less

@@ -0,0 +1,51 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Appearance
+ * @selector [tuiAppearance]
+ *
+ * @description
+ * Base directive to apply different styles to interactive elements
+ *
+ * @attributes
+ * data-appearance — current appearance
+ * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
+ * data-focus — manual :focus-visible state override
+ * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
+ *
+ * @example
+ * <button tuiAppearance data-appearance='primary'></button>
+ *
+ * @see-also
+ * Button
+ */
+[tuiAppearance]:where(*&) {
+    .transition(all);
+
+    position: relative;
+    appearance: none;
+    outline: 0.125rem solid transparent;
+    outline-offset: -0.125rem;
+    transition-property: color, background-color, opacity, box-shadow, border-color, border-radius, filter;
+
+    &::before,
+    &::after {
+        transition-property: none;
+        transition-duration: inherit;
+        transition-timing-function: ease-in-out;
+    }
+
+    .appearance-focus({
+        outline-color: var(--tui-border-focus);
+    });
+
+    .appearance-disabled({
+        cursor: initial;
+        opacity: var(--tui-disabled-opacity);
+
+        &::before,
+        &::after {
+            cursor: initial;
+        }
+    });
+}

package/components/avatar.less

@@ -0,0 +1,188 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Avatar
+ * @selector [tuiAvatar]
+ *
+ * @description
+ * An avatar component which can be used with icons, text or images
+ * and is applicable to static elements as well as buttons and links
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l' | 'xl' | 'xxl')
+ * data-shape — shape (default: 'round') ('round' | 'square')
+ *
+ * @example
+ * <span tuiAvatar tuiIcons style="--t-icon-start: url('icon.svg')"></span>
+ * <button tuiAvatar>
+ *   <img src="path/to/image" alt="Avatar" />
+ * </button>
+ *
+ * @see-also
+ * Icons, Icon, Appearance
+ */
+[tuiAvatar]:where(*&) {
+    --t-size: var(--tui-height-l);
+    --t-radius: 0.75rem;
+    --t-corner-offset: calc((var(--t-radius) * 1.4142 - var(--t-radius)) * 1 / 1.4142);
+
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: var(--t-radius);
+    border: none;
+    background: var(--tui-background-neutral-1);
+    color: var(--tui-text-secondary);
+    vertical-align: middle;
+    box-sizing: border-box;
+    padding: 0.25rem;
+    font: var(--tui-font-body-l);
+    font-weight: bold;
+    opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
+
+    &::before {
+        inline-size: auto;
+        block-size: auto;
+    }
+
+    &:not(._initials)::before {
+        position: absolute;
+        inset: 0;
+        font-size: calc(var(--t-size) * 0.6);
+    }
+
+    &[data-size='xs'] {
+        --t-size: var(--tui-height-xs);
+        --t-radius: 0.5rem;
+
+        font: var(--tui-font-ui-2xs);
+        font-size: 0.5625rem;
+
+        &._initials::before {
+            font: var(--tui-font-ui-2xs);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='s'] {
+        --t-size: var(--tui-height-s);
+        --t-radius: 0.5rem;
+
+        font: var(--tui-font-ui-2xs);
+        font-weight: bold;
+
+        &._initials::before {
+            font: var(--tui-font-body-s);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-size: calc(var(--tui-height-m) - 0.25rem);
+        --t-radius: 0.75rem;
+
+        font: var(--tui-font-ui-m);
+        font-weight: bold;
+
+        &._initials::before {
+            font: var(--tui-font-body-m);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='xl'] {
+        --t-size: 5rem;
+        --t-radius: 0.75rem;
+
+        font: var(--tui-font-heading-h4);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h3);
+        }
+    }
+
+    &[data-size='xxl'] {
+        --t-size: 6rem;
+        --t-radius: 1rem;
+
+        font: var(--tui-font-heading-h3);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h3);
+        }
+    }
+
+    &[data-size='xxxl'] {
+        --t-size: 8rem;
+        --t-radius: 1.25rem;
+
+        font: var(--tui-font-heading-h3);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h2);
+        }
+    }
+
+    &:not([data-shape='square']) {
+        --t-radius: calc(var(--t-size) / 2);
+    }
+
+    &._initials {
+        &::before {
+            content: attr(data-icon-start);
+            mask: none;
+            background: none;
+            font: var(--tui-font-heading-h6);
+        }
+    }
+
+    &._badge {
+        mask: radial-gradient(
+            circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
+            black 0.23rem,
+            transparent 0.25rem,
+            transparent 0.375rem,
+            black 0.39rem
+        );
+        mask-clip: no-clip;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: calc(100% - var(--t-corner-offset));
+            left: calc(100% - var(--t-corner-offset));
+            display: block;
+            inline-size: 0.55rem;
+            block-size: 0.55rem;
+            border-radius: 100%;
+            background: var(--t-badge);
+            transform: translate3d(-50%, -50%, 0);
+        }
+    }
+
+    &._fallback {
+        img,
+        video {
+            display: none;
+        }
+    }
+
+    img,
+    video,
+    picture {
+        .fullsize();
+
+        object-fit: cover;
+        box-sizing: border-box;
+        border-radius: inherit;
+    }
+
+    &:has(img, video):not(._fallback) {
+        background: none;
+    }
+}

package/components/badge.less

@@ -0,0 +1,128 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Badge
+ * @selector [tuiBadge]
+ *
+ * @description
+ * A basic badge that can be used on it's own or on buttons/links
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l' | 'xl')
+ *
+ * @example
+ * <div[tuiBadge]>99+</div>
+ *
+ * @see-also
+ * Icons, Appearance, Chip, Block
+ */
+[tuiBadge]:where(*&) {
+    --t-icon-size: 1rem;
+    --t-padding: 0 0.5rem;
+    --t-size: var(--tui-height-xs);
+    --t-margin: -0.25rem;
+
+    .button-base();
+
+    border-radius: 6rem;
+    justify-content: center;
+    background: #959595;
+    color: var(--tui-background-base);
+    padding: var(--t-padding);
+    block-size: var(--t-size);
+    min-inline-size: var(--t-size);
+    inline-size: fit-content;
+    font: var(--tui-font-body-s);
+
+    &[tuiStatus]::before {
+        inline-size: 0.375rem;
+        block-size: 0.375rem;
+        margin: 0;
+    }
+
+    > tui-icon,
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        font-size: var(--t-icon-size) !important;
+    }
+
+    &[data-appearance='error'], /* TODO @deprecated remove in v5 */
+    &[data-appearance='negative'] {
+        --t-status: var(--tui-status-negative);
+    }
+
+    &[data-appearance='success'], /* TODO @deprecated remove in v5 */
+    &[data-appearance='positive'] {
+        --t-status: var(--tui-status-positive);
+    }
+
+    &[data-appearance='warning'] {
+        --t-status: var(--tui-status-warning);
+    }
+
+    &[data-appearance='info'] {
+        --t-status: var(--tui-status-info);
+    }
+
+    &[data-appearance='neutral'] {
+        --t-status: var(--tui-status-neutral);
+    }
+
+    &[data-size='s'] {
+        --t-padding: 0 0.3125rem;
+        --t-size: 1rem;
+        --t-icon-size: 0.625rem;
+        --t-margin: -0.125rem;
+
+        font: var(--tui-font-ui-2xs);
+        line-height: 0.875rem;
+
+        &[tuiStatus]::before {
+            inline-size: 0.25rem;
+            block-size: 0.25rem;
+            margin-inline-end: -0.125rem;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-padding: 0 0.375rem;
+        --t-size: 1.25rem;
+        --t-icon-size: 0.75rem;
+        --t-margin: -0.125rem;
+    }
+
+    &[data-size='xl'] {
+        --t-margin: -0.25rem;
+        --t-padding: 0 0.75rem;
+        --t-size: var(--tui-height-s);
+
+        font: var(--tui-font-body-m);
+
+        &[tuiStatus]::before {
+            inline-size: 0.5rem;
+            block-size: 0.5rem;
+            margin-inline-end: -0.125rem;
+        }
+    }
+
+    &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
+    &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
+    &[tuiAppearance][data-appearance='negative'],
+    &[tuiAppearance][data-appearance='positive'],
+    &[tuiAppearance][data-appearance='warning'],
+    &[tuiAppearance][data-appearance='info'],
+    &[tuiAppearance][data-appearance='neutral'] {
+        color: var(--tui-text-primary);
+    }
+}
+
+img[tuiBadge]:where(*&) {
+    padding: 0;
+    inline-size: var(--t-size);
+}
+
+tui-icon[tuiBadge]:where(*&)::before {
+    .fullsize();
+
+    --t-margin: 0;
+}

package/components/block.less

@@ -0,0 +1,118 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Block
+ * @selector [tuiBlock]
+ *
+ * @description
+ * A general purpose container, typically used for labels and inputs
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l')
+ *
+ * @example
+ * <label tuiBlock>
+ *   Click me
+ *   <input tuiBlock />
+ * </label>
+ *
+ * @see-also
+ * Icons, Appearance, Link, Button
+ */
+[tuiBlock]:where(*&) {
+    --t-height: var(--tui-height-l);
+    --t-radius: var(--tui-radius-l);
+
+    position: relative;
+    display: inline-flex;
+    gap: 0.75rem;
+    color: var(--tui-text-primary);
+    border-radius: var(--t-radius);
+    min-block-size: var(--t-height);
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    overflow: hidden;
+    font: var(--tui-font-body-m);
+    padding: var(--tui-padding-l);
+    isolation: isolate;
+
+    &[data-size='s'] {
+        gap: 0.5rem;
+        font: var(--tui-font-ui-s);
+        padding: 0.5rem;
+
+        --t-height: var(--tui-height-s);
+        --t-radius: var(--tui-radius-m);
+
+        [tuiSubtitle] {
+            font: var(--tui-font-ui-2xs);
+        }
+
+        [tuiTooltip] {
+            margin: 0 0.125rem;
+        }
+    }
+
+    &[data-size='m'] {
+        gap: 0.625rem;
+        font: var(--tui-font-ui-m);
+        padding: var(--tui-padding-m);
+
+        --t-height: var(--tui-height-m);
+        --t-radius: var(--tui-radius-m);
+
+        input:not([tuiBlock]) {
+            margin: 0.125rem;
+        }
+
+        [tuiTooltip] {
+            margin: 0.125rem;
+        }
+    }
+
+    &._disabled {
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+
+        :focus {
+            visibility: hidden;
+        }
+    }
+
+    &[data-appearance=''] {
+        justify-content: center;
+    }
+
+    input[tuiBlock] {
+        .fullsize();
+
+        z-index: -1;
+        min-block-size: 0;
+        pointer-events: none;
+        border-radius: inherit;
+        padding: 0;
+    }
+
+    [tuiAvatar] {
+        margin: -0.25rem;
+    }
+
+    [tuiTitle] {
+        flex: 1;
+        gap: 0;
+        font: inherit;
+        color: var(--tui-text-primary);
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-secondary);
+    }
+
+    [tuiTooltip] {
+        vertical-align: bottom;
+        margin: 0.25rem;
+        font-size: 1rem;
+        border: none;
+    }
+}

package/components/button.less

@@ -0,0 +1,135 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Button
+ * @selector [tuiButton], [tuiIconButton]
+ *
+ * @description
+ * Plain button design, applicable to both links and buttons
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l')
+ *
+ * @example
+ * <button tuiButton>Click me</button>
+ *
+ * @see-also
+ * Icons, Appearance, Link
+ */
+[tuiButton]:where(*&),
+[tuiIconButton]:where(*&) {
+    --t-size: var(--tui-height-l);
+    --t-radius: var(--tui-radius-l);
+    --t-gap: 0.25rem;
+    --t-padding: 0 1.25rem;
+    --t-margin: -0.25rem;
+
+    .button-base();
+
+    block-size: var(--t-size);
+    justify-content: center;
+    border-radius: var(--t-radius);
+    padding: var(--t-padding);
+    user-select: none;
+    cursor: pointer;
+    font: var(--tui-font-body-m);
+    font-weight: bold;
+
+    > .t-loader {
+        .center-all();
+
+        .t-text {
+            position: absolute;
+        }
+    }
+
+    &[data-size='xs'] {
+        --t-size: var(--tui-height-xs);
+        --t-radius: var(--tui-radius-xs);
+        --t-gap: 0.125rem;
+        --t-padding: 0 0.375rem;
+        --t-margin: -0.125rem;
+
+        font: var(--tui-font-body-s);
+
+        tui-icon,
+        &::before,
+        &::after {
+            font-size: 1rem;
+        }
+    }
+
+    &[data-size='s'] {
+        --t-size: var(--tui-height-s);
+        --t-radius: var(--tui-radius-s);
+        --t-gap: 0.125rem;
+        --t-padding: 0 0.625rem;
+        --t-margin: -0.125rem;
+
+        font: var(--tui-font-body-s);
+
+        tui-icon,
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::before,
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::after {
+            font-size: 1rem;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-size: var(--tui-height-m);
+        --t-radius: var(--tui-radius-m);
+        --t-gap: 0.125rem;
+        --t-padding: 0 1rem;
+        --t-margin: -0.375rem;
+
+        font: var(--tui-font-body-m);
+        font-weight: bold;
+    }
+
+    &._loading {
+        --tui-disabled-opacity: 1;
+
+        -webkit-text-fill-color: transparent;
+
+        > *,
+        &::before,
+        &::after {
+            opacity: 0;
+        }
+
+        > .t-loader {
+            opacity: 1;
+        }
+    }
+
+    &[tuiButtonVertical] {
+        // StackBlitz changes "0rem" to "0" breaking calc
+        --t-margin: ~'0rem' !important;
+        --t-line-height: 1rem;
+
+        flex-direction: column;
+        flex-shrink: 1;
+        block-size: auto;
+        padding: 0.75rem;
+        gap: 0.375rem;
+        min-inline-size: 5rem;
+        white-space: pre-line;
+        font: var(--tui-font-ui-s);
+
+        & > * {
+            max-block-size: calc(var(--t-line-height) * 2);
+        }
+    }
+}
+
+[tuiIconButton]:where(*&) {
+    gap: 0;
+    inline-size: var(--t-size);
+    min-inline-size: var(--t-size);
+    font-size: 0 !important;
+    padding: 0;
+
+    &&[data-icon-start]::after {
+        display: none;
+    }
+}

package/components/checkbox.less

@@ -0,0 +1,84 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Checkbox
+ * @selector [tuiCheckbox]
+ *
+ * @description
+ * A stylized input type="checkbox"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @vars
+ * --t-icon-start — checkmark icon
+ * --t-icon-end — indeterminate state icon
+ *
+ * @example
+ * <input type="checkbox" tuiCheckbox tuiIcons tuiAppearance data-appearance='secondary' />
+ *
+ * @see-also
+ * Switch, Radio, Appearance
+ */
+[tuiCheckbox]:where(*&) {
+    --t-size: 1.5rem;
+    --t-radius: var(--tui-radius-s);
+
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    border-radius: var(--t-radius);
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+
+    &::before {
+        position: absolute;
+        block-size: 100%;
+        inline-size: 100%;
+        font-size: 1rem;
+        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+        transform: scale(0);
+        transition:
+            transform var(--tui-duration) ease-in-out,
+            mask 0s var(--tui-duration) ease-in-out;
+    }
+
+    &::after {
+        display: none;
+    }
+
+    &:disabled._readonly._readonly {
+        opacity: 1;
+        pointer-events: none;
+    }
+
+    &:checked,
+    &:indeterminate {
+        &::before {
+            mask-image: var(--t-icon-start);
+            transform: scale(1);
+            transition:
+                transform var(--tui-duration) ease-in-out,
+                mask 0s ease-in-out;
+            transition-duration: inherit;
+        }
+    }
+
+    &:indeterminate::before {
+        mask-image: var(--t-icon-end);
+    }
+
+    &[data-size='s'] {
+        --t-size: 1rem;
+        --t-radius: var(--tui-radius-xs);
+
+        &::before {
+            font-size: 0.875rem;
+        }
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: #fff;
+    }
+}