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

package/components/chip.less

@@ -0,0 +1,131 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Chip
+ * @selector [tuiChip]
+ *
+ * @description
+ * A chip component that can be used on it's own or on buttons/links/inputs
+ *
+ * @attributes
+ * data-size — size (default: 's') ('xxs' | 'xs' | 's' | 'm')
+ *
+ * @example
+ * <span tuiChip>Sale</span>
+ *
+ * @see-also
+ * Icons, Appearance, Badge, Block
+ */
+[tuiChip]:where(*&) {
+    --t-gap: 0.125rem;
+    --t-margin: -0.125rem;
+    --t-icon-size: 1rem;
+    --t-padding: 0 0.625rem;
+    --t-size: var(--tui-height-s);
+
+    .button-base();
+
+    font: var(--tui-typography-body-s);
+    border-radius: var(--tui-radius-m);
+    padding: var(--t-padding);
+    block-size: var(--t-size);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    isolation: isolate;
+
+    .interactive({
+        cursor: pointer;
+    });
+
+    > tui-icon,
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        font-size: var(--t-icon-size) !important;
+    }
+
+    & > [tuiIconButton] {
+        margin: -0.375rem;
+    }
+
+    > [tuiBadge] {
+        margin-inline-end: 0;
+    }
+
+    &[data-size='xxs'] {
+        // StackBlitz changes "0rem" to "0" breaking calc
+        --t-gap: ~'0rem';
+        --t-padding: 0 0.25rem;
+        --t-size: 1rem;
+        --t-icon-size: 0.75rem;
+
+        font: var(--tui-typography-body-xs);
+        border-radius: var(--tui-radius-xs);
+
+        & > [tuiIconButton] {
+            margin: -0.5rem;
+            transform: scale(0.75);
+        }
+    }
+
+    &[data-size='xs'] {
+        --t-padding: 0 0.375rem;
+        --t-size: var(--tui-height-xs);
+
+        border-radius: var(--tui-radius-xs);
+
+        & > [tuiIconButton] {
+            margin: -0.375rem;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-margin: -0.375rem;
+        --t-icon-size: 1.5rem;
+        --t-padding: 0 1rem;
+        --t-size: var(--tui-height-m);
+
+        font: var(--tui-typography-body-m);
+
+        & > [tuiIconButton] {
+            margin: -0.75rem;
+        }
+
+        & > [tuiBadge] {
+            margin-inline-start: -0.375rem;
+        }
+    }
+
+    & > img,
+    [tuiAvatar] {
+        inline-size: 1.5rem;
+        margin-inline-start: -0.375rem;
+    }
+
+    & > [tuiFade] {
+        &:first-of-type {
+            flex: 1 0 30%;
+            max-inline-size: fit-content;
+        }
+
+        &:last-of-type {
+            flex: 0 1 auto;
+        }
+    }
+
+    & > input[tuiChip] {
+        .fullsize();
+
+        margin: 0;
+
+        &[type='checkbox'],
+        &[type='radio'] {
+            z-index: -1;
+        }
+    }
+}
+
+input[tuiChip]:where(*&) {
+    .interactive({
+        cursor: text;
+    });
+}

package/components/comment.less

