feat(skeleton): updated default theme, click theme (#549)

core-ds · Mar 10, 2021 · 9bf9259 · 9bf9259
1 parent e8f076f
commit 9bf9259
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/packages/skeleton/src/Component.stories.mdx b/packages/skeleton/src/Component.stories.mdx
@@ -9,7 +9,11 @@ import { Typography } from '../../typography/src';
 import styles from './stories.module.css';
 
 
-<Meta title='Компоненты' component={Skeleton} />
+<Meta
+    title='Компоненты'
+    component={Skeleton}
+    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+/>
 
 
 <!-- Canvas -->
@@ -42,6 +46,7 @@ import styles from './stories.module.css';
     version={version}
     package='@alfalab/core-components-skeleton'
     stage={2}
+    design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=13404%3A5'
 />
 
 ```tsx

diff --git a/packages/skeleton/src/index.module.css b/packages/skeleton/src/index.module.css
@@ -2,14 +2,19 @@
 
 :root {
     --skeleton-background-filter: none;
-    --skeleton-default-color: var(--color-light-graphic-neutral);
+    --skeleton-default-color: var(--color-light-specialbg-component);
+    --skeleton-border-radius: 8px;
 }
 
 .component {
     position: relative;
     display: inline-block;
-    border-radius: 4px;
+    color: transparent;
+    border-radius: var(--skeleton-border-radius);
     overflow: hidden;
+
+    /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
 
 .component > * {
@@ -43,7 +48,7 @@
         to left,
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 0) 40%,
-        rgba(0, 0, 0, 0.025) 50%,
+        rgba(0, 0, 0, 0.05) 50%,
         rgba(0, 0, 0, 0) 60%,
         rgba(0, 0, 0, 0)
     );

diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
@@ -15,6 +15,7 @@
 @import './calendar-input/click.css';
 @import './toast-plate/click.css';
 @import './list/click.css';
+@import './skeleton/click.css';
 
 @define-mixin theme-click {
     --disabled-cursor: not-allowed;
@@ -37,4 +38,5 @@
     @mixin calendar-input-click;
     @mixin toast-plate-click;
     @mixin list-click;
+    @mixin skeleton-click;
 }
diff --git a/packages/themes/src/mixins/skeleton/click.css b/packages/themes/src/mixins/skeleton/click.css
@@ -0,0 +1,10 @@
+@import '../../../../vars/src/index.css';
+
+@define-mixin skeleton-click {
+    /* core vars */
+    --color-light-graphic-neutral: #dbdee1;
+
+    /* theme */
+    --skeleton-default-color: var(--color-light-graphic-neutral);
+    --skeleton-border-radius: 4px;
+}