feat(button): experimental active transform (site theme)

core-ds · Apr 23, 2021 · a741e4f · a741e4f
1 parent ef71ed8
commit a741e4f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/docs/8.icons.stories.mdx b/docs/8.icons.stories.mdx
@@ -1,5 +1,9 @@
 import { Description } from '@storybook/addon-docs/blocks';
 
+import { Plate } from '../packages/plate/src';
+import { Badge } from '../packages/badge/src';
+import { AlertCircleMIcon } from '@alfalab/icons-glyph';
+
 <Meta title='Гайдлайны|Иконки' />
 
 ## Иконки
@@ -12,3 +16,13 @@ import { Description } from '@storybook/addon-docs/blocks';
 Для удобства воспользуйтесь [витриной иконок с поиском](https://alfa-laboratory.github.io/icons-demo/).
 
 Иконки из пакета [icons-glyph](https://github.com/alfa-laboratory/icons) одноцветные и легко могут быть перекрашены с помощью `color`.
+
+<div style={{marginTop: 24}}>
+<Plate view='attention' leftAddons={<Badge view='icon' iconColor='attention' content={<AlertCircleMIcon />} />}>
+
+Проверьте, что `alfabank.st` добавлен в список разрешённых источников:
+
+<p style={{marginBottom: 8}}><code>'img-src': `'self' click.alfabank.ru alfabank.st data: 'self'`</code></p>
+
+</Plate>
+</div>
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -39,11 +39,10 @@
     --button-ghost-active-color: color-mod(var(--button-ghost-base-color) tint(50%));
     --button-ghost-disabled-color: color-mod(var(--button-ghost-base-color) alpha(30%));
 
-    /* font */
+    /* misc */
     --button-font-family: var(--font-family);
-
-    /* radius */
     --button-border-radius: var(--border-radius-s);
+    --button-active-transform: none;
 }
 
 .component {
@@ -69,8 +68,13 @@
     box-shadow: none;
     user-select: none;
     cursor: pointer;
-    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
+    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, transform 0.12s ease;
     box-sizing: border-box;
+    will-change: transform;
+
+    &:active {
+        transform: var(--button-active-transform);
+    }
 }
 
 .focused {

diff --git a/packages/themes/src/mixins/button/site-inverted.css b/packages/themes/src/mixins/button/site-inverted.css
@@ -9,6 +9,7 @@
 
     /* theme */
     --button-border-radius: var(--border-radius-m);
+    --button-active-transform: scale(0.97);
 
     /* primary */
     --button-primary-base-bg-color: var(--color-dark-bg-accent);

diff --git a/packages/themes/src/mixins/button/site.css b/packages/themes/src/mixins/button/site.css
@@ -3,4 +3,5 @@
 @define-mixin button-site {
     /* theme */
     --button-border-radius: var(--border-radius-m);
+    --button-active-transform: scale(0.97);
 }