@taiga-ui/core 5.0.0-rc.2 → 5.0.0-rc.4

package/styles/components/icons.less

@@ -1,79 +0,0 @@
-/**
- * @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% * (min(max(var(--tui-font-offset) - 10px, 0px), 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, 0.125rem))
-                ~'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, 0.125rem))
-            ~'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/styles/components/label.less

@@ -1,51 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.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-font-body-s);
-    color: var(--tui-text-primary);
-
-    &:not([data-orientation='vertical']) {
-        flex-direction: row;
-        inline-size: fit-content;
-        font: var(--tui-font-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-font-body-s);
-    }
-
-    [tuiTitle] {
-        margin-block-start: 0.125rem;
-    }
-
-    [tuiSubtitle] {
-        color: var(--tui-text-secondary);
-    }
-}

package/styles/components/link.less

@@ -1,69 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.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, 0.125rem)) 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/styles/components/notification.less

@@ -1,184 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.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;
-    }
-}