@taiga-ui/core 4.6.0 → 4.7.0

package/styles/theme/appearance/opposite.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgb(255 255 255 / 64%);
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
 
     background: var(--tui-background-accent-opposite);
     color: var(--tui-background-base);
@@ -17,5 +17,5 @@
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='opposite'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgb(51 51 51 / 48%);
+    --tui-border-focus: rgba(51, 51, 51, 0.48);
 }

package/styles/theme/appearance/outline.less

@@ -7,8 +7,8 @@
     color: var(--tui-text-action);
     box-shadow: inset 0 0 0 1px var(--t-bs);
 
-    &:checked,
-    &[data-mode='checked'] {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         --t-bs: var(--tui-background-accent-1);
 
         box-shadow: inset 0 0 0 2px var(--t-bs);
@@ -22,12 +22,13 @@
         });
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
     }
 
-    &:checked:invalid,
-    &[data-mode='checked']:invalid {
+    &:checked:invalid:not([data-mode]),
+    &[data-mode~='checked'][data-mode~='invalid'] {
         box-shadow: inset 0 0 0 2px var(--tui-status-negative);
     }
 

package/styles/theme/appearance/primary.less

@@ -6,7 +6,8 @@
     background: var(--t-bg);
     color: var(--tui-text-primary-on-accent-1);
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         background: var(--tui-status-negative);
     }
 

package/styles/theme/appearance/secondary.less

@@ -14,8 +14,9 @@
         background: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked,
-    &[type='checkbox']:indeterminate {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'],
+    &[type='checkbox']:indeterminate:not([data-mode]) {
         background: var(--tui-background-accent-1);
         color: var(--tui-text-primary-on-accent-1);
 
@@ -27,7 +28,8 @@
             background: var(--tui-background-accent-1-pressed);
         });
 
-        &:invalid {
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
             background: var(--tui-status-negative);
             color: #fff;
 
@@ -43,7 +45,8 @@
         }
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         color: var(--tui-text-negative);
         background: var(--tui-status-negative-pale);
 
@@ -60,11 +63,13 @@
 }
 
 [tuiAppearance][data-appearance='flat'],
-[tuiAppearance][data-appearance='flat']:invalid {
+[tuiAppearance][data-appearance='flat']:invalid:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='invalid'] {
     background: transparent;
 }
 
-[tuiAppearance][data-appearance='flat']:checked {
+[tuiAppearance][data-appearance='flat']:checked:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='checked'] {
     background: var(--tui-background-neutral-1);
 
     .appearance-hover({

package/styles/theme/appearance/status.less

@@ -7,7 +7,8 @@
 [tuiAppearance][data-appearance='neutral'] {
     background: var(--t-bg);
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         color: #fff;
     }
 }
@@ -28,7 +29,8 @@
         --t-bg: var(--tui-status-negative-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-negative);
     }
 }
@@ -49,7 +51,8 @@
         --t-bg: var(--tui-status-positive-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-positive);
     }
 }
@@ -70,7 +73,8 @@
         --t-bg: var(--tui-status-warning-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-warning);
     }
 }
@@ -91,7 +95,8 @@
         --t-bg: var(--tui-status-info-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-info);
     }
 }
@@ -112,7 +117,8 @@
         --t-bg: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-neutral);
     }
 }

package/styles/theme/appearance/textfield.less

@@ -3,7 +3,7 @@
 [tuiAppearance][data-appearance='textfield'] {
     .transition(~'box-shadow, background, outline-color, border-color');
 
-    --t-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
+    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     background-color: var(--tui-background-base);
     color: var(--tui-text-primary);
@@ -26,12 +26,12 @@
         box-shadow: none;
     });
 
-    &[data-mode='invalid'][data-mode='invalid'],
+    &[data-mode~='invalid'][data-mode~='invalid'],
     &:invalid:not([data-mode]) {
         outline-color: var(--tui-status-negative);
     }
 
