npm - @alfalab/core-components - Versions diffs - 46.0.0-beta.7 → 46.1.0-beta.0 - Mend

@alfalab/core-components 46.0.0-beta.7 → 46.1.0-beta.0

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 (816) hide show

package/button/esm/desktop/default.desktop.css CHANGED Viewed

@@ -4,8 +4,8 @@
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
     --color-light-accent-secondary-press: #353539;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-300-hover: rgba(5, 12, 41, 0.14);
     --color-light-neutral-translucent-300-press: rgba(5, 11, 44, 0.18);
@@ -71,7 +71,7 @@
     --button-transparent-disabled-color: var(--color-light-text-tertiary);
     /* loader */
-    --button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-primary-color: var(--color-light-neutral-translucent-1300-inverted);
     /* primary inverted */

package/button/esm/desktop/inverted.desktop.css CHANGED Viewed

@@ -4,7 +4,7 @@
     --color-light-accent-secondary-inverted: #f2f3f5;
     --color-light-accent-secondary-inverted-hover: #dcdde1;
     --color-light-accent-secondary-inverted-press: #d2d3d9;
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
@@ -99,7 +99,7 @@
     --button-inverted-transparent-disabled-color: var(--color-light-text-tertiary-inverted);
     /* loader inverted */
-    --button-spinner-inverted-primary-color: var(--color-light-neutral-1500);
+    --button-spinner-inverted-primary-color: var(--color-light-neutral-translucent-1300);
     /* border-radius mobile */

package/button/esm/index.js CHANGED Viewed

@@ -2,11 +2,11 @@ export { Button } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/esm';
 import '../../spinner/esm';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/button/esm/mobile/default.mobile.css CHANGED Viewed

@@ -4,9 +4,9 @@
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
     --color-light-accent-secondary-press: #353539;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-primary-press: rgba(4, 4, 19, 0.55);
@@ -124,7 +124,7 @@
     /* text mobile inverted */
     /* loader mobile */
