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

package/button/esm/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/esm/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);
     }

package/button/esm/mobile/Component.mobile.js

@@ -7,10 +7,10 @@ import '../../../shared/esm';
 import '../../../spinner/esm';
 import '@alfalab/hooks';
 
-var defaultColors = {"primary":"button__primary_mz34n","loader":"button__loader_mz34n","secondary":"button__secondary_mz34n","ghost":"button__ghost_mz34n","component":"button__component_mz34n","loading":"button__loading_mz34n","tertiary":"button__tertiary_mz34n","link":"button__link_mz34n"};
+var defaultColors = {"primary":"button__primary_mz34n","loader":"button__loader_mz34n","secondary":"button__secondary_mz34n","text":"button__text_mz34n","ghost":"button__ghost_mz34n","component":"button__component_mz34n","loading":"button__loading_mz34n","outlined":"button__outlined_mz34n","tertiary":"button__tertiary_mz34n","transparent":"button__transparent_mz34n","link":"button__link_mz34n"};
 require('./default.mobile.css');
 
-var invertedColors = {"primary":"button__primary_tuf92","loader":"button__loader_tuf92","secondary":"button__secondary_tuf92","ghost":"button__ghost_tuf92","component":"button__component_tuf92","loading":"button__loading_tuf92","tertiary":"button__tertiary_tuf92","link":"button__link_tuf92"};
+var invertedColors = {"primary":"button__primary_tuf92","loader":"button__loader_tuf92","secondary":"button__secondary_tuf92","text":"button__text_tuf92","ghost":"button__ghost_tuf92","component":"button__component_tuf92","loading":"button__loading_tuf92","outlined":"button__outlined_tuf92","tertiary":"button__tertiary_tuf92","transparent":"button__transparent_tuf92","link":"button__link_tuf92"};
 require('./inverted.mobile.css');
 
 var styles = {"size-32":"button__size-32_13qqj","size-40":"button__size-40_13qqj","size-48":"button__size-48_13qqj","size-56":"button__size-56_13qqj","size-64":"button__size-64_13qqj","size-72":"button__size-72_13qqj"};

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

@@ -41,8 +41,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -57,8 +61,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -87,17 +95,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);
 } .button__primary_mz34n {
@@ -115,6 +140,8 @@
     background-color: var(--button-secondary-mobile-base-bg-color)
 } .button__secondary_mz34n:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
+    } .button__text_mz34n:active {
+        color: var(--button-text-mobile-active-color);
     } .button__ghost_mz34n:active {
         color: var(--button-ghost-mobile-active-color);
     } .button__component_mz34n[disabled].button__primary_mz34n {
@@ -125,11 +152,18 @@
         } .button__component_mz34n[disabled].button__secondary_mz34n {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
+    } .button__component_mz34n[disabled].button__outlined_mz34n {
+        color: var(--button-outlined-mobile-disabled-color);
+        border-color: var(--button-outlined-mobile-disabled-border-color);
     } .button__component_mz34n[disabled].button__tertiary_mz34n {
         color: var(--button-tertiary-mobile-disabled-color);
         border-color: var(--button-tertiary-mobile-disabled-border-color);
+    } .button__component_mz34n[disabled].button__transparent_mz34n {
+        color: var(--button-transparent-mobile-disabled-color);
     } .button__component_mz34n[disabled].button__link_mz34n {
         color: var(--button-link-mobile-disabled-color);
+    } .button__component_mz34n[disabled].button__text_mz34n {
+        color: var(--button-text-mobile-disabled-color);
     } .button__component_mz34n[disabled].button__ghost_mz34n {
         color: var(--button-ghost-mobile-disabled-color);
     }

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

@@ -36,8 +36,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -52,8 +56,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -96,17 +104,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);
 } .button__primary_tuf92 {
@@ -124,6 +151,8 @@
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
 } .button__secondary_tuf92:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+    } .button__text_tuf92:active {
+        color: var(--button-inverted-text-mobile-active-color);
     } .button__ghost_tuf92:active {
         color: var(--button-inverted-ghost-mobile-active-color);
     } .button__component_tuf92[disabled].button__primary_tuf92 {
@@ -134,11 +163,18 @@
         } .button__component_tuf92[disabled].button__secondary_tuf92 {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
+    } .button__component_tuf92[disabled].button__outlined_tuf92 {
+        color: var(--button-inverted-outlined-mobile-disabled-color);
+        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
     } .button__component_tuf92[disabled].button__tertiary_tuf92 {
         color: var(--button-inverted-tertiary-mobile-disabled-color);
         border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
+    } .button__component_tuf92[disabled].button__transparent_tuf92 {
+        color: var(--button-inverted-transparent-mobile-disabled-color);
     } .button__component_tuf92[disabled].button__link_tuf92 {
         color: var(--button-inverted-link-mobile-disabled-color);
+    } .button__component_tuf92[disabled].button__text_tuf92 {
+        color: var(--button-inverted-text-mobile-disabled-color);
     } .button__component_tuf92[disabled].button__ghost_tuf92 {
         color: var(--button-inverted-ghost-mobile-disabled-color);
     }

package/button/esm/mobile/mobile.css

