@taiga-ui/core 3.54.0 → 3.55.0-canary.17e839c

package/styles/taiga-ui-local.less

@@ -10,4 +10,5 @@
 @import 'mixins/text.less';
 @import 'mixins/textfield.less';
 @import 'mixins/wrapper.less';
+@import 'mixins/appearance.less';
 @import 'variables/media.less';

package/styles/taiga-ui-local.scss

@@ -10,4 +10,5 @@ $space: 0.25rem;
 @import 'mixins/text.scss';
 @import 'mixins/textfield.scss';
 @import 'mixins/wrapper.scss';
+@import 'mixins/appearance.scss';
 @import 'variables/media.scss';

package/styles/taiga-ui-theme.less

@@ -1,3 +1,4 @@
 @import 'theme/variables.less';
+@import 'theme/appearance.less';
 @import 'theme/wrapper.less';
 @import 'theme/calendar.less';

package/styles/theme/appearance/accent.less

@@ -0,0 +1,14 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='accent'] {
+    background: var(--tui-accent);
+    color: var(--tui-accent-text);
+
+    .appearance-hover({
+        background: var(--tui-accent-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-accent-active);
+    });
+}

package/styles/theme/appearance/base.less

@@ -0,0 +1,18 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance] {
+    .transition(~'color, background, opacity, box-shadow');
+    position: relative;
+    appearance: none;
+    outline: 0.125rem solid transparent;
+    outline-offset: -0.125rem;
+
+    .appearance-focus({
+        outline-color: var(--tui-focus);
+    });
+
+    .appearance-disabled({
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+    });
+}

package/styles/theme/appearance/floating.less

@@ -0,0 +1,16 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='floating'] {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+
+    .appearance-hover({
+        box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
+    });
+
+    .appearance-active({
+        background: #f6f7f8;
+        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    });
+}

package/styles/theme/appearance/glass.less

@@ -0,0 +1,30 @@
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+[tuiAppearance][data-appearance='glass'] {
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    backdrop-filter: blur(1rem);
+
+    --tui-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='night'] & {
+        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);
+        });
+    }
+}

package/styles/theme/appearance/icon.less

@@ -0,0 +1,38 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='icon'] {
+    color: var(--tui-text-03);
+
+    .appearance-hover({
+        color: var(--tui-text-02);
+    });
+
+    .appearance-active({
+        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/opposite.less

@@ -0,0 +1,31 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='opposite'] {
+    background: #000;
+    color: #fff;
+
+    --tui-focus: rgba(255, 255, 255, 0.64);
+
+    .appearance-hover({
+        background: #333;
+    });
+
+    .appearance-active({
+        background: #5c636b;
+    });
+
+    [tuiTheme='night'] & {
+        color: rgba(0, 0, 0, 0.8);
+        background: #fff;
+
+        --tui-focus: rgba(51, 51, 51, 0.48);
+
+        .appearance-hover({
+            background: #f3F4f6;
+        });
+
+        .appearance-active({
+            background: #eaecee;
+        });
+    }
+}

package/styles/theme/appearance/outline.less

@@ -0,0 +1,34 @@
+@import '../../taiga-ui-local.less';
+
+[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);
+
+    .appearance-hover({
+        background: var(--tui-clear);
+        box-shadow: inset 0 0 0 1px var(--tui-base-05);
+    });
+
+    .appearance-active({
+        background: var(--tui-clear);
+        box-shadow: inset 0 0 0 1px var(--tui-base-06);
+    });
+
+    &:checked {
+        box-shadow: inset 0 0 0 2px var(--tui-primary);
+
+        .appearance-hover({
+            box-shadow: inset 0 0 0 2px var(--tui-primary-hover);
+        });
+
+        .appearance-active({
+            box-shadow: inset 0 0 0 2px var(--tui-primary-active);
+        });
+    }
+}
+
+[tuiAppearance][data-appearance='whiteblock'] {
+    color: var(--tui-text-01);
+}

package/styles/theme/appearance/primary.less

@@ -0,0 +1,14 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='primary'] {
+    background: var(--tui-primary);
+    color: var(--tui-primary-text);
+
+    .appearance-hover({
+        background: var(--tui-primary-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-primary-active);
+    });
+}

package/styles/theme/appearance/secondary.less