-    --button-spinner-primary-mobile-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
 } .button__primary_4bwqi {
     color: var(--button-primary-mobile-color);
     background-color: var(--button-primary-mobile-base-bg-color)

package/button/esm/mobile/inverted.mobile.css CHANGED Viewed

@@ -2,7 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-secondary-inverted: #f2f3f5;
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -135,7 +135,7 @@
     --button-inverted-text-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
     /* loader mobile */
-    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-1500);
+    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
 } .button__primary_b78ux {
     color: var(--button-inverted-primary-mobile-color);
     background-color: var(--button-inverted-primary-mobile-base-bg-color)

package/button/mobile/default.mobile.css CHANGED Viewed

@@ -4,9 +4,9 @@
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
     --color-light-accent-secondary-press: #353539;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-primary-press: rgba(4, 4, 19, 0.55);
@@ -124,7 +124,7 @@
     /* text mobile inverted */
     /* loader mobile */
-    --button-spinner-primary-mobile-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
 } .button__primary_4bwqi {
     color: var(--button-primary-mobile-color);
     background-color: var(--button-primary-mobile-base-bg-color)

package/button/mobile/inverted.mobile.css CHANGED Viewed

@@ -2,7 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-secondary-inverted: #f2f3f5;
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -135,7 +135,7 @@
     --button-inverted-text-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
     /* loader mobile */
-    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-1500);
+    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
 } .button__primary_b78ux {
     color: var(--button-inverted-primary-mobile-color);
     background-color: var(--button-inverted-primary-mobile-base-bg-color)

package/button/modern/Component.responsive.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { ButtonDesktop } from './desktop/Component.desktop.js';
 import { ButtonMobile } from './mobile/Component.mobile.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/modern';
 import '../../spinner/modern';
 import '@alfalab/hooks';
-const Button = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const Button = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? ButtonDesktop : ButtonMobile;

package/button/modern/components/base-button/default.css CHANGED Viewed

@@ -5,8 +5,8 @@
     --color-light-accent-primary-hover: #e32a17;
     --color-light-accent-primary-press: #d72505;
     --color-light-bg-quaternary: #dcdee2;
-    --color-light-neutral-1500: #121213;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-hover: rgba(1, 1, 12, 0.63);
@@ -14,7 +14,7 @@
     --color-light-transparent-default: rgba(255, 255, 255, 0);
     --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
     --color-light-transparent-default-press: rgba(30, 43, 68, 0.08);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --color-light-bg-quaternary-alpha-30: rgba(220, 222, 226, 0.3);
     --color-light-bg-quaternary-shade-7: rgb(205, 206, 210);
@@ -58,18 +58,18 @@
     --button-tertiary-base-bg-color: var(--color-light-transparent-default);
     --button-tertiary-hover-bg-color: var(--color-light-transparent-default-hover);
     --button-tertiary-active-bg-color: var(--color-light-transparent-default-press);
-    --button-tertiary-hover-border-color: var(--color-light-neutral-1500);
+    --button-tertiary-hover-border-color: var(--color-light-neutral-translucent-1300);
     --button-tertiary-disabled-bg-color: var(--color-light-transparent-default);
-    --button-tertiary-base-border-color: var(--color-light-neutral-1500);
+    --button-tertiary-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-tertiary-color: var(--color-light-text-primary);
     /* outlined */
     --button-outlined-base-bg-color: var(--color-light-transparent-default);
     --button-outlined-hover-bg-color: var(--color-light-transparent-default-hover);
     --button-outlined-active-bg-color: var(--color-light-transparent-default-press);
-    --button-outlined-hover-border-color: var(--color-light-neutral-1500);
+    --button-outlined-hover-border-color: var(--color-light-neutral-translucent-1300);
     --button-outlined-disabled-bg-color: var(--color-light-transparent-default);
-    --button-outlined-base-border-color: var(--color-light-neutral-1500);
+    --button-outlined-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-outlined-color: var(--color-light-text-primary);
     /* ghost */
@@ -91,8 +91,8 @@
     --button-transparent-active-bg-color: var(--color-light-transparent-default-press);
     /* loader */
-    --button-spinner-static-color: var(--color-static-neutral-1500-inverted);
-    --button-spinner-default-color: var(--color-light-neutral-1500);
+    --button-spinner-static-color: var(--color-static-neutral-translucent-1300-inverted);
+    --button-spinner-default-color: var(--color-light-neutral-translucent-1300);
     /* primary inverted */

package/button/modern/components/base-button/inverted.css CHANGED Viewed

@@ -6,8 +6,8 @@
     --color-light-accent-primary-inverted: #f83a2a;
     --color-light-accent-primary-inverted-hover: #ff503e;
     --color-light-accent-primary-inverted-press: #fd624e;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-primary-inverted-hover: rgba(255, 255, 255, 0.7);
@@ -15,7 +15,7 @@
     --color-light-transparent-default: rgba(255, 255, 255, 0);
     --color-light-transparent-default-inverted-hover: rgba(214, 214, 229, 0.07);
     --color-light-transparent-default-inverted-press: rgba(225, 225, 248, 0.09);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -79,9 +79,13 @@
     --button-inverted-tertiary-active-bg-color: var(
         --color-light-transparent-default-inverted-press
     );
-    --button-inverted-tertiary-hover-border-color: var(--color-light-neutral-1500-inverted);
+    --button-inverted-tertiary-hover-border-color: var(
+        --color-light-neutral-translucent-1300-inverted
+    );
     --button-inverted-tertiary-disabled-bg-color: var(--color-light-transparent-default);
-    --button-inverted-tertiary-base-border-color: var(--color-light-neutral-1500-inverted);
+    --button-inverted-tertiary-base-border-color: var(
+        --color-light-neutral-translucent-1300-inverted
+    );
     --button-inverted-tertiary-color: var(--color-light-text-primary-inverted);
     /* outlined inverted */
@@ -92,9 +96,13 @@
     --button-inverted-outlined-active-bg-color: var(
         --color-light-transparent-default-inverted-press
     );
-    --button-inverted-outlined-hover-border-color: var(--color-light-neutral-1500-inverted);
+    --button-inverted-outlined-hover-border-color: var(
+        --color-light-neutral-translucent-1300-inverted
+    );
     --button-inverted-outlined-disabled-bg-color: var(--color-light-transparent-default);
-    --button-inverted-outlined-base-border-color: var(--color-light-neutral-1500-inverted);
+    --button-inverted-outlined-base-border-color: var(
+        --color-light-neutral-translucent-1300-inverted
+    );
     --button-inverted-outlined-color: var(--color-light-text-primary-inverted);
     /* ghost inverted */
@@ -120,8 +128,8 @@
     );
     /* loader inverted */
