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

package/components/link.less

@@ -0,0 +1,69 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Link
+ * @selector [tuiLink]
+ *
+ * @description
+ * Plain link design, applicable to both links and buttons
+ *
+ * @example
+ * <a tuiLink>Click me</a>
+ *
+ * @see-also
+ * Icons, Appearance, Button
+ */
+[tuiLink]:where(*&) {
+    .transition(~'color, text-decoration, opacity');
+
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    border-radius: 0.125rem;
+    outline-width: 1px;
+    outline-offset: -1px;
+    text-underline-offset: 0.2em;
+    text-decoration: none dashed currentColor 1px;
+    text-decoration-color: color-mix(in lch, currentColor, transparent);
+
+    &::before {
+        margin-inline-end: 0.25rem;
+    }
+
+    &::after {
+        margin-inline-start: 0.25rem;
+    }
+
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        content: '\2060';
+        padding: calc(var(--tui-icon-size, 1rem) / 2);
+        vertical-align: super;
+        font-size: 0;
+        line-height: 0;
+        box-sizing: border-box;
+        mask-size: calc(100% + 10 * var(--tui-stroke-width)) 100%;
+        transition: none;
+    }
+
+    &[tuiChevron]::after {
+        display: inline-block;
+        vertical-align: initial;
+    }
+
+    .appearance-hover({
+        text-decoration-color: currentColor;
+    });
+
+    .appearance-active({
+        text-decoration-color: currentColor;
+    });
+
+    &[data-appearance=''] {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+    }
+}

package/components/message.less

@@ -0,0 +1,33 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Message
+ * @selector [tuiMessage]
+ *
+ * @description
+ * A message component that can be used on buttons/links/inputs
+ *
+ * @example
+ * <span tuiMessage>Message text</span>
+ *
+ * @see-also
+ * Chip, Badge, Block
+ */
+[tuiMessage]:where(*&) {
+    display: inline-flex;
+    padding: 0.5rem 0.625rem;
+    min-block-size: 2.25rem;
+    block-size: auto;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    isolation: isolate;
+    white-space: nowrap;
+    text-align: start;
+    font: var(--tui-font-ui-m);
+    border-radius: var(--tui-radius-l);
+
+    > [tuiLink] {
+        color: inherit !important;
+        text-decoration: underline solid !important;
+    }
+}

package/components/notification.less

@@ -0,0 +1,184 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Notification
+ * @selector [tuiNotification]
+ *
+ * @description
+ * A colored rounded block of information with optional icon, title, subtitle and actions
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l')
+ *
+ * @example
+ * <div tuiNotification tuiAppearance data-appearance="negative">
+ *   <span tuiTitle>
+ *     Error
+ *     <span tuiSubtitle>Something went wrong</span>
+ *   </span>
+ * </div>
+ *
+ * @see-also
+ * Icons, Appearance
+ */
+[tuiNotification]:where(*&) {
+    .button-clear();
+
+    position: relative;
+    display: flow-root;
+    max-block-size: 100%;
+    color: var(--tui-text-primary);
+    padding: 1rem;
+    font: var(--tui-font-body-m);
+    line-height: 1.5rem;
+    border-radius: var(--tui-radius-l);
+    box-sizing: border-box;
+    text-align: start;
+    text-decoration: none;
+    border-inline-start: var(--t-start) solid transparent;
+    border-inline-end: var(--t-end) solid transparent;
+
+    .interactive({
+        cursor: pointer;
+    });
+
+    --t-start: 0;
+    --t-end: 0;
+
+    &[data-icon-start] {
+        --t-start: 2rem;
+    }
+
+    &[data-icon-end] {
+        --t-end: 1.5rem;
+    }
+
+    &::before {
+        position: absolute;
+        inset-inline-start: -1rem;
+    }
+
+    &::after {
+        .center-top();
+
+        inset-inline-end: -0.5rem;
+        font-size: 1rem;
+        margin: 0;
+        margin-inline-end: -0.25rem;
+        margin-inline-start: auto;
+        color: var(--tui-text-tertiary) !important;
+    }
+
+    &[data-size='s'] {
+        padding: 0.375rem 0.625rem;
+        font: var(--tui-font-body-s);
+        line-height: 1.25rem;
+        border-radius: var(--tui-radius-m);
+
+        &[data-icon-start] {
+            --t-start: 1.5rem;
+        }
+
+        &::before {
+            inset-block-start: 0.5rem;
+            inset-inline-start: -0.875rem;
+            font-size: 1rem;
+        }
+
+        &::after {
+            inset-inline-end: -0.875rem;
+        }
+
+        tui-icon {
+            font-size: 1rem;
+        }
+
+        [tuiTitle] {
+            font: var(--tui-font-body-s);
+            font-weight: bold;
+        }
+
+        [tuiSubtitle] {
+            font: var(--tui-font-body-s);
+        }
+
+        [tuiSubtitle] + * {
+            gap: 1rem;
+            margin: 0.375rem 0 0.25rem;
+        }
+
+        > [tuiIconButton] {
+            inset-block-start: 0;
+            inset-inline-end: 0;
+        }
+    }
+
+    &[data-size='m'] {
+        padding: 0.75rem;
+        font: var(--tui-font-body-s);
+        line-height: 1.25rem;
+        border-radius: var(--tui-radius-m);
+
+        &[data-icon-start] {
+            --t-start: 1.625rem;
+        }
+
+        &::before {
+            inset-inline-start: -0.875rem;
+            font-size: 1.25rem;
+        }
+
+        &::after {
+            inset-inline-end: -0.75rem;
+        }
+
+        tui-icon {
+            font-size: 1.25rem;
+        }
+
+        [tuiTitle] {
+            font: var(--tui-font-ui-m);
+            font-weight: bold;
+        }
+
+        [tuiSubtitle] {
+            font: var(--tui-font-body-s);
+        }
+
+        [tuiSubtitle] + * {
+            gap: 1rem;
+            margin: 0.625rem 0 0.25rem;
+        }
+
+        > [tuiIconButton] {
+            inset-block-start: 0.375rem;
+            inset-inline-end: 0.5rem;
+        }
+    }
+
+    [tuiTitle] {
+        gap: 0.125rem;
+        font: var(--tui-font-ui-l);
+        font-weight: bold;
+    }
+
+    [tuiSubtitle] {
+        font: var(--tui-font-body-m);
+
+        + * {
+            display: flex;
+            align-items: center;
+            gap: 1.25rem;
+            margin-block-start: 0.625rem;
+            font: var(--tui-font-body-s);
+        }
+    }
+
+    > [tuiIconButton] {
+        position: absolute;
+        inset-block-start: 0.75rem;
+        inset-inline-end: 0.75rem;
+        box-shadow: none !important;
+        background: transparent !important;
+    }
+}

