@taiga-ui/core 3.54.0 → 3.55.0

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

@@ -155,3 +155,54 @@
     --tui-chart-3: var(--tui-support-11);
     --tui-chart-4: var(--tui-base-05);
 }
+
+[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-notification {
+        --tui-base-01: #000;
+    }
+}