@@ -34,8 +34,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -50,8 +54,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -74,14 +82,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_13qqj {
     border-radius: var(--button-xxs-size-mobile-border-radius);

package/button/esm/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/mobile/Component.mobile.js

@@ -8,10 +8,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var defaultColors = {"primary":"button__primary_mz34n","loader":"button__loader_mz34n","secondary":"button__secondary_mz34n","ghost":"button__ghost_mz34n","component":"button__component_mz34n","loading":"button__loading_mz34n","tertiary":"button__tertiary_mz34n","link":"button__link_mz34n"};
+var defaultColors = {"primary":"button__primary_mz34n","loader":"button__loader_mz34n","secondary":"button__secondary_mz34n","text":"button__text_mz34n","ghost":"button__ghost_mz34n","component":"button__component_mz34n","loading":"button__loading_mz34n","outlined":"button__outlined_mz34n","tertiary":"button__tertiary_mz34n","transparent":"button__transparent_mz34n","link":"button__link_mz34n"};
 require('./default.mobile.css');
 
-var invertedColors = {"primary":"button__primary_tuf92","loader":"button__loader_tuf92","secondary":"button__secondary_tuf92","ghost":"button__ghost_tuf92","component":"button__component_tuf92","loading":"button__loading_tuf92","tertiary":"button__tertiary_tuf92","link":"button__link_tuf92"};
+var invertedColors = {"primary":"button__primary_tuf92","loader":"button__loader_tuf92","secondary":"button__secondary_tuf92","text":"button__text_tuf92","ghost":"button__ghost_tuf92","component":"button__component_tuf92","loading":"button__loading_tuf92","outlined":"button__outlined_tuf92","tertiary":"button__tertiary_tuf92","transparent":"button__transparent_tuf92","link":"button__link_tuf92"};
 require('./inverted.mobile.css');
 
 var styles = {"size-32":"button__size-32_13qqj","size-40":"button__size-40_13qqj","size-48":"button__size-48_13qqj","size-56":"button__size-56_13qqj","size-64":"button__size-64_13qqj","size-72":"button__size-72_13qqj"};

package/button/mobile/default.mobile.css

@@ -41,8 +41,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -57,8 +61,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -87,17 +95,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);
 } .button__primary_mz34n {
@@ -115,6 +140,8 @@
     background-color: var(--button-secondary-mobile-base-bg-color)
 } .button__secondary_mz34n:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
+    } .button__text_mz34n:active {
+        color: var(--button-text-mobile-active-color);
     } .button__ghost_mz34n:active {
         color: var(--button-ghost-mobile-active-color);
     } .button__component_mz34n[disabled].button__primary_mz34n {
@@ -125,11 +152,18 @@
         } .button__component_mz34n[disabled].button__secondary_mz34n {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
+    } .button__component_mz34n[disabled].button__outlined_mz34n {
+        color: var(--button-outlined-mobile-disabled-color);
+        border-color: var(--button-outlined-mobile-disabled-border-color);
     } .button__component_mz34n[disabled].button__tertiary_mz34n {
         color: var(--button-tertiary-mobile-disabled-color);
         border-color: var(--button-tertiary-mobile-disabled-border-color);
+    } .button__component_mz34n[disabled].button__transparent_mz34n {
+        color: var(--button-transparent-mobile-disabled-color);
     } .button__component_mz34n[disabled].button__link_mz34n {
         color: var(--button-link-mobile-disabled-color);
+    } .button__component_mz34n[disabled].button__text_mz34n {
+        color: var(--button-text-mobile-disabled-color);
     } .button__component_mz34n[disabled].button__ghost_mz34n {
         color: var(--button-ghost-mobile-disabled-color);
     }

package/button/mobile/inverted.mobile.css

@@ -36,8 +36,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -52,8 +56,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -96,17 +104,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);
 } .button__primary_tuf92 {
@@ -124,6 +151,8 @@
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
 } .button__secondary_tuf92:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+    } .button__text_tuf92:active {
+        color: var(--button-inverted-text-mobile-active-color);
     } .button__ghost_tuf92:active {
         color: var(--button-inverted-ghost-mobile-active-color);
     } .button__component_tuf92[disabled].button__primary_tuf92 {
@@ -134,11 +163,18 @@
         } .button__component_tuf92[disabled].button__secondary_tuf92 {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
+    } .button__component_tuf92[disabled].button__outlined_tuf92 {
+        color: var(--button-inverted-outlined-mobile-disabled-color);
+        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
     } .button__component_tuf92[disabled].button__tertiary_tuf92 {
         color: var(--button-inverted-tertiary-mobile-disabled-color);
         border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
+    } .button__component_tuf92[disabled].button__transparent_tuf92 {
+        color: var(--button-inverted-transparent-mobile-disabled-color);
     } .button__component_tuf92[disabled].button__link_tuf92 {
         color: var(--button-inverted-link-mobile-disabled-color);
+    } .button__component_tuf92[disabled].button__text_tuf92 {
+        color: var(--button-inverted-text-mobile-disabled-color);
     } .button__component_tuf92[disabled].button__ghost_tuf92 {
         color: var(--button-inverted-ghost-mobile-disabled-color);
     }

package/button/mobile/mobile.css

@@ -34,8 +34,12 @@
 
     /* ghost */
 
+    /* text */
+
     /* link */
 
+    /* transparent */
+
     /* loader */
 
     /* primary inverted */
@@ -50,8 +54,12 @@
 
     /* ghost inverted */
 
+    /* text inverted */
+
     /* link inverted */
 
+    /* transparent inverted */
+
     /* loader inverted */
 
     /* border-radius mobile */
@@ -74,14 +82,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_13qqj {
     border-radius: var(--button-xxs-size-mobile-border-radius);