-    --button-spinner-inverted-static-color: var(--color-static-neutral-1500-inverted);
-    --button-spinner-inverted-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-inverted-static-color: var(--color-static-neutral-translucent-1300-inverted);
+    --button-spinner-inverted-color: var(--color-light-neutral-translucent-1300-inverted);
     /* border-radius mobile */

package/button/modern/desktop/default.desktop.css CHANGED Viewed

@@ -4,8 +4,8 @@
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
     --color-light-accent-secondary-press: #353539;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-300-hover: rgba(5, 12, 41, 0.14);
     --color-light-neutral-translucent-300-press: rgba(5, 11, 44, 0.18);
@@ -71,7 +71,7 @@
     --button-transparent-disabled-color: var(--color-light-text-tertiary);
     /* loader */
-    --button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-primary-color: var(--color-light-neutral-translucent-1300-inverted);
     /* primary inverted */

package/button/modern/desktop/inverted.desktop.css CHANGED Viewed

@@ -4,7 +4,7 @@
     --color-light-accent-secondary-inverted: #f2f3f5;
     --color-light-accent-secondary-inverted-hover: #dcdde1;
     --color-light-accent-secondary-inverted-press: #d2d3d9;
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
@@ -99,7 +99,7 @@
     --button-inverted-transparent-disabled-color: var(--color-light-text-tertiary-inverted);
     /* loader inverted */
-    --button-spinner-inverted-primary-color: var(--color-light-neutral-1500);
+    --button-spinner-inverted-primary-color: var(--color-light-neutral-translucent-1300);
     /* border-radius mobile */

package/button/modern/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
 export { Button } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/modern';
 import '../../spinner/modern';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/button/modern/mobile/default.mobile.css CHANGED Viewed

@@ -4,9 +4,9 @@
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
     --color-light-accent-secondary-press: #353539;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-primary-press: rgba(4, 4, 19, 0.55);
@@ -124,7 +124,7 @@
     /* text mobile inverted */
     /* loader mobile */
-    --button-spinner-primary-mobile-color: var(--color-light-neutral-1500-inverted);
+    --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
 } .button__primary_4bwqi {
     color: var(--button-primary-mobile-color);
     background-color: var(--button-primary-mobile-base-bg-color)

package/button/modern/mobile/inverted.mobile.css CHANGED Viewed

@@ -2,7 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-secondary-inverted: #f2f3f5;
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -135,7 +135,7 @@
     --button-inverted-text-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
     /* loader mobile */
-    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-1500);
+    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
 } .button__primary_b78ux {
     color: var(--button-inverted-primary-mobile-color);
     background-color: var(--button-inverted-primary-mobile-base-bg-color)

package/calendar/Component.responsive.js CHANGED Viewed

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });

package/calendar/components/days-table/index.css CHANGED Viewed

@@ -3,8 +3,8 @@
 } /* deprecated */ :root {
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-info: #2a77ef;
     --color-light-text-negative: #ec2d20;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
@@ -68,8 +68,8 @@
     --calendar-disabled-background: transparent;
     /* marker */
-    --calendar-marker-background: var(--color-light-neutral-1500);
-    --calendar-marker-selected-background: var(--color-light-neutral-1500-inverted);
+    --calendar-marker-background: var(--color-light-neutral-translucent-1300);
+    --calendar-marker-selected-background: var(--color-light-neutral-translucent-1300-inverted);
 } .calendar__daysTable_1pihi {
     border-collapse: separate;
     border-spacing: 0;

package/calendar/cssm/Component.responsive.js CHANGED Viewed

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });

