@taiga-ui/styles 5.0.0-rc.4 → 5.0.0

package/components/appearance.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Appearance

package/components/avatar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Avatar
@@ -147,7 +147,8 @@
 
     &._badge {
         mask: radial-gradient(
-            circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
+            circle at ~'calc(max(var(--tui-inline), 0) * 100% - var(--tui-inline) * var(--t-corner-offset))'
+                calc(100% - var(--t-corner-offset)),
             black 0.23rem,
             transparent 0.25rem,
             transparent 0.375rem,
@@ -158,14 +159,14 @@
         &::after {
             content: '';
             position: absolute;
-            top: calc(100% - var(--t-corner-offset));
-            left: calc(100% - var(--t-corner-offset));
             display: block;
+            inset-block-start: calc(100% - var(--t-corner-offset));
+            inset-inline-start: calc(100% - var(--t-corner-offset));
             inline-size: 0.55rem;
             block-size: 0.55rem;
             border-radius: 100%;
             background: var(--t-badge);
-            transform: translate3d(-50%, -50%, 0);
+            transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
         }
     }
 

package/components/badge.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Badge
@@ -46,12 +46,10 @@
         font-size: var(--t-icon-size) !important;
     }
 
-    &[data-appearance='error'], /* TODO @deprecated remove in v5 */
     &[data-appearance='negative'] {
         --t-status: var(--tui-status-negative);
     }
 
-    &[data-appearance='success'], /* TODO @deprecated remove in v5 */
     &[data-appearance='positive'] {
         --t-status: var(--tui-status-positive);
     }
@@ -104,8 +102,6 @@
         }
     }
 
-    &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
-    &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
     &[tuiAppearance][data-appearance='negative'],
     &[tuiAppearance][data-appearance='positive'],
     &[tuiAppearance][data-appearance='warning'],

package/components/block.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Block

package/components/button.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Button
@@ -69,8 +69,8 @@
         font: var(--tui-typography-body-s);
 
         tui-icon,
-        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::before,
-        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::after {
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::before,
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::after {
             font-size: 1rem;
         }
     }
@@ -120,6 +120,11 @@
             max-block-size: calc(var(--t-line-height) * 2);
         }
     }
