npm - @alfalab/core-components - Versions diffs - 26.12.0 → 27.0.0-beta.0 - Mend

@alfalab/core-components 26.12.0 → 27.0.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 (726) hide show

package/button/esm/inverted.css CHANGED Viewed

@@ -1,11 +1,23 @@
 /* hash: myiuy */
 :root {
-    --color-dark-bg-accent: #ef3124;
-    --color-dark-bg-neutral: #485767;
+    --color-dark-bg-quaternary: #485767;
     --color-dark-text-primary: #fff;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-bg-accent: #ef3124;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
     --color-light-text-primary-inverted: #fff;
+    --color-static-text-primary-light: #fff;
+    --color-light-bg-accent-tint-15: rgb(241, 80, 69);
+    --color-light-bg-accent-tint-20: rgb(242, 90, 80);
+    --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
+    --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-light-bg-primary-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
+    --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
+    --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
+    --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
 }
 :root {
@@ -17,48 +29,52 @@
 }
 :root {
     /* primary */
-    --button-inverted-primary-base-bg-color: var(--color-dark-bg-accent);
-    --button-inverted-primary-hover-bg-color: rgb(241, 80, 69);
-    --button-inverted-primary-active-bg-color: rgb(203, 42, 31);
+    --button-inverted-primary-base-bg-color: var(--color-light-bg-accent);
+    --button-inverted-primary-hover-bg-color: var(--color-light-bg-accent-tint-15);
+    --button-inverted-primary-active-bg-color: var(--color-light-bg-accent-tint-20);
     --button-inverted-primary-disabled-bg-color: rgba(239, 49, 36, 0.3);
-    --button-inverted-primary-color: var(--color-light-text-primary-inverted);
-    --button-inverted-primary-disabled-color: var(--color-light-text-primary-inverted);
+    --button-inverted-primary-disabled-color: var(--color-static-text-primary-light-alpha-30);
+    --button-inverted-primary-color: var(--color-static-text-primary-light);
     /* secondary */
-    --button-inverted-secondary-base-bg-color: var(--color-dark-bg-neutral);
-    --button-inverted-secondary-hover-bg-color: rgb(99, 112, 126);
-    --button-inverted-secondary-active-bg-color: rgb(61, 74, 88);
-    --button-inverted-secondary-disabled-bg-color: rgba(72, 87, 103, 0.3);
+    --button-inverted-secondary-base-bg-color: var(--color-light-specialbg-component-inverted);
+    --button-inverted-secondary-hover-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-15
+    );
+    --button-inverted-secondary-active-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-20
+    );
+    --button-inverted-secondary-disabled-bg-color: var(--color-light-bg-primary-alpha-8);
     --button-inverted-secondary-base-border-color: transparent;
     --button-inverted-secondary-disabled-border-color: transparent;
-    --button-inverted-secondary-color: var(--color-dark-text-primary);
-    --button-inverted-secondary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-secondary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-secondary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* tertiary */
     --button-inverted-tertiary-base-bg-color: transparent;
-    --button-inverted-tertiary-hover-bg-color: rgba(255, 255, 255, 0.15);
-    --button-inverted-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-inverted-tertiary-hover-bg-color: var(--color-light-bg-primary-alpha-15);
+    --button-inverted-tertiary-active-bg-color: var(--color-light-bg-primary-alpha-20);
     --button-inverted-tertiary-disabled-bg-color: transparent;
-    --button-inverted-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
-    --button-inverted-tertiary-disabled-border-color: rgba(35, 53, 73, 0.3);
-    --button-inverted-tertiary-color: var(--color-dark-text-primary);
-    --button-inverted-tertiary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-tertiary-base-border-color: var(--color-light-border-underline);
+    --button-inverted-tertiary-disabled-border-color: var(--color-light-border-underline-alpha-30);
+    --button-inverted-tertiary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-tertiary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* outlined */
     --button-inverted-outlined-base-bg-color: transparent;
     --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15);
     --button-inverted-outlined-active-bg-color: rgba(0, 0, 0, 0.15);
     --button-inverted-outlined-disabled-bg-color: transparent;