-    &[data-mode='readonly'],
+    &[data-mode~='readonly'],
     input&:read-only:not([data-mode]) {
         box-shadow: none;
         outline-color: var(--tui-border-normal) !important;

package/styles/theme/palette.less

@@ -2,12 +2,12 @@
     // Backgrounds
     --tui-background-base: #222;
     --tui-background-base-alt: #333;
-    --tui-background-neutral-1: rgb(255 255 255 / 8%);
-    --tui-background-neutral-1-hover: rgb(255 255 255 / 16%);
-    --tui-background-neutral-1-pressed: rgb(255 255 255 / 24%);
-    --tui-background-neutral-2: rgb(255 255 255 / 24%);
-    --tui-background-neutral-2-hover: rgb(255 255 255 / 32%);
-    --tui-background-neutral-2-pressed: rgb(255 255 255 / 40%);
+    --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;
@@ -15,28 +15,28 @@
     --tui-background-elevation-2: #333;
     --tui-background-elevation-3: #333;
     // Other
-    --tui-service-autofill-background: rgb(85 74 42);
-    --tui-border-normal: rgb(255 255 255 / 14%);
-    --tui-border-hover: rgb(255 255 255 / 60%);
-    --tui-border-focus: rgb(255 255 255 / 64%);
+    --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: rgb(255 140 103 / 100%);
-    --tui-status-negative-pale: rgb(244 87 37 / 32%);
-    --tui-status-negative-pale-hover: rgb(244 87 37 / 40%);
-    --tui-status-positive: rgb(74 201 155);
-    --tui-status-positive-pale: rgb(74 201 155 / 32%);
-    --tui-status-positive-pale-hover: rgb(74 201 155 / 40%);
-    --tui-status-warning: rgb(255 199 0);
-    --tui-status-warning-pale: rgb(255 199 0 / 32%);
-    --tui-status-warning-pale-hover: rgb(255 199 0 / 40%);
-    --tui-status-info: rgb(112 182 246);
-    --tui-status-info-pale: rgb(112 182 246 / 32%);
-    --tui-status-info-pale-hover: rgb(112 182 246 / 40%);
-    --tui-status-neutral: rgb(149 155 164);
+    --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: rgb(255 255 255 / 100%);
-    --tui-text-secondary: rgb(255 255 255 / 72%);
-    --tui-text-tertiary: rgb(255 255 255 / 60%);
+    --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;
@@ -50,12 +50,12 @@
     // Backgrounds
     --tui-background-base: #fff;
     --tui-background-base-alt: #f6f6f6;
-    --tui-background-neutral-1: rgb(0 0 0 / 4%);
-    --tui-background-neutral-1-hover: rgb(0 0 0 / 8%);
-    --tui-background-neutral-1-pressed: rgb(0 0 0 / 12%);
-    --tui-background-neutral-2: rgb(0 0 0 / 8%);
-    --tui-background-neutral-2-hover: rgb(0 0 0 / 10%);
-    --tui-background-neutral-2-pressed: rgb(0 0 0 / 14%);
+    --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;
@@ -70,29 +70,29 @@
     --tui-background-elevation-3: #fff;
     // Other
     --tui-service-autofill-background: #fff5c0;
-    --tui-service-selection-background: rgb(112 182 246 / 12%);
-    --tui-service-backdrop: rgb(0 0 0 / 75%);
-    --tui-border-normal: rgb(0 0 0 / 10%);
-    --tui-border-hover: rgb(0 0 0 / 16%);
-    --tui-border-focus: rgb(51 51 51 / 64%);
+    --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: rgb(244 87 37 / 100%);
-    --tui-status-negative-pale: rgb(244 87 37 / 12%);
-    --tui-status-negative-pale-hover: rgb(244 87 37 / 24%);
-    --tui-status-positive: rgb(74 201 155 / 100%);
-    --tui-status-positive-pale: rgb(74 201 155 / 12%);
-    --tui-status-positive-pale-hover: rgb(74 201 155 / 24%);
-    --tui-status-warning: rgb(255 199 0 / 100%);
-    --tui-status-warning-pale: rgb(255 199 0 / 12%);
-    --tui-status-warning-pale-hover: rgb(255 199 0 / 24%);
-    --tui-status-info: rgb(112 182 246 / 100%);
-    --tui-status-info-pale: rgb(112 182 246 / 12%);
-    --tui-status-info-pale-hover: rgb(112 182 246 / 24%);
-    --tui-status-neutral: rgb(121 129 140);
+    --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: rgb(27 31 59 / 100%);
-    --tui-text-secondary: rgb(27 31 59 / 65%);
-    --tui-text-tertiary: rgb(27 31 59 / 40%);
+    --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: #526ed3;
@@ -126,9 +126,9 @@
     --tui-chart-categorical-21: #3682db;
     --tui-chart-categorical-22: #34b41f;
     // Shadows
-    --tui-shadow-small: 0 0.25rem 1.25rem rgb(0 0 0 / 10%);
-    --tui-shadow-small-hover: 0 1rem 2.5rem rgb(0 0 0 / 14%);
-    --tui-shadow-medium: 0 0.375rem 2rem rgb(0 0 0 / 12%);
-    --tui-shadow-medium-hover: 0 1.25rem 4rem rgb(0 0 0 / 18%);
-    --tui-shadow-popup: 0 1.25rem 3rem rgb(0 0 0 / 20%);
+    --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);
 }

package/styles/theme/wrapper.less

@@ -51,7 +51,7 @@
 
     background: var(--tui-background-base);
     color: var(--tui-text-primary);
-    box-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
+    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     &::after {
         .transition(color);
@@ -132,14 +132,6 @@
         background-size: 0.5rem 0.5rem;
     }
 
-    table &[data-appearance='table']:not(._focused)::after {
-        border-width: 0;
-    }
-
-    table &._focused {
-        z-index: 1;
-    }
-
     &[data-appearance='table']::after {
         border-width: 1px;
         color: var(--tui-border-normal);
@@ -191,6 +183,16 @@
     });
 }
 
+table [tuiWrapper][data-appearance='table'] {
+    &[data-appearance='table']:not(._focused)::after {
+        border-width: 0;
+    }
+
+    &._focused {
+        z-index: 1;
+    }
+}
+
 [tuiWrapper][data-appearance='icon'] {
     .transition(opacity);