+
+    &:is(a):not([href]) {
+        opacity: var(--tui-disabled-opacity);
+        pointer-events: none;
+    }
 }
 
 [tuiIconButton]:where(*&) {
@@ -127,6 +132,7 @@
     inline-size: var(--t-size);
     min-inline-size: var(--t-size);
     font-size: 0 !important;
+    font-variant-ligatures: none !important;
     padding: 0;
 
     &&[data-icon-start]::after {

package/components/checkbox.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Checkbox

package/components/chip.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Chip

package/components/comment.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Comment

package/components/compass.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Compass
@@ -30,8 +30,8 @@ tui-compass:where(*&) {
     &::before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0.125rem;
+        inset-block-start: 0;
+        inset-inline-start: 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;

package/components/group.less

@@ -53,6 +53,8 @@
             z-index: 2;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:has(:invalid:not([data-mode])),
@@ -60,18 +62,24 @@
             z-index: 2;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:has(:focus-visible) {
             z-index: 3;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:has([data-focus='true']) {
             z-index: 3;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:checked:not([data-mode]),
@@ -79,12 +87,16 @@
             z-index: 4;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:has([tuiBlock]:checked) {
             z-index: 4;
 
             --t-group-mask: none;
+            --t-group-mask-end: none;
+            --t-group-mask-start: none;
         }
 
         &:not(:last-child) {

package/components/icon.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Icon

package/components/label.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Label

package/components/like.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Like

package/components/link.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Link

package/components/message.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Message

package/components/notification.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Notification
@@ -69,7 +69,7 @@
     }
 
     &[data-size='s'] {
-        padding: 0.375rem var(--tui-padding-s);
+        padding: 0.375rem 0.5rem;
         font: var(--tui-typography-body-s);
         border-radius: var(--tui-radius-m);
 
@@ -79,7 +79,7 @@
 
         &::before {
             inset-block-start: 0.5rem;
-            inset-inline-start: -0.875rem;
+            inset-inline-start: -1rem;
             font-size: 1rem;
         }
 

package/components/pin.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Pin
@@ -16,7 +16,11 @@
 [tuiPin]:where(*&) {
     --t-size: 2rem;
 
-    .transition(~'width, height, border, margin');
+    @bubble-width: 1.875rem;
+    @bubble-shift: translate(calc(var(--tui-inline) * -@bubble-width), -@bubble-width);
+    @ground-shift: translate(calc(var(--tui-inline) * -50%), -50%);
+
+    .transition(~'inline-size, block-size, border, margin');
     .button-clear();
 
     position: relative;
@@ -35,7 +39,7 @@
     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%);
+    transform: @ground-shift;
 
     .interactive({
         cursor: pointer;
@@ -64,7 +68,7 @@
     }
 
     > tui-icon {
-        .transition(~'width, height');
+        .transition(~'inline-size, block-size');
 
         font-size: 1.25rem;
         align-self: center;
@@ -87,12 +91,12 @@
         }
 
         &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            transform: scale(0.99) @bubble-shift;
             opacity: 1;
         }
 
         &::after {
-            top: 4.5rem;
+            inset-block-start: 4.5rem;
             opacity: 1;
         }
     }
@@ -115,12 +119,12 @@
         }
 
         &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            transform: scale(0.99) @bubble-shift;
             opacity: 1;
         }
 
         &::after {
-            top: 4.5rem;
+            inset-block-start: 4.5rem;
             opacity: 1;
         }
     }
@@ -130,35 +134,33 @@
 
         content: '';
         position: absolute;
-        top: 50%;
-        left: 50%;
-        right: -0.25rem;
-        bottom: -0.625rem;
+        inset-block: 50% -0.625rem;
+        inset-inline: 50% -0.25rem;
         box-sizing: border-box;
-        border-width: 2.2rem 2rem;
+        border-width: 2.2rem @bubble-width;
         border-style: solid;
         border-color: inherit;
         opacity: 0;
-        transform: scale(0.57) translate(-1.875rem, -1.875rem);
-        transform-origin: top left;
+        transform: scale(0.57) @bubble-shift;
+        transform-origin: top var(--tui-inline-start);
         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');
+        .transition(~'inset-block-start, opacity');
 
         content: '';
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         border: 0.1875rem solid currentColor;
         border-color: inherit;
         border-radius: 100%;
         box-sizing: border-box;
         box-shadow: inherit;
-        transform: translate(-50%, -50%);
+        transform: @ground-shift;
         opacity: 0;
     }
 }

package/components/progress-bar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name ProgressBar

package/components/radio.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Radio

package/components/switch.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Switch
@@ -38,19 +38,19 @@
 
         &::before {
             inline-size: 1rem;
-            transform: translateX(-1rem);
+            transform: translateX(calc(var(--tui-inline) * -1rem));
             font-size: 0.75rem;
         }
 
         &::after {
             inline-size: 1rem;
-            box-shadow: -2.625rem 0 0 0.5rem var(--tui-background-base);
+            box-shadow: calc(var(--tui-inline) * -2.625rem) 0 0 0.5rem var(--tui-background-base);
             outline-width: 0.167rem;
             transform: scale(0.375);
         }
 
         &:checked::after {
-            transform: scale(0.375) translateX(2.625rem);
+            transform: scale(0.375) translateX(calc(var(--tui-inline) * 2.625rem));
         }
     }
 
@@ -60,7 +60,7 @@
         }
 
         &::after {
-            transform: scale(0.33333) translateX(4.5rem);
+            transform: scale(0.33333) translateX(calc(var(--tui-inline) * 4.5rem));
         }
     }
 
@@ -78,18 +78,18 @@
     }
 
     &::before {
-        left: 0.125rem;
+        inset-inline-start: 0.125rem;
         font-size: 1rem;
-        transform: translateX(-1.5rem);
+        transform: translateX(calc(var(--tui-inline) * -1.5rem));
     }
 
     &::after {
-        right: 0;
         display: block;
+        inset-inline-end: 0;
         border-radius: 100%;
         background: none;
         transform: scale(0.33333);
-        box-shadow: -4.5rem 0 0 0.75rem var(--tui-background-base);
+        box-shadow: calc(var(--tui-inline) * -4.5rem) 0 0 0.75rem var(--tui-background-base);
         outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
     }
 

