plasma-new-hope: Refactoring tabs tokens, variations, config

packages/plasma-new-hope/src/components/Tabs/TabItem.tsx

@@ -5,8 +5,7 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { ComponentConfig, RootProps } from '../../engines';
 
 import { TabsContext } from './TabsContext';
-import { base as active } from './TabItem/_active/base';
-import { base as disabled } from './TabItem/_disabled/base';
+import { base as view } from './TabItem/variations/_view/base';
 
 const base = css`
     align-items: center;
@@ -19,15 +18,8 @@ const base = css`
     text-align: center;
     padding: 1rem 1.313rem;
     height: 3.75rem;
-    box-shadow: inset 0 calc(var(--plasma-tabs-underline-height) * -1) 0 var(--plasma-tabs-underline-color);
-    font-weight: var(--plasma-tabs-font-weight);
-    color: var(--plasma-tabs-color);
     flex: 1 1 calc((100% / 4) - 0.125rem);
     transition: color 0.1s ease-in-out, box-shadow 0.3s ease-in-out;
-
-    :hover {
-        color: var(--plasma-tabs-color-hover);
-    }
 `;
 
 export interface TabItemProps extends PropsWithChildren, React.HTMLAttributes<HTMLDivElement> {
@@ -68,12 +60,8 @@ export const tabItemConfig: ComponentConfig = {
     layout: tabItemRoot,
     base,
     variations: {
-        disabled: {
-            css: disabled,
-            attrs: true,
-        },
-        active: {
-            css: active,
+        view: {
+            css: view,
         },
     },
     defaults: {

packages/plasma-new-hope/src/components/Tabs/TabItem/variations/_view/base.ts

@@ -0,0 +1,14 @@
+import { css } from '@linaria/core';
+
+import { tokens } from '../../../Tabs.tokens';
+
+export const base = css`
+    box-shadow: inset 0 calc(var(${tokens.underlineHeight}) * -1) 0 var(${tokens.underlineColor});
+    font-weight: var(${tokens.fontWeight});
+    color: var(${tokens.color});
+
+    :hover {
+        color: var(${tokens.colorHover});
+        cursor: var(${tokens.cursor});
+    }
+`;

packages/plasma-new-hope/src/components/Tabs/TabItem/variations/_view/tokens.json

@@ -0,0 +1,8 @@
+[
+    "--plasma-tabs-underline-height",
+    "--plasma-tabs-underline-color",
+    "--plasma-tabs-font-weight",
+    "--plasma-tabs-font-color",
+    "--plasma-tabs-font-color-hover",
+    "--plasma-tabs-cursor"
+]

packages/plasma-new-hope/src/components/Tabs/Tabs.tokens.ts

@@ -0,0 +1,10 @@
+export const tokens = {
+    disabledOpacity: '--plasma-tabs-disabled-opacity',
+    containerWidth: '--plasma-tabs-container-width',
+    cursor: '--plasma-tabs-cursor',
+    underlineHeight: '--plasma-tabs-underline-height',
+    underlineColor: '--plasma-tabs-underline-color',
+    fontWeight: '--plasma-tabs-font-weight',
+    color: '--plasma-tabs-color',
+    colorHover: '--plasma-tabs-color-hover',
+};

packages/plasma-new-hope/src/components/Tabs/Tabs.tsx

@@ -3,8 +3,8 @@ import { css } from '@linaria/core';
 
 import { ComponentConfig, RootProps } from '../../engines';
 
-import { base as disabled } from './Tabs/_disabled/base';
-import { base as stretch } from './Tabs/_stretch/base';
+import { base as disabled } from './Tabs/variations/_disabled/base';
+import { base as stretch } from './Tabs/variations/_stretch/base';
 
 const base = css`
     position: relative;

packages/plasma-new-hope/src/components/Tabs/Tabs/variations/_disabled/base.ts

@@ -0,0 +1,7 @@
+import { css } from '@linaria/core';
+
+import { tokens } from '../../../Tabs.tokens';
+
+export const base = css`
+    opacity: var(${tokens.disabledOpacity});
+`;

packages/plasma-new-hope/src/components/Tabs/Tabs/variations/_stretch/base.ts

@@ -0,0 +1,7 @@
+import { css } from '@linaria/core';
+
+import { tokens } from '../../../Tabs.tokens';
+
+export const base = css`
+    width: var(${tokens.containerWidth});
+`;

packages/plasma-new-hope/src/components/Tabs/index.ts

@@ -1 +1,3 @@
 export { tabsRoot, tabsConfig } from './Tabs';
+export { tabItemRoot, tabItemConfig } from './TabItem';
+export { tokens as tabsTokens } from './Tabs.tokens';

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/TabItem.config.ts

@@ -1,33 +1,34 @@
 // generated by theme-builder { version } { plasma-hope-version??? }
-
 import { css } from '@linaria/core';
 
+import { tabsTokens } from '../../../../components/Tabs';
+
 export const config = {
     defaults: {
         view: 'default',
     },
     variations: {
         view: {
             default: css`
-                --plasma-tabs-underline-color: var(--surface-solid-tertiary);
-                --plasma-tabs-underline-height: 2px;
-                --plasma-tabs-font-weight: 500;
-                --plasma-tabs-color: var(--text-accent);
-                --plasma-tabs-cursor: pointer;
-                --plasma-tabs-color-hover: var(--text-primary);
+                ${tabsTokens.underlineColor}: var(--surface-solid-tertiary);
+                ${tabsTokens.underlineHeight}: 0.125rem;
+                ${tabsTokens.fontWeight}: 500;
+                ${tabsTokens.color}: var(--text-accent);
+                ${tabsTokens.cursor}: pointer;
+                ${tabsTokens.colorHover}: var(--text-primary);
             `,
         },
         disabled: {
             true: css`
-                --plasma-tabs-cursor: not-allowed;
-                --plasma-tabs-color-hover: var(--text-accent);
+                ${tabsTokens.cursor}: not-allowed;
+                ${tabsTokens.colorHover}: var(--text-accent);
             `,
         },
         active: {
             true: css`
-                --plasma-tabs-underline-color: var(--text-primary);
-                --plasma-tabs-color: var(--text-primary);
-                --plasma-tabs-color-hover: var(--text-primary);
+                ${tabsTokens.underlineColor}: var(--text-primary);
+                ${tabsTokens.color}: var(--text-primary);
+                ${tabsTokens.colorHover}: var(--text-primary);
             `,
         },
     },

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/Tabs.config.ts

@@ -2,19 +2,21 @@
 
 import { css } from '@linaria/core';
 
+import { tabsTokens } from '../../../../components/Tabs';
+
 export const config = {
     defaults: {
         disabled: 'false',
     },
     variations: {
         stretch: {
             true: css`
-                --plasma-tabs-container-width: 100%;
+                ${tabsTokens.containerWidth}: 100%;
             `,
         },
         disabled: {
             true: css`
-                --plasma-tabs-disabled-opacity: 0.4;
+                ${tabsTokens.disabledOpacity}: 0.4;
             `,
         },
     },