Fix/button style

.changeset/friendly-planes-cheat.md

@@ -0,0 +1,7 @@
+---
+'@alfalab/core-components-button': minor
+---
+
+- Изменены цвета для hint
+- Изменена высота строки для размера 48, 56
+- Добавлена минимальная высота для размера 48, 56

packages/button/src/components/base-button/Component.tsx

@@ -160,7 +160,11 @@ export const BaseButton = React.forwardRef<
                         })}
                     >
                         {children}
-                        {showHint && <span className={commonStyles.hint}>{hint}</span>}
+                        {showHint && (
+                            <span className={cn(commonStyles.hint, colorStyles[colors].hint)}>
+                                {hint}
+                            </span>
+                        )}
                     </span>
                 )}
 

packages/button/src/components/base-button/default.module.css

@@ -22,6 +22,10 @@
 
 .primary {
     border: 1px solid transparent;
+
+    & .hint {
+        color: var(--button-primary-hint-color);
+    }
 }
 
 .secondary {
@@ -31,6 +35,10 @@
     & > .loader {
         color: var(--button-spinner-default-color);
     }
+
+    & .hint {
+        color: var(--button-secondary-hint-color);
+    }
 }
 
 .outlined {
@@ -52,6 +60,10 @@
     & > .loader {
         color: var(--button-spinner-default-color);
     }
+
+    & .hint {
+        color: var(--button-outlined-hint-color);
+    }
 }
 
 .tertiary {
@@ -73,6 +85,10 @@
     & > .loader {
         color: var(--button-spinner-default-color);
     }
+
+    & .hint {
+        color: var(--button-tertiary-hint-color);
+    }
 }
 
 .filled {
@@ -113,6 +129,10 @@
     & > .loader {
         color: var(--button-spinner-default-color);
     }
+
+    & .hint {
+        color: var(--button-transparent-base-hint-color);
+    }
 }
 
 .link {
@@ -148,6 +168,10 @@
     & > .loader {
         color: var(--button-spinner-default-color);
     }
+
+    & .hint {
+        color: var(--button-text-base-hint-color);
+    }
 }
 
 .ghost {

packages/button/src/components/base-button/index.module.css

@@ -98,7 +98,7 @@
     min-width: 104px;
     min-height: var(--size-s-height);
     font-size: 16px;
-    line-height: 24px;
+    line-height: 20px;
 
     &.iconOnly {
         min-width: var(--size-s-height);
@@ -110,7 +110,7 @@
     min-height: var(--size-m-height);
     padding: var(--gap-0) 27px;
     font-size: 16px;
-    line-height: 24px;
+    line-height: 20px;
 
     &.iconOnly {
         min-width: var(--size-m-height);
@@ -221,6 +221,13 @@
     }
 }
 
+.text.text {
+    &.size-48,
+    &.size-56 {
+        min-height: 24px;
+    }
+}
+
 /* Disabled */
 
 .component[disabled] {

packages/button/src/components/base-button/inverted.module.css

@@ -22,6 +22,10 @@
 
 .primary {
     border: 1px solid transparent;
+
+    & .hint {
+        color: var(--button-inverted-primary-hint-color);
+    }
 }
 
 .secondary {
@@ -31,6 +35,10 @@
     & > .loader {
         color: var(--button-spinner-inverted-color);
     }
+
+    & .hint {
+        color: var(--button-inverted-secondary-hint-color);
+    }
 }
 
 .outlined {
@@ -52,6 +60,10 @@
     & > .loader {
         color: var(--button-spinner-inverted-color);
     }
+
+    & .hint {
+        color: var(--button-inverted-outlined-hint-color);
+    }
 }
 
 .tertiary {
@@ -73,6 +85,10 @@
     & > .loader {
         color: var(--button-spinner-inverted-color);
     }
+
+    & .hint {
+        color: var(--button-inverted-tertiary-hint-color);
+    }
 }
 
 .filled {
@@ -113,6 +129,10 @@
     & > .loader {
         color: var(--button-spinner-inverted-color);
     }
+
+    & .hint {
+        color: var(--button-inverted-transparent-base-hint-color);
+    }
 }
 
 .link {
@@ -149,6 +169,10 @@
     & > .loader {
         color: var(--button-spinner-inverted-color);
     }
+
+    & .hint {
+        color: var(--button-inverted-text-base-hint-color);
+    }
 }
 
 .ghost {

packages/button/src/vars.css

@@ -20,6 +20,7 @@
     --button-primary-disabled-bg-color: var(--color-light-neutral-translucent-100);
     --button-primary-color: var(--color-light-text-primary-inverted);
     --button-primary-disabled-color: var(--color-light-text-tertiary);
+    --button-primary-hint-color: var(--color-light-text-secondary-inverted);
 
     /* accent */
     --button-accent-base-bg-color: var(--color-light-accent-primary);
@@ -37,6 +38,7 @@
     --button-secondary-base-border-color: transparent;
     --button-secondary-disabled-border-color: transparent;
     --button-secondary-color: var(--color-light-text-primary);
+    --button-secondary-hint-color: var(--color-light-text-secondary);
     --button-secondary-disabled-color: var(--color-light-text-tertiary);
 
     /* tertiary */
@@ -48,6 +50,7 @@
     --button-tertiary-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-tertiary-disabled-border-color: var(--color-light-neutral-translucent-500);
     --button-tertiary-color: var(--color-light-text-primary);
+    --button-tertiary-hint-color: var(--color-light-text-secondary);
     --button-tertiary-disabled-color: var(--color-light-text-tertiary);
 
     /* outlined */
@@ -59,6 +62,7 @@
     --button-outlined-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-outlined-disabled-border-color: var(--color-light-neutral-translucent-500);
     --button-outlined-color: var(--color-light-text-primary);
+    --button-outlined-hint-color: var(--color-light-text-secondary);
     --button-outlined-disabled-color: var(--color-light-text-tertiary);
 
     /* ghost */
@@ -69,6 +73,7 @@
 
     /* text */
     --button-text-base-color: var(--color-light-text-primary);
+    --button-text-base-hint-color: var(--color-light-text-secondary);
     --button-text-hover-color: var(--color-light-text-primary-hover);
     --button-text-active-color: var(--color-light-text-primary-press);
     --button-text-disabled-color: var(--color-light-text-tertiary);
@@ -81,6 +86,7 @@
 
     /* transparent */
     --button-transparent-base-color: var(--color-light-text-primary);
+    --button-transparent-base-hint-color: var(--color-light-text-secondary);
     --button-transparent-hover-bg-color: var(--color-light-transparent-default-hover);
     --button-transparent-active-bg-color: var(--color-light-transparent-default-press);
     --button-transparent-disabled-color: var(--color-light-text-tertiary);
@@ -99,6 +105,7 @@
     );
     --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted);
     --button-inverted-primary-color: var(--color-light-text-primary);
+    --button-inverted-primary-hint-color: var(--color-light-text-secondary);
 
     /* accent inverted */
     --button-inverted-accent-base-bg-color: var(--color-light-accent-primary-inverted);
@@ -122,6 +129,7 @@
     --button-inverted-secondary-base-border-color: transparent;
     --button-inverted-secondary-disabled-border-color: transparent;
     --button-inverted-secondary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-secondary-hint-color: var(--color-light-text-secondary-inverted);
     --button-inverted-secondary-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* tertiary inverted */
@@ -143,6 +151,7 @@
         --color-light-neutral-translucent-500-inverted
     );
     --button-inverted-tertiary-color: var(--color-light-text-primary-inverted);