-    --button-inverted-outlined-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-inverted-outlined-base-border-color: var(--color-light-border-underline-inverted);
     --button-inverted-outlined-disabled-border-color: rgba(35, 53, 73, 0.3);
     --button-inverted-outlined-color: var(--color-dark-text-primary);
     --button-inverted-outlined-disabled-color: rgba(255, 255, 255, 0.3);
     /* ghost */
     --button-inverted-ghost-base-color: var(--color-light-text-primary-inverted);
-    --button-inverted-ghost-hover-color: rgb(179, 179, 179);
-    --button-inverted-ghost-active-color: rgb(128, 128, 128);
-    --button-inverted-ghost-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-ghost-hover-color: var(--color-light-text-primary-inverted-shade-30);
+    --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-shade-50);
+    --button-inverted-ghost-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
 }
 .button__primary_ol9ge {
     color: var(--button-inverted-primary-color);
@@ -105,7 +121,7 @@
     }
 .button__filled_ol9ge {
     color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-neutral)
+    background-color: var(--color-dark-bg-quaternary)
 }
 .button__filled_ol9ge:hover {
         background-color: rgb(99, 112, 126);
@@ -129,11 +145,11 @@
     background-color: transparent
 }
 .button__link_ol9ge:hover {
-        background-color: var(--color-light-specialbg-component-inverted);
+        background-color: var(--color-light-bg-primary-alpha-15);
     }
 .button__link_ol9ge:active {
         /* TODO: какой цвет? */
-        background-color: rgba(179, 179, 179, 0.15);
+        background-color: var(--color-light-bg-primary-alpha-20);
     }
 .button__ghost_ol9ge {
     color: var(--button-inverted-ghost-base-color)
@@ -186,7 +202,7 @@
     }
 .button__component_ol9ge:disabled.button__filled_ol9ge.button__loading_ol9ge {
             color: var(--color-dark-text-primary);
-            background-color: var(--color-dark-bg-neutral);
+            background-color: var(--color-dark-bg-quaternary);
             border-color: transparent;
         }
 .button__component_ol9ge:disabled.button__transparent_ol9ge {
@@ -198,7 +214,7 @@
             background-color: rgba(255, 255, 255, 0.1);
         }
 .button__component_ol9ge:disabled.button__link_ol9ge {
-        color: rgba(255, 255, 255, 0.3);
+        color: var(--color-light-text-primary-inverted-alpha-30);
         background-color: transparent
     }
 .button__component_ol9ge:disabled.button__link_ol9ge.button__loading_ol9ge {

package/button/inverted.css CHANGED Viewed

@@ -1,11 +1,23 @@
 /* hash: myiuy */
 :root {
-    --color-dark-bg-accent: #ef3124;
-    --color-dark-bg-neutral: #485767;
+    --color-dark-bg-quaternary: #485767;
     --color-dark-text-primary: #fff;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-bg-accent: #ef3124;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
     --color-light-text-primary-inverted: #fff;
+    --color-static-text-primary-light: #fff;
+    --color-light-bg-accent-tint-15: rgb(241, 80, 69);
+    --color-light-bg-accent-tint-20: rgb(242, 90, 80);
+    --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
+    --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-light-bg-primary-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
+    --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
+    --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
+    --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
 }
 :root {
@@ -17,48 +29,52 @@
 }
 :root {
     /* primary */
-    --button-inverted-primary-base-bg-color: var(--color-dark-bg-accent);
-    --button-inverted-primary-hover-bg-color: rgb(241, 80, 69);
-    --button-inverted-primary-active-bg-color: rgb(203, 42, 31);
+    --button-inverted-primary-base-bg-color: var(--color-light-bg-accent);
+    --button-inverted-primary-hover-bg-color: var(--color-light-bg-accent-tint-15);
+    --button-inverted-primary-active-bg-color: var(--color-light-bg-accent-tint-20);
     --button-inverted-primary-disabled-bg-color: rgba(239, 49, 36, 0.3);
-    --button-inverted-primary-color: var(--color-light-text-primary-inverted);
-    --button-inverted-primary-disabled-color: var(--color-light-text-primary-inverted);
+    --button-inverted-primary-disabled-color: var(--color-static-text-primary-light-alpha-30);
+    --button-inverted-primary-color: var(--color-static-text-primary-light);
     /* secondary */
-    --button-inverted-secondary-base-bg-color: var(--color-dark-bg-neutral);
-    --button-inverted-secondary-hover-bg-color: rgb(99, 112, 126);
-    --button-inverted-secondary-active-bg-color: rgb(61, 74, 88);
-    --button-inverted-secondary-disabled-bg-color: rgba(72, 87, 103, 0.3);
+    --button-inverted-secondary-base-bg-color: var(--color-light-specialbg-component-inverted);
+    --button-inverted-secondary-hover-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-15
+    );
+    --button-inverted-secondary-active-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-20
+    );
+    --button-inverted-secondary-disabled-bg-color: var(--color-light-bg-primary-alpha-8);
     --button-inverted-secondary-base-border-color: transparent;
     --button-inverted-secondary-disabled-border-color: transparent;
