@alfalab/core-components 41.3.0 → 41.4.0-beta.0

package/textarea/modern/index.css

@@ -92,7 +92,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
             var(--textarea-xl-filled-spacer-bottom)
     );
-} .textarea__textarea_yq5bi {
+} .textarea__textarea_1fqg9 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -108,17 +108,17 @@
     resize: none;
     -webkit-appearance: none;
     height: inherit;
-} .textarea__customScrollbar_yq5bi {
+} .textarea__customScrollbar_1fqg9 {
     overflow: auto;
     overflow: overlay;
     cursor: auto;
-} .textarea__customScrollbar_yq5bi::-webkit-scrollbar {
+} .textarea__customScrollbar_1fqg9::-webkit-scrollbar {
         width: 12px;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-track {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-track {
         background-color: transparent;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-track-piece {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-thumb {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -126,22 +126,22 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-thumb:hover {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-thumb:active {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .textarea__customScrollbar_yq5bi::-webkit-resizer {
+    } .textarea__customScrollbar_1fqg9::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .textarea__customScrollbar_yq5bi::-webkit-scrollbar-button,
-    .textarea__customScrollbar_yq5bi::-webkit-scrollbar-corner {
+    } .textarea__customScrollbar_1fqg9::-webkit-scrollbar-button,
+    .textarea__customScrollbar_1fqg9::-webkit-scrollbar-corner {
         display: none;
-    } .textarea__textarea_yq5bi::placeholder {
+    } .textarea__textarea_1fqg9::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .textarea__hasInnerLabel_yq5bi::placeholder {
+} .textarea__hasInnerLabel_1fqg9::placeholder {
     opacity: 0;
-} .textarea__pseudoTextarea_yq5bi {
+} .textarea__pseudoTextarea_1fqg9 {
     position: absolute;
     top: 0;
     left: 0;
@@ -152,13 +152,13 @@
     z-index: -1;
     overflow: hidden;
     max-height: 100%
-} .textarea__pseudoTextarea_yq5bi span {
+} .textarea__pseudoTextarea_1fqg9 span {
         color: transparent;
-    } .textarea__pseudoTextarea_yq5bi .textarea__overflow_yq5bi {
+    } .textarea__pseudoTextarea_1fqg9 .textarea__overflow_1fqg9 {
         background-color: var(--color-light-graphic-negative-alpha-40);
-    } .textarea__pseudoTextarea_yq5bi.textarea__nativeScrollbar_yq5bi {
+    } .textarea__pseudoTextarea_1fqg9.textarea__nativeScrollbar_1fqg9 {
         overflow: auto;
-    } .textarea__sub_yq5bi {
+    } .textarea__sub_1fqg9 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -166,62 +166,62 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} .textarea__textarea_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__hasInnerLabel_yq5bi {
+} .textarea__textarea_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__hasInnerLabel_1fqg9 {
     padding-top: 0;
     padding-bottom: 0;
-} /* DISABLED STATE */ .textarea__textarea_yq5bi:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1fqg9:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* READ-ONLY STATE */ .textarea__textarea_yq5bi:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1fqg9:read-only {
     cursor: var(--disabled-cursor);
-} /* FOCUS STATE */ .textarea__textarea_yq5bi:focus.textarea__hasInnerLabel_yq5bi::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1fqg9:focus.textarea__hasInnerLabel_1fqg9::placeholder {
     opacity: 1;
-} .textarea__focusVisible_yq5bi {
+} .textarea__focusVisible_1fqg9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* FILLED STATE */ .textarea__textarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi {
+} /* FILLED STATE */ .textarea__textarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9 {
     padding-top: 0
-} .textarea__textarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__s_yq5bi {
+} .textarea__textarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__s_1fqg9 {
         min-height: var(--textarea-s-filled-min-height);
-    } .textarea__textarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__m_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__m_1fqg9 {
         min-height: var(--textarea-m-filled-min-height);
-    } .textarea__textarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__l_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__l_1fqg9 {
         min-height: var(--textarea-l-filled-min-height);
-    } .textarea__textarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__xl_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__xl_1fqg9 {
         min-height: var(--textarea-xl-filled-min-height);
-    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__s_yq5bi {
+    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__s_1fqg9 {
         min-height: calc(100% - var(--textarea-s-filled-spacer-top));
-    } .textarea__pseudoTextarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__m_yq5bi {
+    } .textarea__pseudoTextarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__m_1fqg9 {
         min-height: calc(100% - var(--textarea-m-filled-spacer-top));
-    } .textarea__pseudoTextarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__l_yq5bi {
+    } .textarea__pseudoTextarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__l_1fqg9 {
         min-height: calc(100% - var(--textarea-l-filled-spacer-top));
-    } .textarea__pseudoTextarea_yq5bi.textarea__filled_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__xl_yq5bi {
+    } .textarea__pseudoTextarea_1fqg9.textarea__filled_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__xl_1fqg9 {
         min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
-    } .textarea__wrapper_yq5bi.textarea__resizeVertical_yq5bi {
+    } .textarea__wrapper_1fqg9.textarea__resizeVertical_1fqg9 {
         resize: vertical;
         min-height: 48px;
-    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_yq5bi.textarea__s_yq5bi {
+    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_1fqg9.textarea__s_1fqg9 {
         border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_yq5bi.textarea__m_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__m_1fqg9 {
         border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_yq5bi.textarea__l_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__l_1fqg9 {
         border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_yq5bi.textarea__xl_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__xl_1fqg9 {
         border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__s_yq5bi {
+    } .textarea__textarea_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__s_1fqg9 {
             border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__m_yq5bi {
+        } .textarea__textarea_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__m_1fqg9 {
             border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__l_yq5bi {
+        } .textarea__textarea_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__l_1fqg9 {
             border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_yq5bi.textarea__hasInnerLabel_yq5bi.textarea__xl_yq5bi {
+        } .textarea__textarea_1fqg9.textarea__hasInnerLabel_1fqg9.textarea__xl_1fqg9 {
             border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
         }

package/textarea/modern/index.js

@@ -5,4 +5,4 @@ import 'react-textarea-autosize';
 import 'classnames';
 import '../../form-control/modern';
 import '@alfalab/hooks';
-import './PseudoTextArea-29ee0332.js';
+import './PseudoTextArea-526cd9e3.js';

package/textarea/modern/inverted.css

@@ -39,28 +39,28 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_rjl8h {
+} .textarea__input_1ucgt {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_rjl8h:-webkit-autofill {
+} .textarea__input_1ucgt:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .textarea__input_rjl8h::placeholder {
+} .textarea__input_1ucgt::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_rjl8h::placeholder {
+} .textarea__hasInnerLabel_1ucgt::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} .textarea__clearIcon_rjl8h {
+} .textarea__clearIcon_1ucgt {
     color: var(--color-light-graphic-primary-inverted);
-} /* READ-ONLY STATE */ .textarea__input_rjl8h:read-only {
+} /* READ-ONLY STATE */ .textarea__input_1ucgt:read-only {
     color: var(--input-inverted-read-only-color)
-} .textarea__input_rjl8h:read-only:focus::placeholder {
+} .textarea__input_1ucgt:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_rjl8h:disabled {
+    } /* DISABLED STATE */ .textarea__input_1ucgt:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .textarea__input_rjl8h:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_1ucgt:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_rjl8h {
+} /* ERROR STATE */ .textarea__error_1ucgt {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 } :root {
@@ -84,22 +84,22 @@
     /* font */
 
     /* border-radius */
-} .textarea__textarea_rjl8h {
+} .textarea__textarea_1ucgt {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_rjl8h::placeholder {
+} .textarea__textarea_1ucgt::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_rjl8h::placeholder {
+} .textarea__hasInnerLabel_1ucgt::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_rjl8h:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1ucgt:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_rjl8h:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1ucgt:read-only {
     color: var(--input-inverted-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_rjl8h:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1ucgt:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} .textarea__hint_rjl8h {
+} .textarea__hint_1ucgt {
     color: var(--form-control-hint-color);
-} .textarea__error_rjl8h {
+} .textarea__error_1ucgt {
     color: var(--form-control-error-color);
 }

package/themes/button/corp.css

@@ -0,0 +1,37 @@
+:root {
+    /* primary */
+    --button-primary-base-bg-color: var(--color-light-bg-accent);
+    --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-specialbg-secondary-transparent);
+    --button-primary-color: var(--color-static-text-primary-light);
+    --button-primary-disabled-color: var(--color-light-text-tertiary);
+
+    /* primary-inverted */
+    --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: var(
+        --color-light-specialbg-secondary-transparent-inverted
+    );
+    --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted);
+    --button-inverted-primary-color: var(--color-static-text-primary-light);
+
+    /* accent */
+    --button-accent-base-bg-color: var(--color-light-bg-secondary-inverted);
+    --button-accent-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15);
+    --button-accent-active-bg-color: var(--color-light-bg-secondary-inverted-tint-20);
+    --button-accent-disabled-bg-color: var(--color-light-specialbg-secondary-transparent);
+    --button-accent-color: var(--color-light-text-primary-inverted);
+    --button-accent-disabled-color: var(--color-light-text-tertiary);
+
+    /* accent-inverted */
+    --button-inverted-accent-base-bg-color: var(--color-light-bg-secondary);
+    --button-inverted-accent-hover-bg-color: var(--color-light-bg-secondary-shade-7);
+    --button-inverted-accent-active-bg-color: var(--color-light-bg-secondary-shade-15);
+    --button-inverted-accent-disabled-bg-color: var(
+        --color-light-specialbg-secondary-transparent-inverted
+    );
+    --button-inverted-accent-disabled-color: var(--color-light-text-tertiary-inverted);
+    --button-inverted-accent-color: var(--color-light-text-primary);
+}

package/themes/button/site.css

@@ -1,14 +1,4 @@
 :root {
-    --button-active-transform-scale-factor: 0.97;
-
-    /* border-radius */
-    --button-xxs-size-border-radius: 6px;
-    --button-xs-size-border-radius: var(--border-radius-m);
-    --button-s-size-border-radius: var(--border-radius-m);
-    --button-m-size-border-radius: var(--border-radius-m);
-    --button-l-size-border-radius: var(--border-radius-m);
-    --button-xl-size-border-radius: var(--border-radius-m);
-
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-accent);
     --button-primary-hover-bg-color: var(--color-light-bg-accent-shade-7);
@@ -25,42 +15,6 @@
     --button-inverted-primary-disabled-bg-color: var(--color-light-bg-accent-alpha-30);
     --button-inverted-primary-disabled-color: var(--color-static-text-primary-light-alpha-30);
 
-    /* secondary */
-    --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-disabled-color: var(--color-light-text-primary-alpha-30);
-    --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-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
-
-    /* tertiary */
-    --button-tertiary-hover-border-color: var(--color-light-border-underline-inverted);
-    --button-tertiary-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30);
-    --button-tertiary-disabled-color: var(--color-light-text-primary-alpha-30);
-    --button-inverted-tertiary-hover-border-color: var(--color-light-border-underline);
-    --button-inverted-tertiary-disabled-border-color: var(--color-light-border-underline-alpha-30);
-    --button-inverted-tertiary-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
-
-    /* link */
-    --button-link-disabled-color: var(--color-light-text-primary-alpha-30);
-    --button-inverted-link-disabled-color: var(--color-light-text-primary-inverted-alpha-30);
-
-    /* ghost */
-    --button-ghost-hover-color: var(--color-light-text-primary-tint-30);
-    --button-ghost-active-color: var(--color-light-text-primary-tint-50);
-    --button-ghost-disabled-color: var(--color-light-text-primary-alpha-30);
-    --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);
-
     /* spinner */
     --button-spinner-primary-color: var(--color-static-graphic-light);
     --button-spinner-inverted-primary-color: var(--color-static-graphic-light);

package/themes/click.css

@@ -1015,4 +1015,13 @@
     --circular-progress-bar-font-family: var(--font-family-styrene);
     /* theme */
     --icon-view-color: var(--color-light-graphic-primary);
+    --sys-message-title-font-family: var(--font-family-styrene);
+    /* desktop */
+    --sys-message-desktop-title-font-size: 24px;
+    --sys-message-desktop-title-line-height: 32px;
+    --sys-message-desktop-title-font-weight: 500;
+    /* mobile */
+    --sys-message-mobile-title-font-size: 20px;
+    --sys-message-mobile-title-line-height: 24px;
+    --sys-message-mobile-title-font-weight: 500;
 }