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

package/theme/appearance/status.less

@@ -0,0 +1,125 @@
+@import '../../utils.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/theme/appearance/table.less

@@ -0,0 +1,68 @@
+@import '../../utils.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/theme/appearance/textfield.less

@@ -0,0 +1,80 @@
+@import '../../utils.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/theme/appearance.less

@@ -0,0 +1,12 @@
+@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/theme/palette.less

@@ -0,0 +1,161 @@
+.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/theme/variables.less

@@ -0,0 +1,57 @@
+@import (inline, once) '@taiga-ui/design-tokens/palette/animation.css';
+@import (inline, once) '@taiga-ui/design-tokens/palette/shadow.css';
+
+&: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.875rem) / calc(20 / 14) 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.875rem) / calc(16 / 14) var(--tui-font-family-text);
+    --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12) var(--tui-font-family-text);
+    --tui-font-ui-2xs: 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-stroke-width: 0.125rem;
+    --tui-duration: 0.3s;
+    --tui-disabled-opacity: 0.56;
+    // logical
+    --tui-inline-start: left;
+    --tui-inline-end: right;
+    --tui-inline: 1;
+}
+
+[dir='rtl'] {
+    --tui-inline-start: right;
+    --tui-inline-end: left;
+    --tui-inline: -1;
+}

package/utils.less

@@ -0,0 +1,7 @@
+@import 'mixins/browsers.less';
+@import 'mixins/date-picker.less';
+@import 'mixins/miscellaneous.less';
+@import 'mixins/picker.less';
+@import 'mixins/slider.less';
+@import 'mixins/appearance.less';
+@import 'variables/media.less';

package/utils.scss

@@ -0,0 +1,6 @@
+@import 'mixins/browsers';
+@import 'mixins/miscellaneous';
+@import 'mixins/picker';
+@import 'mixins/slider';
+@import 'mixins/appearance';
+@import 'variables/media';

package/variables/media.less

@@ -0,0 +1,23 @@
+@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/variables/media.scss

@@ -0,0 +1,23 @@
+$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/basic/keyframes.less

@@ -1,19 +0,0 @@
-@keyframes tuiReveal {
-    from {
-        transform: scale(0);
-    }
-
-    to {
-        transform: scale(1);
-    }
-}
-
-@keyframes tuiFadeIn {
-    from {
-        opacity: var(--tui-fade-start, 0);
-    }
-
-    to {
-        opacity: var(--tui-fade-end, 1);
-    }
-}

package/basic/main.less

@@ -1,80 +0,0 @@
-html {
-    block-size: 100%;
-    /* stylelint-disable-next-line */
-    font-size: 16px;
-}
-
-body {
-    block-size: 100%;
-    min-block-size: 100%;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
-    -webkit-overflow-scrolling: touch;
-}
-
-ul,
-ol {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-input,
-button,
-select,
-textarea {
-    font-family: inherit;
-    color: inherit;
-}
-
-hr {
-    margin: 0;
-    block-size: 1px;
-    border: none;
-    background: var(--tui-border-normal);
-}
-
-iframe {
-    border: none;
-}
-
-// Resolve bug with use elements in IE11
-// https://stackoverflow.com/questions/30653533/ie-11-crashes-when-using-dynamic-svg-elements
-svg use {
-    pointer-events: none;
-}
-
-::selection {
-    background-color: var(--tui-service-selection-background);
-}
-
-::-ms-clear {
-    display: none;
-}
-
-::-ms-reveal {
-    display: none;
-}
-
-// @note: only safari 16+
-@supports (-webkit-hyphens: none) and (text-align-last: right) {
-    /**
-      * @descriptions:
-      * Safari 16 has bug when for some reason,
-      * the ::after blocks aren't removed
-      * after the destruction of the parent class
-     */
-    ::after {
-        content: none;
-    }
-}