@@ -0,0 +1,63 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Comment
+ * @selector [tuiComment]
+ *
+ * @description
+ * A comment bubble with an arrow
+ *
+ * @attributes
+ * data-direction — arrow direction (default: 'top') ('top' | 'bottom' | 'start' | 'end')
+ *
+ * @example
+ * <label data-direction="top" tuiComment>Amazing product!</label>
+ */
+[tuiComment]:where(*&) {
+    position: relative;
+    display: inline-flex;
+    font: var(--tui-typography-ui-m);
+    color: #fff;
+    padding: 0.5rem 0.75rem;
+    min-inline-size: 2.5rem;
+    border-radius: 1rem;
+    background: var(--tui-background-accent-2);
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset-block-end: 100%;
+        inset-inline-start: 50%;
+        inline-size: 1.5625rem;
+        block-size: 0.5625rem;
+        background: inherit;
+        transform: translate(calc(-50% * var(--tui-inline)));
+        mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A")
+            no-repeat;
+    }
+
+    &[data-direction='bottom'] {
+        &::before {
+            inset-block: 100% auto;
+            transform: translate(calc(-50% * var(--tui-inline))) rotate(180deg);
+        }
+    }
+
+    &[data-direction='start'] {
+        &::before {
+            inset-block: 50% 100%;
+            inset-inline: auto 100%;
+            transform: translate(calc(0.785rem * var(--tui-inline)), -50%) rotate(calc(-90deg * var(--tui-inline)));
+        }
+    }
+
+    &[data-direction='end'] {
+        &::before {
+            inset-block: 50% 100%;
+            inset-inline: 100% auto;
+            transform: translate(calc(-0.785rem * var(--tui-inline)), -50%) rotate(calc(90deg * var(--tui-inline)));
+        }
+    }
+}

package/components/compass.less

@@ -0,0 +1,49 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Compass
+ * @selector tui-compass
+ *
+ * @description
+ * A compass arrow for the map
+ *
+ * @vars
+ * --t-degrees — rotation
+ *
+ * @example
+ * <tui-compass style="--t-degrees: 45deg"></tui-compass>
+ *
+ * @see-also
+ * Pin
+ */
+tui-compass:where(*&) {
+    position: relative;
+    display: inline-block;
+    color: var(--tui-background-accent-1);
+    border-radius: 50%;
+    inline-size: 1rem;
+    block-size: 1rem;
+    border: 0.1875rem solid var(--tui-background-base);
+    box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
+    transform-style: preserve-3d; // z-index doesn't work on pseudo-element
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0.125rem;
+        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>');
+        transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem);
+        inline-size: 0.75rem;
+        block-size: 1rem;
+        background: currentColor;
+    }
+
+    &::after {
+        .fullsize(absolute, inset);
+
+        content: '';
+        border-radius: inherit;
+        background: currentColor linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent);
+    }
+}

package/components/group.less

@@ -0,0 +1,172 @@
+/**
+ * @name Group
+ * @selector [tuiGroup]
+ *
+ * @description
+ * A directive to combine children into rounded flex group
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l')
+ * data-orientation — orientation (default: 'horizontal') ('horizontal' | 'vertical')
+ *
+ * @example
+ * <div tuiGroup>
+ *   <button tuiButton>Click me</button>
+ *   <button tuiButton>Click me</button>
+ *   <button tuiButton>Click me</button>
+ * </div>
+ *
+ * @see-also
+ * Button, Block, Textfield
+ */
+[tuiGroup]:where(*&) {
+    position: relative;
+    display: flex;
+    transform: translate3d(0, 0, 0);
+
+    --t-group-radius: var(--tui-radius-l);
+    --t-group-margin: -1px;
+    --t-group-mask: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.5) 1px,
+        #000 2px,
+        #000 calc(100% - 2px),
+        rgba(0, 0, 0, 0.5)
+    );
+    --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
+    --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
+
+    & > * {
+        z-index: 1;
+        flex: 1 1 0;
+        min-inline-size: 0;
+        mask: var(--t-group-mask);
+        mask-clip: no-clip;
+
+        &:disabled,
+        &._disabled {
+            z-index: 0;
+        }
+
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
+            z-index: 2;
+
+            --t-group-mask: none;
+        }
+
+        &:has(:invalid:not([data-mode])),
+        &:has([data-mode~='invalid']) {
+            z-index: 2;
+
+            --t-group-mask: none;
+        }
+
+        &:has(:focus-visible) {
+            z-index: 3;
+
+            --t-group-mask: none;
+        }
+
+        &:has([data-focus='true']) {
+            z-index: 3;
+
+            --t-group-mask: none;
+        }
+
+        &:checked:not([data-mode]),
+        &[data-mode~='checked'] {
+            z-index: 4;
+
+            --t-group-mask: none;
+        }
+
+        &:has([tuiBlock]:checked) {
+            z-index: 4;
+
+            --t-group-mask: none;
+        }
+
+        &:not(:last-child) {
+            margin-inline-end: var(--t-group-margin);
+        }
+
+        &:nth-child(n) {
+            border-radius: 0;
+        }
+
+        &:first-child {
+            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
+            mask-image: var(--t-group-mask-start);
+        }
+
+        &:last-child {
+            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
+            mask-image: var(--t-group-mask-end);
+        }
+
+        &:only-child {
+            border-radius: var(--t-group-radius);
+            mask: none;
+        }
+    }
+
+    [dir='rtl'] &:not([data-orientation='vertical']) > * {
+        &:first-child {
+            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
+            mask-image: var(--t-group-mask-end);
+        }
+
+        &:last-child {
+            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
+            mask-image: var(--t-group-mask-start);
+        }
+
+        &:only-child {
+            border-radius: var(--t-group-radius);
+            mask: none;
+        }
+    }
+
+    &[data-size='s'],
+    &[data-size='m'] {
+        --t-group-radius: var(--tui-radius-m);
+    }
+
+    &[data-orientation='vertical'] {
+        display: inline-flex;
+        flex-direction: column;
+
+        --t-group-mask: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.5) 1px,
+            #000 2px,
+            #000 calc(100% - 2px),
+            rgba(0, 0, 0, 0.5)
+        );
+        --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
+        --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);
+
+        & > * {
+            min-block-size: auto;
+            flex: 0 0 auto;
+
+            &:not(:last-child) {
+                margin-inline-end: 0;
+                margin-block-end: var(--t-group-margin);
+            }
+
+            &:first-child {
+                border-radius: var(--t-group-radius) var(--t-group-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--t-group-radius) var(--t-group-radius);
+            }
+
+            &:only-child {
+                border-radius: var(--t-group-radius);
+            }
+        }
+    }
+}