package/components/pin.less

@@ -0,0 +1,164 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Pin
+ * @selector tui-pin,[tuiPin]
+ *
+ * @description
+ * A toggleable pin to be used on maps
+ *
+ * @example
+ * <button tuiPin><img src="avatar.jpg" /></button>
+ *
+ * @see-also
+ * Compass
+ */
+[tuiPin]:where(*&) {
+    --t-size: 2rem;
+
+    .transition(~'width, height, border, margin');
+    .button-clear();
+
+    position: relative;
+    display: flex;
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    border-radius: 100%;
+    font: var(--tui-font-body-s);
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--tui-text-primary-on-accent-2);
+    background: var(--tui-background-accent-2);
+    box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-2);
+    border: 0 solid var(--tui-background-accent-2);
+    transform: translate(-50%, -50%);
+
+    .interactive({
+        cursor: pointer;
+    });
+
+    &:empty {
+        --t-size: 0.75rem;
+
+        &::before {
+            display: none;
+        }
+    }
+
+    > input {
+        .fullsize();
+
+        appearance: none;
+        border-radius: 100%;
+    }
+
+    > img {
+        max-block-size: 100%;
+        box-sizing: border-box;
+        border-radius: 100%;
+        background: var(--tui-background-base);
+    }
+
+    > tui-icon {
+        .transition(~'width, height');
+
+        font-size: 1.25rem;
+        align-self: center;
+    }
+
+    &:has(:checked) {
+        --t-size: 3.5rem;
+
+        font: var(--tui-font-body-m);
+        font-weight: bold;
+        border-width: 0;
+        margin-block-start: -2.75rem;
+
+        > img {
+            padding: 0.125rem;
+        }
+
+        > tui-icon {
+            font-size: 2.125rem;
+        }
+
+        &::before {
+            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            opacity: 1;
+        }
+
+        &::after {
+            top: 4.5rem;
+            opacity: 1;
+        }
+    }
+
+    // TODO: Fallback until Safari 15.4
+    &._open {
+        --t-size: 3.5rem;
+
+        font: var(--tui-font-body-m);
+        font-weight: bold;
+        border-width: 0;
+        margin-block-start: -2.75rem;
+
+        > img {
+            padding: 0.125rem;
+        }
+
+        > tui-icon {
+            font-size: 2.125rem;
+        }
+
+        &::before {
+            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            opacity: 1;
+        }
+
+        &::after {
+            top: 4.5rem;
+            opacity: 1;
+        }
+    }
+
+    &::before {
+        .transition(~'transform, opacity');
+
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        right: -0.25rem;
+        bottom: -0.625rem;
+        box-sizing: border-box;
+        border-width: 2.2rem 2rem;
+        border-style: solid;
+        border-color: inherit;
+        opacity: 0;
+        transform: scale(0.57) translate(-1.875rem, -1.875rem);
+        transform-origin: top left;
+        pointer-events: none;
+        mask: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>')
+            no-repeat;
+    }
+
+    &::after {
+        .transition(~'top, opacity');
+
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        border: 0.1875rem solid currentColor;
+        border-color: inherit;
+        border-radius: 100%;
+        box-sizing: border-box;
+        box-shadow: inherit;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+    }
+}

