get rid of tabBorder

Opentrons · Mar 14, 2024 · 8a4baca · 8a4baca
1 parent ee87384
commit 8a4baca
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react'
+import styled, { css } from 'styled-components'
 import { NavLink } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
 
+export const TAB_BORDER_STYLE = css`
+  border-bottom-style: ${BORDERS.styleSolid};
+  border-bottom-width: 2px;
+  border-bottom-color: ${COLORS.purple50};
+`
+
 interface NavTabProps {
   to: string
   tabName: string
@@ -17,7 +23,7 @@ const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
 
   &.active {
     color: ${COLORS.black90};
-    ${BORDERS.tabBorder}
+    ${TAB_BORDER_STYLE}
   }
 `
 const DisabledNavLink = styled.span`

diff --git a/components/src/helix-design-system/borders.ts b/components/src/helix-design-system/borders.ts
@@ -2,6 +2,9 @@ import { css } from 'styled-components'
 
 import { COLORS } from '.'
 
+/**
+ * Constants
+ */
 export const borderRadius2 = '2px' // WEB ONLY!
 export const borderRadius4 = '4px'
 export const borderRadius8 = '8px'
@@ -10,14 +13,14 @@ export const borderRadius16 = '16px'
 export const borderRadius40 = '40px'
 export const borderRadiusFull = '200px'
 
+/**
+ * Styles
+ */
 export const styleSolid = 'solid'
 
-export const tabBorder = css`
-  border-bottom-style: ${styleSolid};
-  border-bottom-width: 2px;
-  border-bottom-color: ${COLORS.purple50};
-`
-
+/**
+ * Special-case borders
+ */
 export const activeLineBorder = `1px ${styleSolid} ${COLORS.blue50}`
 export const lineBorder = `1px ${styleSolid} ${COLORS.grey30}`
 export const cardOutlineBorder = css`
@@ -30,8 +33,10 @@ export const cardOutlineBorder = css`
   }
 `
 
+/**
+ * Shadows
+ */
 export const smallDropShadow = '0px 3px 6px rgba(0, 0, 0, 0.23)'
-
 // touch screen
 export const shadowBig = '0px 3px 6px rgba(0,0,0,0.23)'
 export const shadowSmall = '0px 0px 40px rgba(0,0,0,0.4)'