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

package/styles/theme/appearance/status.less

@@ -1,125 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='negative'],
-[tuiAppearance][data-appearance='positive'],
-[tuiAppearance][data-appearance='warning'],
-[tuiAppearance][data-appearance='info'],
-[tuiAppearance][data-appearance='neutral'] {
-    background: var(--t-bg);
-    color: var(--tui-text-primary);
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        color: #fff;
-    }
-}
-
-[tuiAppearance][data-appearance='negative'] {
-    --t-bg: var(--tui-status-negative-pale);
-
-    &::before,
-    &::after {
-        color: var(--tui-status-negative);
-    }
-
-    .appearance-hover({
-        --t-bg: var(--tui-status-negative-pale-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-status-negative-pale-hover);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        background: var(--tui-status-negative);
-    }
-}
-
-[tuiAppearance][data-appearance='positive'] {
-    --t-bg: var(--tui-status-positive-pale);
-
-    &::before,
-    &::after {
-        color: var(--tui-status-positive);
-    }
-
-    .appearance-hover({
-        --t-bg: var(--tui-status-positive-pale-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-status-positive-pale-hover);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        background: var(--tui-status-positive);
-    }
-}
-
-[tuiAppearance][data-appearance='warning'] {
-    --t-bg: var(--tui-status-warning-pale);
-
-    &::before,
-    &::after {
-        color: var(--tui-status-warning);
-    }
-
-    .appearance-hover({
-        --t-bg: var(--tui-status-warning-pale-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-status-warning-pale-hover);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        background: var(--tui-status-warning);
-    }
-}
-
-[tuiAppearance][data-appearance='info'] {
-    --t-bg: var(--tui-status-info-pale);
-
-    &::before,
-    &::after {
-        color: var(--tui-status-info);
-    }
-
-    .appearance-hover({
-        --t-bg: var(--tui-status-info-pale-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-status-info-pale-hover);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        background: var(--tui-status-info);
-    }
-}
-
-[tuiAppearance][data-appearance='neutral'] {
-    --t-bg: var(--tui-background-neutral-1);
-
-    &::before,
-    &::after {
-        color: var(--tui-status-neutral);
-    }
-
-    .appearance-hover({
-        --t-bg: var(--tui-background-neutral-1-hover);
-    });
-
-    .appearance-active({
-        --t-bg: var(--tui-background-neutral-1-pressed);
-    });
-
-    &:checked:not([data-mode]),
-    &[data-mode~='checked'] {
-        background: var(--tui-status-neutral);
-    }
-}

package/styles/theme/appearance/table.less

@@ -1,68 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='table'] {
-    min-block-size: calc(100% + 1px);
-    border-radius: 0 !important;
-    background: transparent;
-    color: var(--tui-text-primary);
-    border: none;
-    outline: none;
-    margin: -1px -1px 0;
-    overflow: hidden;
-
-    &:not(tui-textfield[multi], tui-input-card-group) [tuiInput]:not(textarea) {
-        block-size: var(--t-height);
-        border-block-end: 100rem solid transparent;
-        box-sizing: content-box;
-    }
-
-    &::before,
-    &::after {
-        color: var(--tui-text-tertiary);
-    }
-
-    &:not([data-mode~='readonly']) {
-        .appearance-hover({
-            &[data-focus='false'] {
-                background-color: var(--tui-background-neutral-1);
-            }
-
-            &::before,
-            &::after {
-                color: var(--tui-text-secondary);
-            }
-        });
-    }
-
-    .appearance-focus({
-        border-image: conic-gradient(var(--tui-border-focus) 0 0) 1 / 0.125rem / 0 0 1px;
-    });
-
-    .appearance-invalid({
-        background:
-            linear-gradient(to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%)
-            top right / 0.5rem 0.5rem
-            no-repeat
-            border-box;
-
-        &[data-focus='false'] {
-            background-color: var(--tui-status-negative-pale);
-        }
-
-        .appearance-hover({
-            &[data-focus='false'] {
-                background-color: var(--tui-status-negative-pale-hover);
-            }
-        });
-
-        .appearance-disabled({
-            background: transparent;
-            outline: none;
-        });
-
-        .appearance-focus({
-            background-color: transparent;
-            border-image: conic-gradient(var(--tui-status-negative) 0 0) 1 / 1px / 0 0 1px;
-        });
-    });
-}

package/styles/theme/appearance/textfield.less

@@ -1,80 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='textfield'] {
-    .transition(~'box-shadow, background-color, outline-color, border-color, color');
-
-    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
-
-    background-color: var(--tui-background-base);
-    color: var(--tui-text-tertiary);
-    box-shadow: var(--t-shadow);
-    outline: 1px solid var(--tui-border-normal);
-    outline-offset: -1px;
-    border-width: 0;
-
-    &:is(input, textarea, select) {
-        color: var(--tui-text-primary) !important;
-    }
-
-    &::before,
-    &::after {
-        transition-property: transform;
-    }
-
-    &:not([data-mode~='readonly']) {
-        .appearance-hover({
-            --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
-            color: var(--tui-text-secondary);
-        });
-    }
-
-    .appearance-focus({
-        box-shadow: none;
-        outline: 0.125rem solid var(--tui-background-accent-1);
-        outline-offset: -0.125rem;
-    });
-
-    .appearance-disabled({
-        box-shadow: none;
-    });
-
-    .appearance-invalid({
-        outline-color: var(--tui-status-negative);
-    });
-
-    &[data-mode~='readonly'],
-    &[data-state='disabled'],
-    &:disabled,
-    &._disabled {
-        background: transparent !important;
-        box-shadow: none !important;
-        outline-color: var(--tui-border-normal) !important;
-    }
-
-    [tuiInput][chrome-autofilled], /* Chrome on IOS */
-    [tuiInput]:-webkit-autofill {
-        -webkit-text-fill-color: var(--tui-text-primary) !important;
-        caret-color: var(--tui-text-primary) !important;
-        box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
-        transition: background-color 600000s 0s;
-        clip-path: inset(0.125rem round calc(var(--tui-radius-m) - 0.125rem));
-    }
-
-    &[data-size='l'] [tuiInput][chrome-autofilled], /* Chrome on IOS */
-    &[data-size='l'] [tuiInput]:-webkit-autofill {
-        clip-path: inset(0.125rem round calc(var(--tui-radius-l) - 0.125rem));
-    }
-}
-
-[tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'],
-[tuiTheme='dark'][tuiAppearance][data-appearance='textfield'] {
-    background-color: var(--tui-background-neutral-1);
-
-    .appearance-hover({
-        background-color: var(--tui-background-neutral-1-hover);
-    });
-
-    .appearance-focus({
-        background-color: transparent !important;
-    });
-}

package/styles/theme/appearance.less

@@ -1,12 +0,0 @@
-@import 'appearance/accent.less';
-@import 'appearance/action.less';
-@import 'appearance/flat.less';
-@import 'appearance/floating.less';
-@import 'appearance/glass.less';
-@import 'appearance/outline.less';
-@import 'appearance/primary.less';
-@import 'appearance/secondary.less';
-@import 'appearance/status.less';
-@import 'appearance/table.less';
-// Do not add it, we need it separately in proprietary theme
-// @import 'appearance/textfield.less';

package/styles/theme/palette.less

@@ -1,161 +0,0 @@
-.dark() {
-    // Backgrounds
-    --tui-background-base: #222;
-    --tui-background-base-alt: #333;
-    --tui-background-neutral-1: rgba(255, 255, 255, 0.08);
-    --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
-    --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
-    --tui-background-neutral-2: rgba(255, 255, 255, 0.24);
-    --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
-    --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
-    --tui-background-accent-opposite: #fff;
-    --tui-background-accent-opposite-hover: #f6f6f6;
-    --tui-background-accent-opposite-pressed: #ededed;
-    --tui-background-elevation-1: #292929;
-    --tui-background-elevation-2: #2f2f2f;
-    --tui-background-elevation-3: #373737;
-    // Other
-    --tui-service-autofill-background: rgb(85, 74, 42);
-    --tui-border-normal: rgba(255, 255, 255, 0.14);
-    --tui-border-hover: rgba(255, 255, 255, 0.6);
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
-    // Statuses
-    --tui-status-negative: rgba(255, 140, 103, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.32);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
-    --tui-status-positive: rgb(74, 201, 155);
-    --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
-    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
-    --tui-status-warning: rgb(255, 199, 0);
-    --tui-status-warning-pale: rgba(255, 199, 0, 0.32);
-    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
-    --tui-status-info: rgb(112, 182, 246);
-    --tui-status-info-pale: rgba(112, 182, 246, 0.32);
-    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
-    --tui-status-neutral: rgb(149, 155, 164);
-    // Text
-    --tui-text-primary: rgba(255, 255, 255, 1);
-    --tui-text-secondary: rgba(255, 255, 255, 0.72);
-    --tui-text-tertiary: rgba(255, 255, 255, 0.6);
-    --tui-text-action: #6788ff;
-    --tui-text-action-hover: #526ed3;
-    --tui-text-positive: #44c596;
-    --tui-text-positive-hover: #3aa981;
-    --tui-text-negative: #ff8c67;
-    --tui-text-negative-hover: #bb593a;
-}
-
-.light() {
-    // Backgrounds
-    --tui-background-base: #fff;
-    --tui-background-base-alt: #f6f6f6;
-    --tui-background-neutral-1: rgba(0, 0, 0, 0.04);
-    --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
-    --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
-    --tui-background-neutral-2: rgba(0, 0, 0, 0.08);
-    --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
-    --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
-    --tui-background-accent-1: #526ed3;
-    --tui-background-accent-1-hover: #6c86e2;
-    --tui-background-accent-1-pressed: #314692;
-    --tui-background-accent-2: #ff7043;
-    --tui-background-accent-2-hover: #ff9a94;
-    --tui-background-accent-2-pressed: #e7716a;
-    --tui-background-accent-opposite: #000;
-    --tui-background-accent-opposite-hover: #333;
-    --tui-background-accent-opposite-pressed: #808080;
-    --tui-background-elevation-1: #fff;
-    --tui-background-elevation-2: #fff;
-    --tui-background-elevation-3: #fff;
-    // Other
-    --tui-service-autofill-background: #fff5c0;
-    --tui-service-selection-background: rgba(112, 182, 246, 0.12);
-    --tui-service-backdrop: rgba(0, 0, 0, 0.75);
-    --tui-border-normal: rgba(0, 0, 0, 0.1);
-    --tui-border-hover: rgba(0, 0, 0, 0.16);
-    --tui-border-focus: rgba(51, 51, 51, 0.64);
-    // Statuses
-    --tui-status-negative: rgba(244, 87, 37, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.12);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
-    --tui-status-positive: rgba(74, 201, 155, 1);
-    --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
-    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
-    --tui-status-warning: rgba(255, 199, 0, 1);
-    --tui-status-warning-pale: rgba(255, 199, 0, 0.12);
-    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
-    --tui-status-info: rgba(112, 182, 246, 1);
-    --tui-status-info-pale: rgba(112, 182, 246, 0.12);
-    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
-    --tui-status-neutral: rgb(121, 129, 140);
-    // Text
-    --tui-text-primary: rgba(27, 31, 59, 1);
-    --tui-text-secondary: rgba(27, 31, 59, 0.65);
-    --tui-text-tertiary: rgba(27, 31, 59, 0.4);
-    --tui-text-primary-on-accent-1: #fff;
-    --tui-text-primary-on-accent-2: #fff;
-    --tui-text-action: #4c66c3;
-    --tui-text-action-hover: #6c86e2;
-    --tui-text-positive: #3aa981;
-    --tui-text-positive-hover: #7ac5aa;
-    --tui-text-negative: #dd4c1e;
-    --tui-text-negative-hover: #e38163;
-    // Charts
-    --tui-chart-categorical-00: var(--tui-background-accent-1);
-    --tui-chart-categorical-01: #ea97c4;
-    --tui-chart-categorical-02: #a0c5df;
-    --tui-chart-categorical-03: #fee797;
-    --tui-chart-categorical-04: #b0b0b0;
-    --tui-chart-categorical-05: #e29398;
-    --tui-chart-categorical-06: #b8474e;
-    --tui-chart-categorical-07: #fcc068;
-    --tui-chart-categorical-08: #ff8a00;
-    --tui-chart-categorical-09: #dab3f9;
-    --tui-chart-categorical-10: #7b439e;
-    --tui-chart-categorical-11: #8dda71;
-    --tui-chart-categorical-12: #fcbb14;
-    --tui-chart-categorical-13: #a8cef1;
-    --tui-chart-categorical-14: #bd65a4;
-    --tui-chart-categorical-15: #7fd7cc;
-    --tui-chart-categorical-16: #2fad96;
-    --tui-chart-categorical-17: #d4aca2;
-    --tui-chart-categorical-18: #9d6f64;
-    --tui-chart-categorical-19: #d2e9a2;
-    --tui-chart-categorical-20: #aadc42;
-    --tui-chart-categorical-21: #3682db;
-    --tui-chart-categorical-22: #34b41f;
-    // Shadows
-    --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
-    --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
-    --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
-    --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
-    --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
-}
-
-@media screen {
-    [tuiTheme='dark'] {
-        color-scheme: dark;
-
-        .dark();
-    }
-
-    [tuiTheme='light'] {
-        color-scheme: light;
-    }
-
-    &:root,
-    :host,
-    [tuiTheme='light'] {
-        .light();
-    }
-}
-
-@media print {
-    &:root,
-    :host,
-    [tuiTheme] {
-        color-scheme: light;
-
-        .light();
-    }
-}

package/styles/theme/variables.less

@@ -1,42 +0,0 @@
-&:root,
-&:host {
-    // Fonts
-    --tui-font-family-text: 'Manrope', system-ui, sans-serif;
-    --tui-font-family-display: 'Manrope', system-ui, sans-serif;
-    --tui-font-offset: ~'0rem';
-    // Heading
-    --tui-font-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-family-display);
-    --tui-font-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-family-display);
-    --tui-font-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-family-display);
-    --tui-font-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-family-display);
-    --tui-font-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-family-display);
-    --tui-font-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-family-display);
-    // Body
-    --tui-font-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-family-text);
-    --tui-font-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-family-text);
-    --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-family-text);
-    --tui-font-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
-    // Reduced
-    --tui-font-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-family-text);
-    --tui-font-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-family-text);
-    --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-family-text);
-    --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
-    // Radii
-    --tui-radius-xs: 0.25rem;
-    --tui-radius-s: 0.5rem;
-    --tui-radius-m: 0.625rem;
-    --tui-radius-l: 0.75rem;
-    --tui-radius-xl: 1.5rem;
-    // Sizes
-    --tui-height-xs: 1.5rem;
-    --tui-height-s: 2rem;
-    --tui-height-m: 2.75rem;
-    --tui-height-l: 3.5rem;
-    // Input padding
-    --tui-padding-s: 0.625rem;
-    --tui-padding-m: 0.75rem;
-    --tui-padding-l: 1rem;
-    // Misc
-    --tui-duration: 0.3s;
-    --tui-disabled-opacity: 0.56;
-}

