diff --git a/design-tokens/input/tokens.json b/design-tokens/input/tokens.json index 16993284..84b13ba0 100644 --- a/design-tokens/input/tokens.json +++ b/design-tokens/input/tokens.json @@ -4444,7 +4444,7 @@ }, "root": { "transitionDuration": "{effects.transition.duration.200}" }, "tablist": { - "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.200} {dimension.borderWidth.none}", "background": "transparent", "borderColor": "{color.border.neutral.default}" }, diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 3c94a134..9be5a3d3 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -91,18 +91,19 @@ export const Tabs = memo( } ) -const styles = StyleSheet.create(({ components, semantic }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { flexDirection: 'row', gap: components.tabs.tab.margin, - borderBottomWidth: semantic.dimension.borderWidth[100], + borderBottomWidth: components.tabs.tablist.borderBottomWidth, borderColor: components.tabs.tablist.borderColor, }, line: { position: 'absolute', - bottom: 0, - height: semantic.dimension.borderWidth[200], + // Линия ложится поверх границы таб-листа: отрицательный сдвиг равен её толщине + bottom: components.tabs.activeBar.bottom, + height: components.tabs.activeBar.height, backgroundColor: components.tabs.activeBar.background, }, diff --git a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index e4a3b881..5fad356f 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -2114,7 +2114,7 @@ exports[`Tabs component tests disabled 1`] = `