-    --button-inverted-secondary-color: var(--color-dark-text-primary);
-    --button-inverted-secondary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-secondary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-secondary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* tertiary */
     --button-inverted-tertiary-base-bg-color: transparent;
-    --button-inverted-tertiary-hover-bg-color: rgba(255, 255, 255, 0.15);
-    --button-inverted-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-inverted-tertiary-hover-bg-color: var(--color-light-bg-primary-alpha-15);
+    --button-inverted-tertiary-active-bg-color: var(--color-light-bg-primary-alpha-20);
     --button-inverted-tertiary-disabled-bg-color: transparent;
-    --button-inverted-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
-    --button-inverted-tertiary-disabled-border-color: rgba(35, 53, 73, 0.3);
-    --button-inverted-tertiary-color: var(--color-dark-text-primary);
-    --button-inverted-tertiary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-tertiary-base-border-color: var(--color-light-border-underline);
+    --button-inverted-tertiary-disabled-border-color: var(--color-light-border-underline-alpha-30);
+    --button-inverted-tertiary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-tertiary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* outlined */
     --button-inverted-outlined-base-bg-color: transparent;
     --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15);
     --button-inverted-outlined-active-bg-color: rgba(0, 0, 0, 0.15);
     --button-inverted-outlined-disabled-bg-color: transparent;
-    --button-inverted-outlined-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-inverted-outlined-base-border-color: var(--color-light-border-underline-inverted);
     --button-inverted-outlined-disabled-border-color: rgba(35, 53, 73, 0.3);
     --button-inverted-outlined-color: var(--color-dark-text-primary);
     --button-inverted-outlined-disabled-color: rgba(255, 255, 255, 0.3);
     /* ghost */
     --button-inverted-ghost-base-color: var(--color-light-text-primary-inverted);
-    --button-inverted-ghost-hover-color: rgb(179, 179, 179);
-    --button-inverted-ghost-active-color: rgb(128, 128, 128);
-    --button-inverted-ghost-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-ghost-hover-color: var(--color-light-text-primary-inverted-shade-30);
+    --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-shade-50);
+    --button-inverted-ghost-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
 }
 .button__primary_ol9ge {
     color: var(--button-inverted-primary-color);
@@ -105,7 +121,7 @@
     }
 .button__filled_ol9ge {
     color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-neutral)