package/styles/variables/media.less

@@ -1,23 +0,0 @@
-@tui-media-retina: ~'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-@tui-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
-@tui-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
-@tui-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
-
-@tui-mobile: ~'screen and (max-width: 767.4px)';
-@tui-mobile-min: ~'screen and (min-width: 360px)';
-@tui-mobile-interval: ~'(min-width: 360px) and (max-width: 767.4px)';
-
-@tui-tablet: ~'screen and (max-width: 1023.4px)';
-@tui-tablet-min: ~'screen and (min-width: 768px)';
-@tui-tablet-interval: ~'(min-width: 768px) and (max-width: 1023.4px)';
-
-@tui-desktop: ~'screen and (max-width: 1279.4px)';
-@tui-desktop-min: ~'screen and (min-width: 1024px)';
-@tui-desktop-interval: ~'(min-width: 1024px) and (max-width: 1279.4px)';
-
-@tui-desktop-lg-min: ~'screen and (min-width: 1280px)';
-
-@tui-touch: ~'(hover: none) and (pointer: coarse)';
-@tui-stylus: ~'(hover: none) and (pointer: fine)';
-@tui-pointer: ~'(hover: hover) and (pointer: coarse)';
-@tui-mouse: ~'(hover: hover) and (pointer: fine)';

package/styles/variables/media.scss

@@ -1,23 +0,0 @@
-$tui-media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
-$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
-$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
-
-$tui-mobile: 'screen and (max-width: 767.4px)';
-$tui-mobile-min: 'screen and (min-width: 360px)';
-$tui-mobile-interval: '(min-width: 360px) and (max-width: 767.4px)';
-
-$tui-tablet: 'screen and (max-width: 1023.4px)';
-$tui-tablet-min: 'screen and (min-width: 768px)';
-$tui-tablet-interval: '(min-width: 768px) and (max-width: 1023.4px)';
-
-$tui-desktop: 'screen and (max-width: 1279.4px)';
-$tui-desktop-min: 'screen and (min-width: 1024px)';
-$tui-desktop-interval: '(min-width: 1024px) and (max-width: 1279.4px)';
-
-$tui-desktop-lg-min: 'screen and (min-width: 1280px)';
-
-$tui-touch: '(hover: none) and (pointer: coarse)';
-$tui-stylus: '(hover: none) and (pointer: fine)';
-$tui-pointer: '(hover: hover) and (pointer: coarse)';
-$tui-mouse: '(hover: hover) and (pointer: fine)';