@alfalab/core-components 45.3.0-beta.1 → 45.4.0

package/button/cssm/desktop/inverted.desktop.module.css

@@ -38,8 +38,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -74,14 +78,25 @@
     --button-inverted-tertiary-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* outlined inverted */
+    --button-inverted-outlined-disabled-border-color: var(
+        --color-light-neutral-translucent-500-inverted
+    );
+    --button-inverted-outlined-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* ghost inverted */
     --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-press);
     --button-inverted-ghost-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* text inverted */
+    --button-inverted-text-active-color: var(--color-light-text-primary-inverted-press);
+    --button-inverted-text-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* link inverted */
     --button-inverted-link-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* transparent inverted */
+    --button-inverted-transparent-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* loader inverted */
     --button-spinner-inverted-primary-color: var(--color-light-neutral-1500);
 
@@ -99,14 +114,26 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 } .primary {
     color: var(--button-inverted-primary-color);
@@ -125,6 +152,8 @@
         background-color: var(--button-inverted-secondary-hover-bg-color);
     } .secondary:active {
         background-color: var(--button-inverted-secondary-active-bg-color);
+    } .text:active {
+        color: var(--button-inverted-text-active-color);
     } .ghost:active {
         color: var(--button-inverted-ghost-active-color);
     } .component[disabled].primary {
@@ -135,11 +164,18 @@
         } .component[disabled].secondary {
         color: var(--button-inverted-secondary-disabled-color);
         background-color: var(--button-inverted-secondary-disabled-bg-color);
+    } .component[disabled].outlined {
+        color: var(--button-inverted-outlined-disabled-color);
+        border-color: var(--button-inverted-outlined-disabled-border-color);
     } .component[disabled].tertiary {
         color: var(--button-inverted-tertiary-disabled-color);
         border-color: var(--button-inverted-tertiary-disabled-border-color);
+    } .component[disabled].transparent {
+        color: var(--button-inverted-transparent-disabled-color);
     } .component[disabled].link {
         color: var(--button-inverted-link-disabled-color);
+    } .component[disabled].text {
+        color: var(--button-inverted-text-disabled-color);
     } .component[disabled].ghost {
         color: var(--button-inverted-ghost-disabled-color);
     }

package/button/cssm/mobile/default.mobile.module.css

@@ -40,8 +40,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -56,8 +60,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -86,17 +94,34 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+    --button-outlined-mobile-disabled-border-color: var(--color-light-neutral-translucent-500);
+    --button-outlined-mobile-disabled-color: var(--color-light-text-tertiary);
+
+    /* outlined inverted mobile */
+
     /* link mobile */
     --button-link-mobile-disabled-color: var(--color-light-text-tertiary);
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+    --button-transparent-mobile-disabled-color: var(--color-light-text-tertiary);
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
     --button-ghost-mobile-active-color: var(--color-light-text-primary-press);
     --button-ghost-mobile-disabled-color: var(--color-light-text-tertiary);
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+    --button-text-mobile-active-color: var(--color-light-text-primary-press);
+    --button-text-mobile-disabled-color: var(--color-light-text-tertiary);
+
+    /* text mobile inverted */
+
     /* loader mobile */
     --button-spinner-primary-mobile-color: var(--color-light-neutral-1500-inverted);
 } .primary {
@@ -114,6 +139,8 @@
     background-color: var(--button-secondary-mobile-base-bg-color)
 } .secondary:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
+    } .text:active {
+        color: var(--button-text-mobile-active-color);
     } .ghost:active {
         color: var(--button-ghost-mobile-active-color);
     } .component[disabled].primary {
@@ -124,11 +151,18 @@
         } .component[disabled].secondary {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
+    } .component[disabled].outlined {
+        color: var(--button-outlined-mobile-disabled-color);
+        border-color: var(--button-outlined-mobile-disabled-border-color);
     } .component[disabled].tertiary {
         color: var(--button-tertiary-mobile-disabled-color);
         border-color: var(--button-tertiary-mobile-disabled-border-color);
+    } .component[disabled].transparent {
+        color: var(--button-transparent-mobile-disabled-color);
     } .component[disabled].link {
         color: var(--button-link-mobile-disabled-color);
+    } .component[disabled].text {
+        color: var(--button-text-mobile-disabled-color);
     } .component[disabled].ghost {
         color: var(--button-ghost-mobile-disabled-color);
     }

package/button/cssm/mobile/inverted.mobile.module.css

@@ -35,8 +35,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -51,8 +55,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -95,17 +103,36 @@
     );
     --button-inverted-tertiary-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+    --button-inverted-outlined-mobile-disabled-border-color: var(
+        --color-light-neutral-translucent-500-inverted
+    );
+    --button-inverted-outlined-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* link mobile */
 
     /* link inverted mobile */
     --button-inverted-link-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+    --button-inverted-transparent-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
     --button-inverted-ghost-mobile-active-color: var(--color-light-text-primary-inverted-press);
     --button-inverted-ghost-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* text mobile */