+    --button-inverted-tertiary-hint-color: var(--color-light-text-secondary-inverted);
     --button-inverted-tertiary-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* outlined inverted */
@@ -164,6 +173,7 @@
         --color-light-neutral-translucent-500-inverted
     );
     --button-inverted-outlined-color: var(--color-light-text-primary-inverted);
+    --button-inverted-outlined-hint-color: var(--color-light-text-secondary-inverted);
     --button-inverted-outlined-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* ghost inverted */
@@ -174,6 +184,7 @@
 
     /* text inverted */
     --button-inverted-text-base-color: var(--color-light-text-primary-inverted);
+    --button-inverted-text-base-hint-color: var(--color-light-text-secondary-inverted);
     --button-inverted-text-hover-color: var(--color-light-text-primary-inverted-hover);
     --button-inverted-text-active-color: var(--color-light-text-primary-inverted-press);
     --button-inverted-text-disabled-color: var(--color-light-text-tertiary-inverted);
@@ -186,6 +197,7 @@
 
     /* transparent inverted */
     --button-inverted-transparent-base-color: var(--color-light-text-primary-inverted);
+    --button-inverted-transparent-base-hint-color: var(--color-light-text-secondary-inverted);
     --button-inverted-transparent-hover-bg-color: var(
         --color-light-transparent-default-inverted-hover
     );