@@ -0,0 +1,24 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='secondary'],
+[tuiAppearance][data-appearance='flat'],
+[tuiAppearance][data-appearance='destructive'] {
+    background: var(--tui-secondary);
+    color: var(--tui-link);
+
+    .appearance-hover({
+        background: var(--tui-secondary-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-secondary-active);
+    });
+}
+
+[tuiAppearance][data-appearance='flat'] {
+    background: transparent;
+}
+
+[tuiAppearance][data-appearance='destructive'] {
+    color: var(--tui-negative);
+}

package/styles/theme/appearance/status.less

@@ -0,0 +1,66 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='error'] {
+    color: var(--tui-text-01);
+    background: var(--tui-error-bg);
+
+    .appearance-hover({
+        background: var(--tui-error-bg-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-error-bg-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='success'] {
+    color: var(--tui-text-01);
+    background: var(--tui-success-bg);
+
+    .appearance-hover({
+        background: var(--tui-success-bg-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-success-bg-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='warning'] {
+    color: var(--tui-text-01);
+    background: var(--tui-warning-bg);
+
+    .appearance-hover({
+        background: var(--tui-warning-bg-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-warning-bg-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='info'] {
+    color: var(--tui-text-01);
+    background: var(--tui-info-bg);
+
+    .appearance-hover({
+        background: var(--tui-info-bg-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-info-bg-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='neutral'] {
+    color: var(--tui-text-01);
+    background: var(--tui-neutral-bg);
+
+    .appearance-hover({
+        background: var(--tui-neutral-bg-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-neutral-bg-hover);
+    });
+}

package/styles/theme/appearance.less

@@ -0,0 +1,10 @@
+@import 'appearance/base.less';
+@import 'appearance/accent.less';
+@import 'appearance/floating.less';
+@import 'appearance/glass.less';
+@import 'appearance/icon.less';
+@import 'appearance/opposite.less';
+@import 'appearance/outline.less';
+@import 'appearance/primary.less';
+@import 'appearance/secondary.less';
+@import 'appearance/status.less';

package/styles/theme/variables.less

@@ -154,4 +154,72 @@
     --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'] {
+    --tui-base-01: #222;
+    --tui-base-02: #333;
+    --tui-base-03: #808080;
+    --tui-base-04: #959595;
+    --tui-base-05: #b0b0b0;
+    --tui-base-06: #d7d7d7;
+    --tui-base-07: #ededed;
+    --tui-base-08: #f6f6f6;
+    --tui-base-09: #fff;
+    --tui-focus: rgba(51, 51, 51, 0.64);
+    --tui-secondary: rgba(255, 255, 255, 0.16);
+    --tui-secondary-hover: rgba(255, 255, 255, 0.24);
+    --tui-secondary-active: rgba(255, 255, 255, 0.4);
+    --tui-clear: rgba(255, 255, 255, 0.16);
+    --tui-clear-disabled: rgba(255, 255, 255, 0.08);
+    --tui-clear-hover: rgba(255, 255, 255, 0.24);
+    --tui-clear-active: rgba(255, 255, 255, 0.4);
+    --tui-error-fill: rgba(255, 140, 103, 1);
+    --tui-error-bg: rgba(244, 87, 37, 0.32);
+    --tui-error-bg-hover: rgba(244, 87, 37, 0.4);
+    --tui-success-fill: rgb(74, 201, 155);
+    --tui-success-bg: rgba(74, 201, 155, 0.32);
+    --tui-success-bg-hover: rgba(74, 201, 155, 0.4);
+    --tui-warning-fill: rgb(255, 199, 0);
+    --tui-warning-bg: rgba(255, 199, 0, 0.32);
+    --tui-warning-bg-hover: rgba(255, 199, 0, 0.4);
+    --tui-info-fill: rgb(112, 182, 246);
+    --tui-info-bg: rgba(112, 182, 246, 0.32);
+    --tui-info-bg-hover: rgba(112, 182, 246, 0.4);
+    --tui-neutral-fill: rgb(149, 155, 164);
+    --tui-neutral-bg: rgba(149, 155, 164, 0.32);
+    --tui-neutral-bg-hover: rgba(149, 155, 164, 0.48);
+    --tui-text-01: rgba(255, 255, 255, 1);
+    --tui-text-02: rgba(255, 255, 255, 0.72);
+    --tui-text-03: rgba(255, 255, 255, 0.6);
+    --tui-link: #6788ff;
+    --tui-link-hover: #526ed3;
+    --tui-positive: #44c596;
+    --tui-positive-hover: #3aa981;
+    --tui-negative: #ff8c67;
+    --tui-negative-hover: #bb593a;
+    --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';