+
+    /* text mobile inverted */
+    --button-inverted-text-mobile-active-color: var(--color-light-text-primary-inverted-press);
+    --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);
 } .primary {
@@ -123,6 +150,8 @@
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
 } .secondary:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+    } .text:active {
+        color: var(--button-inverted-text-mobile-active-color);
     } .ghost:active {
         color: var(--button-inverted-ghost-mobile-active-color);
     } .component[disabled].primary {
@@ -133,11 +162,18 @@
         } .component[disabled].secondary {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
+    } .component[disabled].outlined {
+        color: var(--button-inverted-outlined-mobile-disabled-color);
+        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
     } .component[disabled].tertiary {
         color: var(--button-inverted-tertiary-mobile-disabled-color);
         border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
+    } .component[disabled].transparent {
+        color: var(--button-inverted-transparent-mobile-disabled-color);
     } .component[disabled].link {
         color: var(--button-inverted-link-mobile-disabled-color);
+    } .component[disabled].text {
+        color: var(--button-inverted-text-mobile-disabled-color);
     } .component[disabled].ghost {
         color: var(--button-inverted-ghost-mobile-disabled-color);
     }

package/button/cssm/mobile/mobile.module.css

@@ -33,8 +33,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -49,8 +53,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -73,14 +81,26 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 } .size-32 {
     border-radius: var(--button-xxs-size-mobile-border-radius);

package/button/cssm/typings.d.ts

@@ -12,7 +12,7 @@ type ComponentProps = {
      * Тип кнопки
      * @default secondary
      */
-    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    view?: 'accent' | 'primary' | 'secondary' | 'outlined' | 'transparent' | 'text' | 'tertiary' | 'filled' | 'link' | 'ghost';
     /**
      * Форма кнопки
      * @default rectangular

package/button/cssm/vars.css

@@ -30,8 +30,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -46,8 +50,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -64,13 +72,25 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 }

package/button/desktop/Component.desktop.js

@@ -8,13 +8,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var defaultColors = {"primary":"button__primary_n4zdd","loader":"button__loader_n4zdd","secondary":"button__secondary_n4zdd","ghost":"button__ghost_n4zdd","component":"button__component_n4zdd","loading":"button__loading_n4zdd","tertiary":"button__tertiary_n4zdd","link":"button__link_n4zdd"};
+var defaultColors = {"primary":"button__primary_n4zdd","loader":"button__loader_n4zdd","secondary":"button__secondary_n4zdd","text":"button__text_n4zdd","ghost":"button__ghost_n4zdd","component":"button__component_n4zdd","loading":"button__loading_n4zdd","outlined":"button__outlined_n4zdd","tertiary":"button__tertiary_n4zdd","transparent":"button__transparent_n4zdd","link":"button__link_n4zdd"};
 require('./default.desktop.css');
 
 var styles = {"size-32":"button__size-32_137fp","size-40":"button__size-40_137fp","size-48":"button__size-48_137fp","size-56":"button__size-56_137fp","size-64":"button__size-64_137fp","size-72":"button__size-72_137fp"};
 require('./desktop.css');
 
-var invertedColors = {"primary":"button__primary_6ljbd","loader":"button__loader_6ljbd","secondary":"button__secondary_6ljbd","ghost":"button__ghost_6ljbd","component":"button__component_6ljbd","loading":"button__loading_6ljbd","tertiary":"button__tertiary_6ljbd","link":"button__link_6ljbd"};
+var invertedColors = {"primary":"button__primary_6ljbd","loader":"button__loader_6ljbd","secondary":"button__secondary_6ljbd","text":"button__text_6ljbd","ghost":"button__ghost_6ljbd","component":"button__component_6ljbd","loading":"button__loading_6ljbd","outlined":"button__outlined_6ljbd","tertiary":"button__tertiary_6ljbd","transparent":"button__transparent_6ljbd","link":"button__link_6ljbd"};
 require('./inverted.desktop.css');
 
 var colorStyles = {

package/button/desktop/default.desktop.css

@@ -53,14 +53,23 @@
     --button-tertiary-disabled-color: var(--color-light-text-tertiary);
 
     /* outlined */
+    --button-outlined-disabled-border-color: var(--color-light-neutral-translucent-500);
+    --button-outlined-disabled-color: var(--color-light-text-tertiary);
 
     /* ghost */
     --button-ghost-active-color: var(--color-light-text-primary-press);
     --button-ghost-disabled-color: var(--color-light-text-tertiary);
 
+    /* text */
+    --button-text-active-color: var(--color-light-text-primary-press);
+    --button-text-disabled-color: var(--color-light-text-tertiary);
+
     /* link */
     --button-link-disabled-color: var(--color-light-text-tertiary);
 
+    /* transparent */
+    --button-transparent-disabled-color: var(--color-light-text-tertiary);
+
     /* loader */
     --button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
 
@@ -76,8 +85,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -94,14 +107,26 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 } .button__primary_n4zdd {
     color: var(--button-primary-color);
@@ -120,6 +145,8 @@
         background-color: var(--button-secondary-hover-bg-color);
     } .button__secondary_n4zdd:active {
         background-color: var(--button-secondary-active-bg-color);
+    } .button__text_n4zdd:active {
+        color: var(--button-text-active-color);
     } .button__ghost_n4zdd:active {
         color: var(--button-ghost-active-color);
     } .button__component_n4zdd[disabled].button__primary_n4zdd {
@@ -130,11 +157,18 @@
         } .button__component_n4zdd[disabled].button__secondary_n4zdd {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
+    } .button__component_n4zdd[disabled].button__outlined_n4zdd {
+        color: var(--button-outlined-disabled-color);
+        border-color: var(--button-outlined-disabled-border-color);
     } .button__component_n4zdd[disabled].button__tertiary_n4zdd {
         color: var(--button-tertiary-disabled-color);
         border-color: var(--button-tertiary-disabled-border-color);
+    } .button__component_n4zdd[disabled].button__transparent_n4zdd {
+        color: var(--button-transparent-disabled-color);
     } .button__component_n4zdd[disabled].button__link_n4zdd {
         color: var(--button-link-disabled-color);
+    } .button__component_n4zdd[disabled].button__text_n4zdd {
+        color: var(--button-text-disabled-color);
     } .button__component_n4zdd[disabled].button__ghost_n4zdd {
         color: var(--button-ghost-disabled-color);
     }

package/button/desktop/desktop.css

@@ -39,8 +39,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -55,8 +59,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -73,14 +81,26 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 } .button__size-32_137fp {
     border-radius: var(--button-xxs-size-border-radius);

package/button/desktop/inverted.desktop.css

@@ -39,8 +39,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -75,14 +79,25 @@
     --button-inverted-tertiary-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* outlined inverted */
+    --button-inverted-outlined-disabled-border-color: var(
+        --color-light-neutral-translucent-500-inverted
+    );
+    --button-inverted-outlined-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* ghost inverted */
     --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-press);
     --button-inverted-ghost-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* text inverted */
