@taiga-ui/core 3.55.0 → 3.56.0-canary.ac3cedc

package/styles/mixins/mixins.less

@@ -1,3 +1,14 @@
+.interactive(@ruleset) {
+    // TODO switch to :is after Safari 14 and FF 78 support
+    &:-webkit-any(a, button, select, textarea, input, label) {
+        @ruleset();
+    }
+
+    &:-moz-any(a, button, select, textarea, input, label) {
+        @ruleset();
+    }
+}
+
 // centering with translate
 .center-left() {
     position: absolute;
@@ -54,6 +65,34 @@
     text-decoration: none;
 }
 
+.button-base() {
+    .clearbtn();
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    max-width: 100%;
+    gap: calc(var(--t-gap) - 2 * var(--t-margin));
+
+    > img,
+    > tui-svg,
+    > tui-icon,
+    > tui-avatar,
+    > tui-badge,
+    > [tuiBadge],
+    > [tuiRadio],
+    > [tuiToggle],
+    > [tuiCheckbox],
+    &._icon-left:before,
+    &._icon-right:after {
+        margin: var(--t-margin);
+    }
+}
+
 .autofill(@mode:default) {
     &:-webkit-autofill,
     &:-webkit-autofill:hover,
@@ -155,44 +194,42 @@
     }
 }
 
-// shadow
+// @TODO: remove in v4.0
+// shadow @deprecated
 .shadow(@mode: 1) {
     // Default
     & when (@mode = 1) {
-        box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
+        box-shadow: var(--tui-shadow);
     }
 
     // Dropdown
     & when (@mode = 2) {
-        box-shadow:
-            0 1.5rem 1rem rgba(0, 0, 0, 0.03),
-            0 0.75rem 0.75rem rgba(0, 0, 0, 0.04),
-            0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
+        box-shadow: var(--tui-shadow-dropdown);
     }
 
     // Modal
     & when (@mode = 3) {
-        box-shadow: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
+        box-shadow: var(--tui-shadow-modal);
     }
 
     // Sidebar
     & when (@mode = 4) {
-        box-shadow: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);
+        box-shadow: var(--tui-shadow-sidebar);
     }
 
     // Hover
     & when (@mode = 5) {
-        box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2);
+        box-shadow: var(--tui-shadow-hover);
     }
 
     // Navigation
     & when (@mode = 6) {
-        box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
+        box-shadow: var(--tui-shadow-basic-navigation);
     }
 
     // Modal mobile
     & when (@mode = 7) {
-        box-shadow: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
+        box-shadow: var(--tui-shadow-sheet);
     }
 }
 

package/styles/mixins/mixins.scss

@@ -1,3 +1,14 @@
+@mixin interactive {
+    // TODO switch to :is after Safari 14 and FF 78 support
+    &:-webkit-any(a, button, select, textarea, input) {
+        @content;
+    }
+
+    &:-moz-any(a, button, select, textarea, input) {
+        @content;
+    }
+}
+
 // centering with translate
 @mixin center-left() {
     position: absolute;
@@ -53,6 +64,35 @@
     line-height: inherit;
 }
 
+@mixin button-base() {
+    @include clearbtn();
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    max-width: 100%;
+    gap: calc(var(--t-gap) - 2 * var(--t-margin));
+
+    > img,
+    > tui-svg,
+    > tui-icon,
+    > tui-avatar,
+    > tui-badge,
+    > [tuiBadge],
+    > [tuiRadio],
+    > [tuiToggle],
+    > [tuiCheckbox],
+    &._icon-left:before,
+    &._icon-right:after {
+        margin: var(--t-margin);
+    }
+}
+
 @mixin autofill($mode: default) {
     &:-webkit-autofill,
     &:-webkit-autofill:hover,

package/styles/mixins/slider.less

@@ -1,6 +1,6 @@
 @thumb-diameters: {
     @s: 0.5rem;
-    @m: 1rem;
+    @m: 0.75rem;
 };
 
 .tui-slider-ticks-labels(@input-size: m) {

package/styles/theme/appearance/icon.less

@@ -11,3 +11,28 @@
         color: var(--tui-text-01);
     });
 }
+
+// Icons with the directive
+[tuiAppearance][data-appearance='whiteblock'],
+[tuiAppearance][data-appearance='neutral'],
+[tuiAppearance][data-appearance='floating'] {
+    &:before,
+    &:after {
+        .transition(color);
+        color: var(--tui-text-03);
+    }
+
+    .appearance-hover({
+        &:before,
+        &:after {
+            color: var(--tui-text-02);
+        }
+    });
+
+    .appearance-active({
+        &:before,
+        &:after {
+            color: var(--tui-text-01);
+        }
+    });
+}

package/styles/theme/appearance/outline.less

@@ -1,6 +1,7 @@
 @import '../../taiga-ui-local.less';
 
-[tuiAppearance][data-appearance='outline'] {
+[tuiAppearance][data-appearance='outline'],
+[tuiAppearance][data-appearance='whiteblock'] {
     background: transparent;
     color: var(--tui-link);
     box-shadow: inset 0 0 0 1px var(--tui-base-04);
@@ -27,3 +28,7 @@
         });
     }
 }
+
+[tuiAppearance][data-appearance='whiteblock'] {
+    color: var(--tui-text-01);
+}

package/styles/theme/variables.less

@@ -154,6 +154,15 @@
     --tui-chart-2: var(--tui-support-21);
     --tui-chart-3: var(--tui-support-11);
     --tui-chart-4: var(--tui-base-05);
+    //
+    --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
+    --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2);
+    --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04),
+        0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
+    --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
+    --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);
+    --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
+    --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
 }
 
 [tuiTheme='night'] {
@@ -201,6 +210,14 @@
     --tui-autofill: var(--tui-autofill-night);
     --tui-elevation-01: #222;
     --tui-elevation-02: #222;
+    --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
+    --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2);
+    --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04),
+        0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
+    --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
+    --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12);
+    --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
+    --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
 
     tui-notification {
         --tui-base-01: #000;

package/types/calendar-view.d.ts

@@ -0,0 +1 @@
+export declare type TuiCalendarView = 'month' | 'year';

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './brightness';
+export * from './calendar-view';
 export * from './data-list-role';
 export * from './decimal';
 export * from './decimal-symbol';