feat(core-components-tag): add click theme

core-ds · Sep 8, 2020 · eeb2400 · eeb2400
1 parent fdd7179
commit eeb2400
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/packages/tag/src/Component.stories.mdx b/packages/tag/src/Component.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Story, Props, Preview, Title } from '@storybook/addon-docs/blocks';
-import { text, select } from '@storybook/addon-knobs';
+import { text, select, boolean } from '@storybook/addon-knobs';
 import { Status } from 'storybook/blocks/status';
 import { Design } from 'storybook/blocks/design';
 import Icon from '@alfalab/icons-glyph/CopyMIcon';
@@ -10,7 +10,11 @@ import { name, version } from '../package.json';
 export const SIZES = ['xs', 's', 'm', 'l'];
 
 
-<Meta title='Компоненты|Tag' component={Tag} />
+<Meta
+    title='Компоненты|Tag'
+    component={Tag}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     Tag ({name}@{version})
@@ -39,7 +43,8 @@ import { Tag } from '@alfalab/core-components-tag';
         return (
             <Tag
                 size={select('size', SIZES, 'm')}
-                checked={checked}
+                disabled={boolean('disabled', false)}
+                checked={checked || boolean('checked', false)}
                 onClick={handleClick}
             >
                 {text('label', 'Оплатить')}

diff --git a/packages/tag/src/index.module.css b/packages/tag/src/index.module.css
@@ -11,13 +11,15 @@
 
     /* background-color */
     --tag-background-color: transparent;
+    --tag-background-color-hover: transparent;
     --tag-background-color-active: var(--color-dark-indigo-07);
     --tag-background-color-checked: var(--color-dark-indigo);
     --tag-background-color-checked-disabled: var(--color-dark-indigo-30-flat);
 
     /* text color */
     --tag-text-color: var(--color-dark-indigo);
     --tag-text-color-checked: var(--color-white);
+    --tag-text-color-checked-hover: var(--color-white);
     --tag-text-color-checked-disabled: var(--color-white);
 }
 
@@ -38,6 +40,10 @@
     user-select: none;
     cursor: pointer;
     outline: none;
+
+    &:disabled {
+        cursor: default;
+    }
 }
 
 .focused {
@@ -63,14 +69,15 @@
 }
 
 .component {
+    &:hover:not(:disabled) {
+        border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color-hover);
+        background-color: var(--tag-background-color-hover);
+    }
+
     &:active:not(:disabled) {
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-
-    &:hover:not(:disabled) {
-        border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color-hover);
-    }
 }
 
 .checked {
@@ -81,6 +88,11 @@
         background-color: var(--tag-background-color-checked-disabled);
         border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color-disabled);
     }
+
+    &:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-background-color-checked);
+        color: var(--tag-text-color-checked-hover);
+    }
 }
 
 .xs {

diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
@@ -2,10 +2,12 @@
 @import './form-control/click.css';
 @import './pure-input/click.css';
 @import './button/click.css';
+@import './tag/click.css';
 
 @define-mixin theme-click {
     @mixin amount-click;
     @mixin form-control-click;
     @mixin pure-input-click;
     @mixin button-click;
+    @mixin tag-click;
 }
diff --git a/packages/themes/src/mixins/tag/click.css b/packages/themes/src/mixins/tag/click.css
@@ -0,0 +1,12 @@
+@import '../../../../vars/src/colors.css';
+
+@define-mixin tag-click {
+    --tag-background-color: var(--color-dark-indigo-07-flat);
+    --tag-background-color-hover: color-mod(var(--color-dark-indigo-07-flat) blenda(black 10%));
+    --tag-background-color-active: color-mod(var(--color-dark-indigo-07-flat) blenda(black 30%));
+    --tag-text-color-checked-hover: color-mod(var(--color-white) blenda(black 30%));
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+    --tag-border-color-active: transparent;
+    --tag-border-color-disabled: transparent;
+}