+    background-color: var(--color-dark-bg-quaternary)
 }
 .button__filled_ol9ge:hover {
         background-color: rgb(99, 112, 126);
@@ -129,11 +145,11 @@
     background-color: transparent
 }
 .button__link_ol9ge:hover {
-        background-color: var(--color-light-specialbg-component-inverted);
+        background-color: var(--color-light-bg-primary-alpha-15);
     }
 .button__link_ol9ge:active {
         /* TODO: какой цвет? */
-        background-color: rgba(179, 179, 179, 0.15);
+        background-color: var(--color-light-bg-primary-alpha-20);
     }
 .button__ghost_ol9ge {
     color: var(--button-inverted-ghost-base-color)
@@ -186,7 +202,7 @@
     }
 .button__component_ol9ge:disabled.button__filled_ol9ge.button__loading_ol9ge {
             color: var(--color-dark-text-primary);
-            background-color: var(--color-dark-bg-neutral);
+            background-color: var(--color-dark-bg-quaternary);
             border-color: transparent;
         }
 .button__component_ol9ge:disabled.button__transparent_ol9ge {
@@ -198,7 +214,7 @@
             background-color: rgba(255, 255, 255, 0.1);
         }
 .button__component_ol9ge:disabled.button__link_ol9ge {
-        color: rgba(255, 255, 255, 0.3);
+        color: var(--color-light-text-primary-inverted-alpha-30);
         background-color: transparent
     }
 .button__component_ol9ge:disabled.button__link_ol9ge.button__loading_ol9ge {

package/button/modern/default.css CHANGED Viewed

@@ -1,23 +1,27 @@
 /* hash: 14jtk */
 :root {
     --color-light-bg-accent: #ef3124;
-    --color-light-bg-neutral: #dbdee1;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-bg-quaternary: #dbdee1;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-text-primary: #0b1f35;
-    --color-light-text-primary-inverted: #fff;
+    --color-static-text-primary-light: #fff;
     --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-bg-accent-shade-7: rgb(222, 46, 33);
     --color-light-bg-accent-shade-15: rgb(203, 42, 31);
-    --color-light-bg-neutral-alpha-30: rgba(219, 222, 225, 0.3);
-    --color-light-bg-neutral-shade-7: rgb(204, 206, 209);
-    --color-light-bg-neutral-shade-15: rgb(186, 189, 191);
     --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
+    --color-light-bg-primary-inverted-alpha-5: rgba(11, 31, 53, 0.05);
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
     --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
     --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
-    --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
+    --color-light-bg-quaternary-alpha-30: rgba(219, 222, 225, 0.3);
+    --color-light-bg-quaternary-shade-7: rgb(204, 206, 209);
+    --color-light-bg-quaternary-shade-15: rgb(186, 189, 191);
+    --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
+    --color-light-specialbg-component-shade-15: rgba(9, 26, 45, 0.2095);
     --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-text-primary-tint-30: rgb(84, 98, 114);
     --color-light-text-primary-tint-50: rgb(133, 143, 154);
@@ -36,14 +40,14 @@
     --button-primary-hover-bg-color: var(--color-light-bg-accent-shade-7);
     --button-primary-active-bg-color: var(--color-light-bg-accent-shade-15);
     --button-primary-disabled-bg-color: var(--color-light-bg-accent-alpha-30);
-    --button-primary-color: var(--color-light-text-primary-inverted);
-    --button-primary-disabled-color: var(--color-light-text-primary-inverted);
+    --button-primary-color: var(--color-static-text-primary-light);
+    --button-primary-disabled-color: var(--color-static-text-primary-light);
     /* secondary */
-    --button-secondary-base-bg-color: var(--color-light-bg-neutral);
-    --button-secondary-hover-bg-color: var(--color-light-bg-neutral-shade-7);
-    --button-secondary-active-bg-color: var(--color-light-bg-neutral-shade-15);
-    --button-secondary-disabled-bg-color: var(--color-light-bg-neutral-alpha-30);
+    --button-secondary-base-bg-color: var(--color-light-specialbg-component);
+    --button-secondary-hover-bg-color: var(--color-light-specialbg-component-shade-7);
+    --button-secondary-active-bg-color: var(--color-light-specialbg-component-shade-15);
+    --button-secondary-disabled-bg-color: var(--color-light-bg-primary-inverted-alpha-5);
     --button-secondary-base-border-color: transparent;
     --button-secondary-disabled-border-color: transparent;
     --button-secondary-color: var(--color-light-text-primary);
@@ -51,11 +55,11 @@
     /* tertiary */
     --button-tertiary-base-bg-color: transparent;
-    --button-tertiary-hover-bg-color: rgba(0, 0, 0, 0.07);
-    --button-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-tertiary-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-7);
+    --button-tertiary-active-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
     --button-tertiary-disabled-bg-color: transparent;
-    --button-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
-    --button-tertiary-disabled-border-color: var(--color-light-border-tertiary-inverted-alpha-30);
+    --button-tertiary-base-border-color: var(--color-light-border-underline-inverted);
+    --button-tertiary-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30);
     --button-tertiary-color: var(--color-light-text-primary);
     --button-tertiary-disabled-color: var(--color-light-text-primary-alpha-30);