package/calendar/cssm/components/days-table/index.module.css CHANGED Viewed

@@ -2,8 +2,8 @@
 } /* deprecated */ :root {
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-info: #2a77ef;
     --color-light-text-negative: #ec2d20;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
@@ -67,8 +67,8 @@
     --calendar-disabled-background: transparent;
     /* marker */
-    --calendar-marker-background: var(--color-light-neutral-1500);
-    --calendar-marker-selected-background: var(--color-light-neutral-1500-inverted);
+    --calendar-marker-background: var(--color-light-neutral-translucent-1300);
+    --calendar-marker-selected-background: var(--color-light-neutral-translucent-1300-inverted);
 } .daysTable {
     border-collapse: separate;
     border-spacing: 0;

package/calendar/esm/Component.responsive.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './desktop/Component.desktop.js';
 import 'react-merge-refs';
@@ -14,6 +13,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
+import '../../shared/esm';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -70,7 +70,7 @@ import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
 var CalendarResponsive = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
 });

package/calendar/esm/components/days-table/index.css CHANGED Viewed

@@ -3,8 +3,8 @@
 } /* deprecated */ :root {
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-info: #2a77ef;
     --color-light-text-negative: #ec2d20;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
@@ -68,8 +68,8 @@
     --calendar-disabled-background: transparent;
     /* marker */
-    --calendar-marker-background: var(--color-light-neutral-1500);
-    --calendar-marker-selected-background: var(--color-light-neutral-1500-inverted);
+    --calendar-marker-background: var(--color-light-neutral-translucent-1300);
+    --calendar-marker-selected-background: var(--color-light-neutral-translucent-1300-inverted);
 } .calendar__daysTable_1pihi {
     border-collapse: separate;
     border-spacing: 0;

package/calendar/esm/index.js CHANGED Viewed

@@ -2,7 +2,6 @@ export { CalendarResponsive as Calendar } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './components/calendar-mobile/Component.js';
 import 'react-merge-refs';
 import 'react-virtuoso';
@@ -14,6 +13,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';

package/calendar/modern/Component.responsive.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './desktop/Component.desktop.js';
 import 'react-merge-refs';
@@ -13,6 +12,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
+import '../../shared/modern';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -68,7 +68,7 @@ import 'date-fns/startOfQuarter';
 import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
-const CalendarResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const CalendarResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`);
     return isDesktop ? (React.createElement(CalendarDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarMobile, { ...restProps, ref: ref }));
 });

package/calendar/modern/components/days-table/index.css CHANGED Viewed

@@ -3,8 +3,8 @@
 } /* deprecated */ :root {
     --color-light-accent-secondary: #212124;
     --color-light-accent-secondary-hover: #2f2f32;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-info: #2a77ef;
     --color-light-text-negative: #ec2d20;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
@@ -68,8 +68,8 @@
     --calendar-disabled-background: transparent;
     /* marker */
-    --calendar-marker-background: var(--color-light-neutral-1500);
-    --calendar-marker-selected-background: var(--color-light-neutral-1500-inverted);
+    --calendar-marker-background: var(--color-light-neutral-translucent-1300);
+    --calendar-marker-selected-background: var(--color-light-neutral-translucent-1300-inverted);
 } .calendar__daysTable_1pihi {
     border-collapse: separate;
     border-spacing: 0;

package/calendar/modern/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 export { CalendarResponsive as Calendar } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './components/calendar-mobile/Component.js';
 import 'react-merge-refs';
 import 'react-virtuoso';
@@ -13,6 +12,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';

package/calendar-input/Component.responsive.js CHANGED Viewed

@@ -2,7 +2,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
-var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -16,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/calendar-input/cssm/Component.responsive.js CHANGED Viewed

@@ -2,7 +2,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
-var coreComponentsShared = require('../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -16,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],