feat: accentHintColor

Author: shiftpsh

example/src/stories/Tab/Tab.stories.tsx

@@ -30,6 +30,10 @@ export default {
       control: 'color',
       description: 'The accent color of the tab',
     },
+    accentHintColor: {
+      control: 'color',
+      description: 'The accent hint color of the tab',
+    },
     as: {
       control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
       description: 'The element to render the item as',

src/components/$Tab/Tab.tsx

@@ -12,6 +12,7 @@ const { vars, v, styles } = cssVariables(
   {
     ...transparentHoverTemplate,
     accentColor: (theme) => theme.color.background.table.header,
+    accentHintColor: (theme) => 'transparent',
   },
   'tab'
 )
@@ -40,7 +41,7 @@ const TabContainer = styled.button<TabContainerProps>`
   text-align: center;
   user-select: none;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-bottom: 2px solid ${v.accentHintColor};
   transition: background-color 0.3s ease, color 0.3s ease,
     border-color 0.3s ease;
   background: ${v.backgroundColor};
@@ -61,6 +62,7 @@ export interface TabProps {
   backgroundColor?: string
   hoverColor?: string
   accentColor?: string
+  accentHintColor?: string
 }
 
 export const Tab: PC<'a', TabProps> = forwardRefWithGenerics(
@@ -73,6 +75,7 @@ export const Tab: PC<'a', TabProps> = forwardRefWithGenerics(
       disabled = false,
       hoverColor,
       accentColor,
+      accentHintColor,
       style,
       as = 'a',
       ...rest
@@ -102,6 +105,7 @@ export const Tab: PC<'a', TabProps> = forwardRefWithGenerics(
             computedHoverColor &&
             readableColor(computedHoverColor, solvedTheme),
           [vars.accentColor]: computedAccentColor,
+          [vars.accentHintColor]: accentHintColor,
           ...style,
         }}
         {...rest}