npm - @taiga-ui/core - Versions diffs - 4.4.1 → 4.5.0-canary.49229f4 - Mend

@taiga-ui/core 4.4.1 → 4.5.0-canary.49229f4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/styles/theme/palette.less CHANGED Viewed

@@ -2,40 +2,41 @@
     // Backgrounds
     --tui-background-base: #222;
     --tui-background-base-alt: #333;
-    --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-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-accent-opposite: #fff;
     --tui-background-accent-opposite-hover: #f6f6f6;
     --tui-background-accent-opposite-pressed: #ededed;
-    --tui-background-elevation-1: #222;
-    --tui-background-elevation-2: #222;
+    --tui-background-elevation-1: #292929;
+    --tui-background-elevation-2: #333;
+    --tui-background-elevation-3: #333;
     // Other
-    --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);
+    --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%);
     // Statuses
-    --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);
+    --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);
     // Text
-    --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-primary: rgb(255 255 255 / 100%);
+    --tui-text-secondary: rgb(255 255 255 / 72%);
+    --tui-text-tertiary: rgb(255 255 255 / 60%);
     --tui-text-action: #6788ff;
     --tui-text-action-hover: #526ed3;
     --tui-text-positive: #44c596;
@@ -49,12 +50,12 @@
     // Backgrounds
     --tui-background-base: #fff;
     --tui-background-base-alt: #f6f6f6;
-    --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-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-accent-1: #526ed3;
     --tui-background-accent-1-hover: #6c86e2;
     --tui-background-accent-1-pressed: #314692;
@@ -66,31 +67,32 @@
     --tui-background-accent-opposite-pressed: #808080;
     --tui-background-elevation-1: #fff;
     --tui-background-elevation-2: #fff;
+    --tui-background-elevation-3: #fff;
     // Other
     --tui-service-autofill-background: #fff5c0;
-    --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);
+    --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%);
     // Statuses
-    --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);
+    --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);
     // Text
-    --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: rgb(27 31 59 / 100%);
+    --tui-text-secondary: rgb(27 31 59 / 65%);
+    --tui-text-tertiary: rgb(27 31 59 / 40%);
     --tui-text-primary-on-accent-1: #fff;
     --tui-text-primary-on-accent-2: #fff;
     --tui-text-action: #526ed3;
@@ -124,9 +126,9 @@
     --tui-chart-categorical-21: #3682db;
     --tui-chart-categorical-22: #34b41f;
     // Shadows
-    --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);
+    --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%);
 }

package/styles/theme/wrapper.less CHANGED Viewed

@@ -9,8 +9,8 @@
     position: relative;
     display: block;
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     appearance: none;
     border-radius: inherit;
@@ -51,7 +51,7 @@
     background: var(--tui-background-base);
     color: var(--tui-text-primary);
-    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
     &::after {
         .transition(color);

package/tokens/i18n.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Localized months names
  */
-export declare const TUI_MONTHS: import("@angular/core").InjectionToken<import("rxjs").Observable<[January: string, February: string, March: string, April: string, May: string, June: string, July: string, August: string, September: string, October: string, November: string, December: string]>>;
+export declare const TUI_MONTHS: import("@angular/core").InjectionToken<import("rxjs").Observable<readonly [January: string, February: string, March: string, April: string, May: string, June: string, July: string, August: string, September: string, October: string, November: string, December: string]>>;
 /**
  * i18n 'close' word
  */
@@ -17,8 +17,8 @@ export declare const TUI_DEFAULT_ERROR_MESSAGE: import("@angular/core").Injectio
 /**
  * spin i18n texts
  */
-export declare const TUI_SPIN_TEXTS: import("@angular/core").InjectionToken<import("rxjs").Observable<[previous: string, next: string]>>;
+export declare const TUI_SPIN_TEXTS: import("@angular/core").InjectionToken<import("rxjs").Observable<readonly [previous: string, next: string]>>;
 /**
  * calendars i18n texts
  */
-export declare const TUI_SHORT_WEEK_DAYS: import("@angular/core").InjectionToken<import("rxjs").Observable<[Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>>;
+export declare const TUI_SHORT_WEEK_DAYS: import("@angular/core").InjectionToken<import("rxjs").Observable<readonly [Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>>;