package/components/textfield.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 tui-textfield:where(*&) {
     .scrollbar-hidden();
@@ -181,6 +181,7 @@ tui-textfield:where(*&) {
         & > .t-template,
         .t-filler,
         [tuiInput] {
+            inset-block-end: 0;
             padding-block-start: calc(var(--t-height) / 3);
             padding-block-end: 0;
         }
@@ -200,10 +201,9 @@ tui-textfield:where(*&) {
     .t-filler,
     [tuiInput] {
         position: absolute;
-        inset-block-start: 0;
         inset-inline: 0;
         inline-size: auto;
-        block-size: 100%;
+        block-size: var(--t-height);
         appearance: none;
         background: none;
         font: inherit;
@@ -267,7 +267,6 @@ tui-textfield:where(*&) {
         user-select: none;
         padding: calc(var(--t-height) / 2 - 0.625em) 0;
         line-height: 1.25 !important;
-        letter-spacing: calc((max(1em, 0.75rem) - 1em) * 0.4);
         transition-duration: inherit;
 
         + .t-content {

package/components/toast.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 [tuiToast]:where(*&) {
     .transition(transform);
@@ -20,13 +20,15 @@
     max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
     border: inherit;
     text-decoration: none;
+    white-space: pre-line;
+    text-align: start;
     overflow: hidden;
 
     .interactive({
         cursor: pointer;
     });
 
-    > *,
+    > *:not(tui-shrink-wrap),
     &::after,
     &::before {
         max-inline-size: 50%;

package/mixins/appearance.scss

@@ -1,5 +1,5 @@
-@import 'miscellaneous';
-@import '../variables/media';
+@import 'miscellaneous.scss';
+@import '../variables/media.scss';
 
 @mixin appearance-hover {
     @include interactive {

package/mixins/date-picker.less

@@ -92,7 +92,7 @@
             }
 
             &:not(:last-child)::before {
-                right: -1rem;
+                inset-inline-end: -1rem;
             }
 
             &::after {
@@ -109,7 +109,7 @@
             }
 
             &:not(:first-child)::before {
-                left: -1rem;
+                inset-inline-start: -1rem;
             }
 
             &::after {

package/mixins/date-picker.scss

@@ -1,4 +1,4 @@
-@import 'miscellaneous';
+@import 'miscellaneous.scss';
 
 @mixin date-picker {
     .t-row {
@@ -92,7 +92,7 @@
             }
 
             &:not(:last-child)::before {
-                right: -1rem;
+                inset-inline-end: -1rem;
             }
 
             &::after {
@@ -109,7 +109,7 @@
             }
 
             &:not(:first-child)::before {
-                left: -1rem;
+                inset-inline-start: -1rem;
             }
 
             &::after {

package/mixins/hitbox.less

@@ -1,4 +1,4 @@
-@import '../variables/media';
+@import '../variables/media.less';
 
 .tui-hitbox(@size) {
     @media @tui-mobile {

package/mixins/hitbox.scss

@@ -1,4 +1,4 @@
-@import '../variables/media';
+@import '../variables/media.scss';
 
 @mixin hitbox($size) {
     @media ($tui-mobile) {

package/mixins/miscellaneous.less

@@ -6,23 +6,26 @@
     }
 }
 
+// TODO: rename to center-horizontal
 // centering with translate
 .center-left() {
     position: absolute;
+    // stylelint-disable-next-line -- TODO: fix later
     left: 50%;
     transform: translate(-50%, 0);
 }
 
+// TODO: rename to center-vertical
 .center-top() {
     position: absolute;
+    // stylelint-disable-next-line -- TODO: fix later
     top: 50%;
     transform: translate(0, -50%);
 }
 
 .center-all() {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset: 50% auto auto 50%;
     transform: translate(-50%, -50%);
 }
 
@@ -30,8 +33,8 @@
 // @deprecated TODO remove in 5.0 in favor of inset: 0
 .fullsize(@position: absolute, @mode: height) {
     position: @position;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 
     & when (@mode = height) {
         inline-size: 100%;
@@ -39,8 +42,8 @@
     }
 
     & when (@mode = inset) {
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
     }
 }
 
@@ -104,10 +107,8 @@
 }
 
 .scrollbar-hidden() {
-    /* stylelint-disable*/
     scrollbar-width: none;
     -ms-overflow-style: none;
-    /* stylelint-enable*/
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {

package/mixins/miscellaneous.scss

@@ -1,4 +1,4 @@
-@import 'browsers';
+@import 'browsers.scss';
 
 @mixin interactive {
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
@@ -6,40 +6,43 @@
     }
 }
 
+// TODO: rename to center-horizontal
 // centering with translate
 @mixin center-left() {
     position: absolute;
+    // stylelint-disable-next-line -- TODO: fix later
     left: 50%;
     transform: translate(-50%, 0);
 }
 
+// TODO: rename to center-vertical
 @mixin center-top() {
     position: absolute;
+    // stylelint-disable-next-line -- TODO: fix later
     top: 50%;
     transform: translate(0, -50%);
 }
 
 @mixin center-all() {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset: 50% auto auto 50%;
     transform: translate(-50%, -50%);
 }
 
 //.fullsize
 @mixin fullsize($position: absolute, $mode: height) {
     position: $position;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 
     @if ($mode == height) {
-        width: 100%;
-        height: 100%;
+        inline-size: 100%;
+        block-size: 100%;
     }
 
     @if ($mode == inset) {
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
     }
 }
 
@@ -64,7 +67,7 @@
     white-space: nowrap;
     overflow: hidden;
     vertical-align: middle;
-    max-width: 100%;
+    max-inline-size: 100%;
     gap: calc(var(--t-gap) - 2 * var(--t-margin));
 
     > img,
@@ -75,8 +78,8 @@
     > [tuiRadio],
     > [tuiSwitch],
     > [tuiCheckbox],
-    &[tuiIcons]:before,
-    &[tuiIcons]:after {
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
         margin: var(--t-margin);
     }
 }
@@ -101,10 +104,8 @@
 }
 
 @mixin scrollbar-hidden() {
-    /* stylelint-disable*/
     scrollbar-width: none;
     -ms-overflow-style: none;
-    /* stylelint-enable*/
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {
@@ -117,8 +118,8 @@
     position: absolute;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
+    block-size: 1px;
+    inline-size: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
@@ -143,6 +144,7 @@
 
 @mixin text-truncate() {
     @include text-overflow();
+
     flex: 1;
     min-inline-size: 0;
     max-inline-size: max-content;
@@ -150,7 +152,7 @@
 
 @mixin tui-line-clamp($count: 3) {
     display: -webkit-box;
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: block-axis;
     -webkit-line-clamp: $count;
     line-clamp: $count;
     overflow: hidden;

package/package.json

@@ -1,12 +1,30 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.0.0-rc.4",
+    "version": "5.0.0",
     "description": "Framework-agnostic package with styles for Taiga UI",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/taiga-family/taiga-ui"
+    },
     "license": "Apache-2.0",
+    "contributors": [
+        {
+            "name": "Alex Inkin",
+            "email": "alexander@inkin.ru"
+        },
+        {
+            "name": "Vladimir Potekhin",
+            "email": "vladimir.potekh@gmail.com"
+        },
+        {
+            "name": "Nikita Barsukov",
+            "email": "nikita.s.barsukov@gmail.com"
+        }
+    ],
     "exports": {
         "./*": "./*"
     },
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.283.0"
+        "@taiga-ui/design-tokens": "~0.291.0"
     }
 }

package/taiga-ui-fonts.less

@@ -1,4 +1,2 @@
-// stylelint-disable
-// https://github.com/stackblitz/core/issues/2104#issuecomment-1397086512
-//noinspection CssUnknownTarget
+// stylelint-disable-next-line -- https://github.com/stackblitz/core/issues/2104#issuecomment-1397086512
 @import (optional) url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);

package/theme/appearance/table.less

@@ -11,7 +11,6 @@
     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;
     }

package/theme/appearance.less

@@ -2,7 +2,6 @@
 @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';

package/utils.scss

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

package/theme/appearance/glass.less

@@ -1,30 +0,0 @@
-@import '../../utils.less';
-
-[tuiAppearance][data-appearance='glass'] {
-    background: rgba(0, 0, 0, 0.4);
-    color: #fff;
-    backdrop-filter: blur(1rem);
-
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
-
-    .appearance-hover({
-        background: rgba(0, 0, 0, 0.48);
-    });
-
-    .appearance-active({
-        background: rgba(0, 0, 0, 0.6);
-    });
-}
-
-[tuiTheme='dark'] [tuiAppearance][data-appearance='glass'],
-[tuiTheme='dark'][tuiAppearance][data-appearance='glass'] {
-    background: rgba(255, 255, 255, 0.3);
-
-    .appearance-hover({
-        background: rgba(255, 255, 255, 0.4);
-    });
-
-    .appearance-active({
-        background: rgba(255, 255, 255, 0.5);
-    });
-}