@@ -64,8 +68,8 @@
     --button-outlined-hover-bg-color: rgba(0, 0, 0, 0.07);
     --button-outlined-active-bg-color: rgba(0, 0, 0, 0.15);
     --button-outlined-disabled-bg-color: transparent;
-    --button-outlined-base-border-color: var(--color-light-border-tertiary-inverted);
-    --button-outlined-disabled-border-color: var(--color-light-border-tertiary-inverted-alpha-30);
+    --button-outlined-base-border-color: var(--color-light-border-underline-inverted);
+    --button-outlined-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30);
     --button-outlined-color: var(--color-light-text-primary);
     --button-outlined-disabled-color: var(--color-light-text-primary-alpha-30);
@@ -120,13 +124,13 @@
     }
 .button__filled_154v8 {
     color: var(--color-light-text-primary);
-    background-color: var(--color-light-bg-neutral)
+    background-color: var(--color-light-bg-quaternary)
 }
 .button__filled_154v8:hover {
-        background-color: var(--color-light-bg-neutral-shade-7);
+        background-color: var(--color-light-bg-quaternary-shade-7);
     }
 .button__filled_154v8:active {
-        background-color: var(--color-light-bg-neutral-shade-15);
+        background-color: var(--color-light-bg-quaternary-shade-15);
     }
 .button__transparent_154v8 {
     color: var(--color-light-text-primary);
@@ -143,10 +147,10 @@
     background-color: transparent
 }
 .button__link_154v8:hover {
-        background-color: var(--color-light-specialbg-component);
+        background-color: var(--color-light-specialbg-component-shade-7);
     }
 .button__link_154v8:active {
-        background-color: var(--color-light-specialbg-component-shade-7);
+        background-color: var(--color-light-specialbg-component-shade-15);
     }
 .button__ghost_154v8 {
     color: var(--button-ghost-base-color)
@@ -195,11 +199,11 @@
         }
 .button__component_154v8:disabled.button__filled_154v8 {
         color: var(--color-light-text-primary-alpha-30);
-        background-color: var(--color-light-bg-neutral-alpha-30)
+        background-color: var(--color-light-bg-quaternary-alpha-30)
     }
 .button__component_154v8:disabled.button__filled_154v8.button__loading_154v8 {
             color: var(--color-light-text-primary);
-            background-color: var(--color-light-bg-neutral);
+            background-color: var(--color-light-bg-quaternary);
         }
 .button__component_154v8:disabled.button__transparent_154v8 {
         color: var(--color-light-text-primary-alpha-30);

package/button/modern/inverted.css CHANGED Viewed

@@ -1,11 +1,23 @@
 /* hash: myiuy */
 :root {
-    --color-dark-bg-accent: #ef3124;
-    --color-dark-bg-neutral: #485767;
+    --color-dark-bg-quaternary: #485767;
     --color-dark-text-primary: #fff;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-bg-accent: #ef3124;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
     --color-light-text-primary-inverted: #fff;
+    --color-static-text-primary-light: #fff;
+    --color-light-bg-accent-tint-15: rgb(241, 80, 69);
+    --color-light-bg-accent-tint-20: rgb(242, 90, 80);
+    --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
+    --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-light-bg-primary-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
+    --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
+    --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
+    --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
 }
 :root {
@@ -17,48 +29,52 @@
 }
 :root {
     /* primary */
-    --button-inverted-primary-base-bg-color: var(--color-dark-bg-accent);
-    --button-inverted-primary-hover-bg-color: rgb(241, 80, 69);
-    --button-inverted-primary-active-bg-color: rgb(203, 42, 31);
+    --button-inverted-primary-base-bg-color: var(--color-light-bg-accent);
+    --button-inverted-primary-hover-bg-color: var(--color-light-bg-accent-tint-15);
+    --button-inverted-primary-active-bg-color: var(--color-light-bg-accent-tint-20);
     --button-inverted-primary-disabled-bg-color: rgba(239, 49, 36, 0.3);
-    --button-inverted-primary-color: var(--color-light-text-primary-inverted);
-    --button-inverted-primary-disabled-color: var(--color-light-text-primary-inverted);
+    --button-inverted-primary-disabled-color: var(--color-static-text-primary-light-alpha-30);
+    --button-inverted-primary-color: var(--color-static-text-primary-light);
     /* secondary */
-    --button-inverted-secondary-base-bg-color: var(--color-dark-bg-neutral);
-    --button-inverted-secondary-hover-bg-color: rgb(99, 112, 126);
-    --button-inverted-secondary-active-bg-color: rgb(61, 74, 88);
-    --button-inverted-secondary-disabled-bg-color: rgba(72, 87, 103, 0.3);
+    --button-inverted-secondary-base-bg-color: var(--color-light-specialbg-component-inverted);
+    --button-inverted-secondary-hover-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-15
+    );
+    --button-inverted-secondary-active-bg-color: var(
+        --color-light-specialbg-component-inverted-tint-20
+    );
+    --button-inverted-secondary-disabled-bg-color: var(--color-light-bg-primary-alpha-8);
     --button-inverted-secondary-base-border-color: transparent;
     --button-inverted-secondary-disabled-border-color: transparent;
-    --button-inverted-secondary-color: var(--color-dark-text-primary);
-    --button-inverted-secondary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-secondary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-secondary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* tertiary */
     --button-inverted-tertiary-base-bg-color: transparent;
-    --button-inverted-tertiary-hover-bg-color: rgba(255, 255, 255, 0.15);
-    --button-inverted-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-inverted-tertiary-hover-bg-color: var(--color-light-bg-primary-alpha-15);
+    --button-inverted-tertiary-active-bg-color: var(--color-light-bg-primary-alpha-20);
     --button-inverted-tertiary-disabled-bg-color: transparent;
-    --button-inverted-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
-    --button-inverted-tertiary-disabled-border-color: rgba(35, 53, 73, 0.3);
-    --button-inverted-tertiary-color: var(--color-dark-text-primary);
-    --button-inverted-tertiary-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-tertiary-base-border-color: var(--color-light-border-underline);
+    --button-inverted-tertiary-disabled-border-color: var(--color-light-border-underline-alpha-30);
+    --button-inverted-tertiary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-tertiary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
     /* outlined */
     --button-inverted-outlined-base-bg-color: transparent;
     --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15);
     --button-inverted-outlined-active-bg-color: rgba(0, 0, 0, 0.15);
     --button-inverted-outlined-disabled-bg-color: transparent;