package/components/progress-bar.less

@@ -0,0 +1,117 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name ProgressBar
+ * @selector [tuiProgressBar]
+ *
+ * @description
+ * A stylized native progress element
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' )
+ *
+ * @example
+ * <progress tuiProgressBar value="33"></progress>
+ */
+.clearProgress() {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+}
+
+/* used to style inner value bar */
+.progressValue(@ruleset) {
+    &::-webkit-progress-value {
+        @ruleset(); // Chromium Edge | Chrome | Opera | Safari
+    }
+
+    &::-moz-progress-bar {
+        @ruleset(); // Mozilla
+    }
+}
+
+/*
+* Edge and IE animate the progress bar right out of the box
+* Chrome | Opera | Safari animation is controlled by its mixins
+* No possibility for firefox animation (https://snook.ca/archives/html_and_css/animating-progress)
+*/
+.progressAnimation() {
+    &::-webkit-progress-value {
+        transition: inline-size var(--tui-duration) linear;
+    }
+}
+
+@keyframes tuiIndeterminateAnimation {
+    50% {
+        background-position: left;
+    }
+}
+
+[tuiProgressBar]:where(*&) {
+    @track-color: var(--tui-background-neutral-2);
+    @progress-color: var(--tui-progress-color, currentColor);
+
+    .clearProgress();
+    .progressAnimation();
+    .progressValue({ background: @progress-color; border-radius: inherit });
+
+    --t-height: 0.75rem;
+
+    display: block;
+    inline-size: 100%;
+    block-size: var(--t-height);
+    color: var(--tui-background-accent-1);
+    background: @track-color;
+    clip-path: inset(0 0.5px round var(--tui-radius-m)); // 0.5px is a hack to prevent jagged edges on low dpi screens
+    overflow: hidden;
+    border-radius: 1rem;
+    flex-shrink: 0;
+
+    &[data-size='xxs'] {
+        --t-height: 0.125rem;
+    }
+
+    &[data-size='xs'] {
+        --t-height: 0.25rem;
+    }
+
+    &[data-size='s'] {
+        --t-height: 0.5rem;
+    }
+
+    &[data-size='l'] {
+        --t-height: 1rem;
+    }
+
+    &[data-size='xl'] {
+        --t-height: 1.25rem;
+    }
+
+    &[data-size='xxl'] {
+        --t-height: 1.5rem;
+    }
+
+    &:indeterminate {
+        .progressValue({ background: transparent });
+
+        background: linear-gradient(to right, @track-color 0 45%, @progress-color 45% 55%, @track-color 55% 100%) right;
+        background-size: 225%;
+        animation: tuiIndeterminateAnimation 3s infinite ease-in-out;
+    }
+
+    &::-webkit-progress-inner-element {
+        border-radius: inherit;
+    }
+
+    &::-webkit-progress-bar {
+        background: transparent;
+        border-radius: inherit;
+    }
+
+    label[tuiProgressLabel] &:not(:first-child) {
+        .fullsize();
+
+        background: transparent;
+    }
+}

package/components/radio.less

@@ -0,0 +1,59 @@
+@import '@taiga-ui/styles/utils.less';
+
+/**
+ * @name Radio
+ * @selector [tuiRadio]
+ *
+ * @description
+ * A stylized input type="radio"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @example
+ * <input type="radio" tuiRadio />
+ *
+ * @see-also
+ * Checkbox, Switch, Appearance
+ */
+[tuiRadio]:where(*&) {
+    --t-size: 1.5rem;
+
+    .transition(~'background, box-shadow');
+
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+    border-radius: 100%;
+    color: var(--tui-text-primary-on-accent-1);
+
+    &:disabled._readonly._readonly {
+        opacity: 1;
+    }
+
+    &::before {
+        .fullsize(absolute, inset);
+
+        content: '';
+        margin: auto;
+        border-radius: 100%;
+        background: currentColor;
+        transform: scale(0);
+        transition-property: transform;
+    }
+
+    &:checked::before {
+        transform: scale(0.5);
+    }
+
+    &[data-size='s'] {
+        --t-size: 1rem;
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: #fff;
+    }
+}

package/components/status.less

@@ -0,0 +1,40 @@
+/**
+ * @name Status
+ * @selector [tuiStatus]
+ *
+ * @description
+ * An indicator of a status with a color dot
+ *
+ * @vars
+ * --t-status — color of the dot
+ *
+ * @example
+ * <span tuiStatus style="--t-status: green">Success</span>
+ *
+ * @see-also
+ * Badge, Chip
+ */
+[tuiStatus]:where(*&) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &::before {
+        content: '';
+        display: var(--t-status, none);
+        inline-size: 0.5rem;
+        block-size: 0.5rem;
+        border-radius: 100%;
+        background: var(--t-status);
+    }
+
+    &[data-size='s'],
+    &[data-size='m'],
+    &[data-size='l'] {
+        gap: 0.25rem;
+    }
+
+    &[data-size='xl'] {
+        gap: 0.375rem;
+    }
+}