package/components/icon.less

@@ -0,0 +1,83 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Icon
+ * @selector tui-icon
+ *
+ * @description
+ * Container for displaying icons colored with CSS (color/background)
+ *
+ * @vars
+ * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the icon.
+ * --t-icon-bg — mask for the background
+ *
+ * @example
+ * <tui-icon tuiIcons style="--t-icon: url('icon.svg')"></tui-icon>
+ *
+ * @see-also
+ * Icons
+ */
+tui-icon:where(*&) {
+    --tui-icon-size: 1em;
+
+    position: relative;
+    display: inline-flex;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    border: 0 solid transparent;
+    vertical-align: middle;
+    box-sizing: border-box;
+    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width)) 100%;
+    zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
+
+    @media @tui-mouse {
+        &[data-appearance='icon']:hover {
+            color: var(--tui-text-secondary);
+        }
+    }
+
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        zoom: 1;
+    }
+
+    &[data-icon-end] {
+        &::before {
+            mask-image:
+                var(--t-icon-start),
+                radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            mask-composite: intersect;
+        }
+
+        &[data-icon-start='img'],
+        &[data-icon-start='font'] {
+            &::before {
+                mask: radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            }
+        }
+
+        &::after {
+            .fullsize();
+        }
+    }
+
+    &[data-icon-start] {
+        &::before {
+            .fullsize();
+        }
+
+        &::after {
+            transform: translate(36%, 36%);
+
+            --tui-icon-size: 0.5715em;
+        }
+    }
+
+    &[data-icon-start='font']::before,
+    &[data-icon-end='font']::after {
+        zoom: 0.667;
+    }
+}

package/components/icons.less