-    --button-inverted-outlined-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-inverted-outlined-base-border-color: var(--color-light-border-underline-inverted);
     --button-inverted-outlined-disabled-border-color: rgba(35, 53, 73, 0.3);
     --button-inverted-outlined-color: var(--color-dark-text-primary);
     --button-inverted-outlined-disabled-color: rgba(255, 255, 255, 0.3);
     /* ghost */
     --button-inverted-ghost-base-color: var(--color-light-text-primary-inverted);
-    --button-inverted-ghost-hover-color: rgb(179, 179, 179);
-    --button-inverted-ghost-active-color: rgb(128, 128, 128);
-    --button-inverted-ghost-disabled-color: rgba(255, 255, 255, 0.3);
+    --button-inverted-ghost-hover-color: var(--color-light-text-primary-inverted-shade-30);
+    --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-shade-50);
+    --button-inverted-ghost-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
 }
 .button__primary_ol9ge {
     color: var(--button-inverted-primary-color);
@@ -105,7 +121,7 @@
     }
 .button__filled_ol9ge {
     color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-neutral)
+    background-color: var(--color-dark-bg-quaternary)
 }
 .button__filled_ol9ge:hover {
         background-color: rgb(99, 112, 126);
@@ -129,11 +145,11 @@
     background-color: transparent
 }
 .button__link_ol9ge:hover {
-        background-color: var(--color-light-specialbg-component-inverted);
+        background-color: var(--color-light-bg-primary-alpha-15);
     }
 .button__link_ol9ge:active {
         /* TODO: какой цвет? */
-        background-color: rgba(179, 179, 179, 0.15);
+        background-color: var(--color-light-bg-primary-alpha-20);
     }
 .button__ghost_ol9ge {
     color: var(--button-inverted-ghost-base-color)
@@ -186,7 +202,7 @@
     }
 .button__component_ol9ge:disabled.button__filled_ol9ge.button__loading_ol9ge {
             color: var(--color-dark-text-primary);
-            background-color: var(--color-dark-bg-neutral);
+            background-color: var(--color-dark-bg-quaternary);
             border-color: transparent;
         }
 .button__component_ol9ge:disabled.button__transparent_ol9ge {
@@ -198,7 +214,7 @@
             background-color: rgba(255, 255, 255, 0.1);
         }
 .button__component_ol9ge:disabled.button__link_ol9ge {
-        color: rgba(255, 255, 255, 0.3);
+        color: var(--color-light-text-primary-inverted-alpha-30);
         background-color: transparent
     }
 .button__component_ol9ge:disabled.button__link_ol9ge.button__loading_ol9ge {

package/calendar/Component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var tslib_es6 = require('./tslib.es6-143012f2.js');
+var tslib_es6 = require('./tslib.es6-9016aae0.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfDay = require('date-fns/startOfDay');

package/calendar/components/days-table/Component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var tslib_es6 = require('../../tslib.es6-143012f2.js');
+var tslib_es6 = require('../../tslib.es6-9016aae0.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');

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

@@ -3,9 +3,9 @@
     --color-static-graphic-solitude: #e8f2fe;
 }
 :root {
-    --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary: #0b1f35;
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
     --color-light-text-link: #007aff;
@@ -45,7 +45,7 @@
     /* highlighted */
     --calendar-highlighted-color: var(--color-light-text-primary);
-    --calendar-highlighted-background: var(--color-light-graphic-neutral);
+    --calendar-highlighted-background: var(--color-light-graphic-quaternary);
     /* range */
     --calendar-range-color: var(--color-light-text-primary);

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-require('../../tslib.es6-143012f2.js');
+require('../../tslib.es6-9016aae0.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/month-year-header/Component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-require('../../tslib.es6-143012f2.js');
+require('../../tslib.es6-9016aae0.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/month-year-header/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-require('../../tslib.es6-143012f2.js');
+require('../../tslib.es6-9016aae0.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/months-table/Component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var tslib_es6 = require('../../tslib.es6-143012f2.js');
+var tslib_es6 = require('../../tslib.es6-9016aae0.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/months-table/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-require('../../tslib.es6-143012f2.js');
+require('../../tslib.es6-9016aae0.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/select-button/Component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var tslib_es6 = require('../../tslib.es6-143012f2.js');
+var tslib_es6 = require('../../tslib.es6-9016aae0.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');