feat(button): transparent view

core-ds · Jan 27, 2021 · e395049 · e395049
1 parent df3e7c8
commit e395049
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 13 deletions.
diff --git a/packages/button/src/Component.stories.mdx b/packages/button/src/Component.stories.mdx
@@ -9,7 +9,7 @@ import IconS from '@alfalab/icons-glyph/FlashCircleSIcon';
 import { Button } from './Component';
 import { name, version } from '../package.json';
 
-export const VIEWS = ['primary', 'secondary', 'outlined', 'filled', 'link', 'ghost'];
+export const VIEWS = ['primary', 'secondary', 'outlined', 'filled', 'transparent', 'link', 'ghost'];
 export const SIZES = ['xs', 's', 'm', 'l'];
 
 
@@ -72,6 +72,9 @@ import { Button } from '@alfalab/core-components-button';
             <Col>
                 <Button view='filled'>Filled</Button>
             </Col>
+            <Col>
+                <Button view='transparent'>Transparent</Button>
+            </Col>
             <Col>
                 <Button view='link'>Link</Button>
             </Col>
@@ -155,6 +158,22 @@ import { Button } from '@alfalab/core-components-button';
     </Container>
 </Preview>
 
+- <b>Transparent</b>. Кнопка с прозрачностью.
+
+<Preview>
+    <Container>
+        <Row>
+            {SIZES.map(size => (
+                <Col key={size}>
+                    <Button size={size} view="transparent">
+                        Кнопка
+                    </Button>
+                </Col>
+            ))}
+        </Row>
+    </Container>
+</Preview>
+
 - <b>Link</b>. Прозрачная кнопка-ссылка. Для получения ссылки, нужно установить пропс `href`.
 
 <Preview>
@@ -255,10 +274,7 @@ import { Button } from '@alfalab/core-components-button';
     {React.createElement(() => {
         const [loading, setLoading] = React.useState({
             primary: false,
-            secondary: false,
-            outlined: false,
-            link: false,
-            ghost: false
+            secondary: false
         });
         const handleClick = (buttonName) => {
             setLoading({...loading, [buttonName]: true});

diff --git a/packages/button/src/Component.tsx b/packages/button/src/Component.tsx
@@ -11,7 +11,7 @@ export type ComponentProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'outlined' | 'filled' | 'link' | 'ghost';
+    view?: 'primary' | 'secondary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
 
     /**
      * Слот слева

diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -13,8 +13,12 @@
     --button-secondary-color: var(--color-light-text-primary);
     --button-secondary-base-bg-color: var(--color-light-specialbg-component);
     --button-secondary-base-border-color: transparent;
-    --button-secondary-hover-bg-color: color-mod(var(--button-secondary-base-bg-color) shade(7%));
-    --button-secondary-active-bg-color: color-mod(var(--button-secondary-base-bg-color) shade(15%));
+    --button-secondary-hover-bg-color: color-mod(
+        var(--button-secondary-base-bg-color) blenda(black 7%)
+    );
+    --button-secondary-active-bg-color: color-mod(
+        var(--button-secondary-base-bg-color) blenda(black 15%)
+    );
     --button-secondary-disabled-bg-color: var(--color-light-specialbg-component);
     --button-secondary-disabled-border-color: transparent;
     --button-secondary-disabled-color: color-mod(var(--color-light-text-primary) alpha(30%));
@@ -163,7 +167,7 @@ a.loading {
     }
 
     &:active {
-        background-color: color-mod(var(--color-light-specialbg-component) shade(7%));
+        background-color: color-mod(var(--color-light-specialbg-component) blenda(black 7%));
     }
 }
 
@@ -172,11 +176,24 @@ a.loading {
     background-color: var(--color-light-specialbg-component);
 
     &:hover {
-        background-color: color-mod(var(--color-light-specialbg-component) shade(7%));
+        background-color: color-mod(var(--color-light-specialbg-component) blenda(black 7%));
     }
 
     &:active {
-        background-color: color-mod(var(--color-light-specialbg-component) shade(15%));
+        background-color: color-mod(var(--color-light-specialbg-component) blenda(black 15%));
+    }
+}
+
+.transparent {
+    color: var(--color-light-text-primary);
+    background-color: color-mod(var(--color-light-bg-primary-inverted) alpha(10%));
+
+    &:hover {
+        background-color: color-mod(var(--color-light-bg-primary-inverted) alpha(20%));
+    }
+
+    &:active {
+        background-color: color-mod(var(--color-light-bg-primary-inverted) alpha(40%));
     }
 }
 
@@ -190,7 +207,7 @@ a.loading {
     }
 
     &:active {
-        background-color: color-mod(var(--color-light-specialbg-component) shade(7%));
+        background-color: color-mod(var(--color-light-specialbg-component) blenda(black 7%));
     }
 }
 
@@ -263,6 +280,16 @@ a.loading {
         }
     }
 
+    &.transparent {
+        color: color-mod(var(--color-light-text-primary) alpha(30%));
+        background-color: color-mod(var(--color-light-bg-primary-inverted) alpha(3%));
+
+        &.loading {
+            color: var(--color-light-text-primary);
+            background-color: color-mod(var(--color-light-bg-primary-inverted) alpha(10%));
+        }
+    }
+
     &.link {
         color: color-mod(var(--color-light-text-primary) alpha(30%));
         background-color: transparent;

diff --git a/packages/themes/src/mixins/button/corp.css b/packages/themes/src/mixins/button/corp.css
@@ -15,7 +15,9 @@
     --button-secondary-base-bg-color: transparent;
     --button-secondary-base-border-color: var(--color-light-border-tertiary-inverted);
     --button-secondary-hover-bg-color: var(--color-light-specialbg-component);
-    --button-secondary-active-bg-color: color-mod(var(--color-light-specialbg-component) shade(7%));
+    --button-secondary-active-bg-color: color-mod(
+        var(--color-light-specialbg-component) blenda(black 7%)
+    );
     --button-secondary-disabled-bg-color: transparent;
     --button-secondary-disabled-border-color: color-mod(
         var(--color-light-border-tertiary-inverted) alpha(30%)