@@ -0,0 +1,79 @@
+/**
+ * @name Icons
+ * @selector [tuiIcons]
+ *
+ * @description
+ * Icons directive applies styles to ::before and ::after pseudo elements
+ *
+ * @vars
+ * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the ::before element
+ * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the ::after element
+ *
+ * @example
+ * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
+ *
+ * @see-also
+ * Button, Icon, Link
+ */
+[tuiIcons]:where(*&) {
+    --t-icon-start: none;
+    --t-icon-end: none;
+
+    &::before,
+    &::after {
+        content: '';
+        inline-size: 1em;
+        block-size: 1em;
+        line-height: 1em;
+        font-size: var(--tui-icon-size, 1.5rem);
+        flex-shrink: 0;
+        box-sizing: content-box;
+        background: currentColor;
+        zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
+    }
+
+    &::before {
+        display: var(--t-icon-start);
+        mask:
+            var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
+                ~'min(1em, 100%)',
+            100% padding-box;
+    }
+
+    &::after {
+        display: var(--t-icon-end);
+        mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
+            ~'min(1em, 100%)' padding-box;
+    }
+
+    &[data-icon-start='img']::before {
+        mask: none;
+        background: var(--t-icon-start) no-repeat center / 1em padding-box;
+    }
+
+    &[data-icon-end='img']::after {
+        mask: none;
+        background: var(--t-icon-end) no-repeat center / 1em padding-box;
+    }
+
+    &[data-icon-start='font']::before,
+    &[data-icon-end='font']::after {
+        display: grid;
+        mask: none;
+        background: none;
+        font: 1.5em / 1 var(--tui-font-icon, inherit);
+        text-align: center;
+        place-content: center;
+        text-transform: none;
+    }
+
+    &[data-icon-start='font']::before {
+        content: var(--t-icon-start);
+    }
+
+    &[data-icon-end='font']::after {
+        content: var(--t-icon-end);
+    }
+}

package/components/label.less

@@ -0,0 +1,51 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Label
+ * @selector [tuiLabel]
+ *
+ * @description
+ * Easy to use label ready for horizontal orientation for checkbox/radio/switch
+ * and vertical for input, select and textarea
+ *
+ * @example
+ * <label tuiLabel><input type="checkbox" /> Click me</tui-icon>
+ *
+ * @see-also
+ * Checkbox, Radio, Title
+ */
+[tuiLabel]:where(*&) {
+    display: flex;
+    gap: 0.25rem;
+    flex-direction: column;
+    font: var(--tui-typography-body-s);
+    color: var(--tui-text-primary);
+
+    &:not([data-orientation='vertical']) {
+        flex-direction: row;
+        inline-size: fit-content;
+        font: var(--tui-typography-body-m);
+    }
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        margin-inline-end: 0.5rem;
+
+        &[data-size='s'] {
+            margin-inline-end: 0.25rem;
+            margin-block-start: 0.125rem;
+        }
+    }
+
+    small {
+        font: var(--tui-typography-body-s);
+    }
+
+    [tuiTitle] {
+        margin-block-start: 0.125rem;
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-secondary);
+    }
+}

package/components/like.less

@@ -0,0 +1,67 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Like
+ * @selector [tuiLike]
+ *
+ * @description
+ * A stylized input type="checkbox"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @vars
+ * --t-icon-color — custom color for `:checked` state
+ * --t-icon-start — default state icon
+ * --t-icon-end — checkmark icon
+ *
+ * @example
+ * <input tuiLike tuiIcons tuiAppearance data-appearance="secondary" />
+ *
+ * @see-also
+ * Checkbox, Switch, Radio, Appearance
+ */
+[tuiLike]:where(*&) {
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--tui-height-m);
+    border-radius: 100%;
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+
+    &::before,
+    &::after {
+        .fullsize();
+
+        font-size: 1.25rem;
+        transition-property: transform, opacity;
+    }
+
+    &::after {
+        opacity: 0;
+        color: var(--t-icon-color, inherit);
+        transform: scale(0);
+    }
+
+    &:checked {
+        &::before {
+            opacity: 0;
+        }
+
+        &::after {
+            opacity: 1;
+            transform: scale(1);
+            transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1.8), ease-in-out;
+        }
+    }
+
+    &[data-size='s'] {
+        font-size: var(--tui-height-s);
+
+        &::before,
+        &::after {
+            font-size: 1rem;
+        }
+    }
+}