+    --button-inverted-text-active-color: var(--color-light-text-primary-inverted-press);
+    --button-inverted-text-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* link inverted */
     --button-inverted-link-disabled-color: var(--color-light-text-tertiary-inverted);
 
+    /* transparent inverted */
+    --button-inverted-transparent-disabled-color: var(--color-light-text-tertiary-inverted);
+
     /* loader inverted */
     --button-spinner-inverted-primary-color: var(--color-light-neutral-1500);
 
@@ -100,14 +115,26 @@
 
     /* tertiary inverted mobile */
 
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
     /* link mobile */
 
     /* link inverted mobile */
 
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
     /* ghost mobile */
 
     /* ghost mobile inverted */
 
+    /* text mobile */
+
+    /* text mobile inverted */
+
     /* loader mobile */
 } .button__primary_6ljbd {
     color: var(--button-inverted-primary-color);
@@ -126,6 +153,8 @@
         background-color: var(--button-inverted-secondary-hover-bg-color);
     } .button__secondary_6ljbd:active {
         background-color: var(--button-inverted-secondary-active-bg-color);
+    } .button__text_6ljbd:active {
+        color: var(--button-inverted-text-active-color);
     } .button__ghost_6ljbd:active {
         color: var(--button-inverted-ghost-active-color);
     } .button__component_6ljbd[disabled].button__primary_6ljbd {
@@ -136,11 +165,18 @@
         } .button__component_6ljbd[disabled].button__secondary_6ljbd {
         color: var(--button-inverted-secondary-disabled-color);
         background-color: var(--button-inverted-secondary-disabled-bg-color);
+    } .button__component_6ljbd[disabled].button__outlined_6ljbd {
+        color: var(--button-inverted-outlined-disabled-color);
+        border-color: var(--button-inverted-outlined-disabled-border-color);
     } .button__component_6ljbd[disabled].button__tertiary_6ljbd {
         color: var(--button-inverted-tertiary-disabled-color);
         border-color: var(--button-inverted-tertiary-disabled-border-color);
+    } .button__component_6ljbd[disabled].button__transparent_6ljbd {
+        color: var(--button-inverted-transparent-disabled-color);
     } .button__component_6ljbd[disabled].button__link_6ljbd {
         color: var(--button-inverted-link-disabled-color);
+    } .button__component_6ljbd[disabled].button__text_6ljbd {
+        color: var(--button-inverted-text-disabled-color);
     } .button__component_6ljbd[disabled].button__ghost_6ljbd {
         color: var(--button-inverted-ghost-disabled-color);
     }