feat(core-components-themes): add tabs click theme

core-ds · Sep 14, 2020 · 0ffbc3f · 0ffbc3f
1 parent 71a8aa4
commit 0ffbc3f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/packages/tabs/src/Component.stories.mdx b/packages/tabs/src/Component.stories.mdx
@@ -20,7 +20,7 @@ export const titles = Array(7).fill(0).map((_, i) => ({ title: `Таб ${i + 1}`
 
 <Meta
     title='Компоненты|Tabs'
-    parameters={{ 'theme-switcher': { themes: ['site'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'site'] } }}
 />
 
 <Title>

diff --git a/packages/tabs/src/components/primary-tablist/index.module.css b/packages/tabs/src/components/primary-tablist/index.module.css
@@ -28,6 +28,7 @@
     padding: 0;
     cursor: pointer;
     color: var(--primary-tablist-color);
+    font-feature-settings: 'ss01';
     transition: color 0.2s ease;
     border: 0;
     background: none;

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 './tabs/click.css';
 
 @define-mixin theme-click {
     @mixin amount-click;
     @mixin form-control-click;
     @mixin pure-input-click;
     @mixin button-click;
+    @mixin tabs-click;
 }
diff --git a/packages/themes/src/mixins/tabs/click.css b/packages/themes/src/mixins/tabs/click.css
@@ -0,0 +1,11 @@
+@define-mixin tabs-click {
+    --primary-tablist-s-font-size: 20px;
+    --primary-tablist-s-font-weight: 500;
+    --primary-tablist-s-font-family: var(--font-family-styrene);
+    --primary-tablist-m-font-size: 20px;
+    --primary-tablist-m-font-weight: 500;
+    --primary-tablist-m-font-family: var(--font-family-styrene);
+    --primary-tablist-l-font-size: 24px;
+    --primary-tablist-l-font-weight: 500;
+    --primary-tablist-l-font-family: var(--font-family-styrene);
+}
diff --git a/packages/themes/src/mixins/tabs/site.css b/packages/themes/src/mixins/tabs/site.css
@@ -2,7 +2,9 @@
     /* core vars */
     --gap-4xl: 48px;
 
-    /* gaps */
+    /* theme */
     --primary-tablist-m-gaps: var(--gap-4xl);
+    --primary-tablist-m-font-weight: 500;
     --primary-tablist-l-gaps: var(--gap-4xl);
+    --primary-tablist-l-font-weight: 500;
 }