fix(button): added blur (#961)

.changeset/fair-buses-fetch.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-button': patch
+'@alfalab/core-components-tag': patch
+---
+
+Добавлен блюр к полупрозрачным кнопкам

.changeset/nice-papayas-allow.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-number-input': patch
+---
+
+Заменены токены для stepper

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

@@ -20,9 +20,14 @@
     box-shadow: none;
     user-select: none;
     cursor: pointer;
-    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, transform 0.12s ease;
+    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
     box-sizing: border-box;
-    will-change: transform;
+}
+
+.secondary,
+.accent[disabled],
+.primary[disabled] {
+    backdrop-filter: blur(80px);
 }
 
 .focused {

packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap

@@ -565,7 +565,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component component s s outlined rounded outlined my-tag"
+              class="component component component s s outlined outlined rounded outlined my-tag"
               type="button"
             >
               <span>
@@ -583,7 +583,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component component s s outlined rounded outlined"
+              class="component component component s s outlined outlined rounded outlined"
               type="button"
             >
               <span>
@@ -601,7 +601,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component component s s outlined rounded outlined"
+              class="component component component s s outlined outlined rounded outlined"
               type="button"
             >
               <span>
@@ -635,7 +635,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component component s s outlined rounded outlined my-tag"
+            class="component component component s s outlined outlined rounded outlined my-tag"
             type="button"
           >
             <span>
@@ -653,7 +653,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component component s s outlined rounded outlined"
+            class="component component component s s outlined outlined rounded outlined"
             type="button"
           >
             <span>
@@ -671,7 +671,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component component s s outlined rounded outlined"
+            class="component component component s s outlined outlined rounded outlined"
             type="button"
           >
             <span>

packages/number-input/src/components/number-input/Component.tsx

@@ -27,7 +27,14 @@ import {
 } from '../../utils';
 import { Steppers } from '../steppers';
 
+import defaultColors from './default.module.css';
 import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 
 export interface NumberInputProps
     extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'defaultValue'> {
@@ -106,6 +113,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             size = 's',
             disableUserInput,
             clear: clearProp,
+            colors = 'default',
             ...restProps
         },
         ref,
@@ -233,6 +241,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                 value={value}
                 onInput={handleChange}
                 dataTestId={dataTestId}
+                colors={colors}
                 disabled={disabled}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
@@ -244,14 +253,15 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                         <React.Fragment>
                             {rightAddons}
                             <Steppers
+                                colors={colors}
                                 dataTestId={dataTestId}
                                 disabled={disabled}
                                 value={parseNumber(value)}
                                 min={min}
                                 max={max}
-                                className={cn(styles.steppers, styles[size], {
-                                    [styles.steppersFocused]: focused,
-                                    [styles.steppersDisable]: disabled,
+                                className={cn(colorStyles[colors].steppers, styles[size], {
+                                    [colorStyles[colors].steppersFocused]: focused,
+                                    [colorStyles[colors].steppersDisabled]: disabled,
                                 })}
                                 onIncrement={handleIncrement}
                                 onDecrement={handleDecrement}

packages/number-input/src/components/number-input/default.module.css

@@ -0,0 +1,10 @@
+@import '../../../../themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500-inverted);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-200);
+}

packages/number-input/src/components/number-input/index.module.css

@@ -1,14 +1,5 @@
 @import '../../../../themes/src/default.css';
 
-.steppers {
-    background-color: var(--color-light-neutral-0);
-}
-
-.steppersFocused,
-.steppersDisable {
-    background-color: var(--color-light-neutral-translucent-200);
-}
-
 .s {
     margin-right: var(--gap-xs-neg);
 }

packages/number-input/src/components/number-input/inverted.module.css

@@ -0,0 +1,10 @@
+@import '../../../../themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

packages/number-input/src/components/steppers/Component.tsx

@@ -6,7 +6,9 @@ import { getDataTestId } from '@alfalab/core-components-shared';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
 
+import defaultColors from './default.module.css';
 import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
 
 export type SteppersProps = {
     value: number;
@@ -17,6 +19,12 @@ export type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
+};
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
 };
 
 function preventDefault(e: React.MouseEvent<HTMLElement>) {
@@ -32,13 +40,15 @@ export const Steppers: React.FC<SteppersProps> = ({
     max,
     disabled,
     dataTestId,
+    colors,
 }) => {
     const decButtonDisabled = disabled || value <= min;
     const incButtonDisabled = disabled || value >= max;
 
     return (
         <div className={cn(styles.component, className)}>
             <IconButton
+                colors={colors}
                 disabled={decButtonDisabled}
                 className={styles.button}
                 icon={<MinusMIcon />}
@@ -48,8 +58,9 @@ export const Steppers: React.FC<SteppersProps> = ({
                 dataTestId={getDataTestId(dataTestId, 'decrement-button')}
                 view='secondary'
             />
-            <div className={styles.separator} />
+            <div className={cn(styles.separator, colorStyles[colors].separator)} />
             <IconButton
+                colors={colors}
                 disabled={incButtonDisabled}
                 className={styles.button}
                 icon={<PlusMediumMIcon />}

packages/number-input/src/components/steppers/default.module.css

@@ -0,0 +1,5 @@
+@import '../../../../themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300);
+}

packages/number-input/src/components/steppers/index.module.css

@@ -12,7 +12,6 @@
 .separator {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
 }
 
 .button {

packages/number-input/src/components/steppers/inverted.module.css

@@ -0,0 +1,5 @@
+@import '../../../../themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}