From ed5644017f82c4c97597d52221e4b93578634554 Mon Sep 17 00:00:00 2001
From: Suhyun Park <me@shiftpsh.com>
Date: Fri, 24 Nov 2023 01:50:44 +0900
Subject: [PATCH 1/2] feat: accentHintColor

---
 example/src/stories/Tab/Tab.stories.tsx | 4 ++++
 src/components/$Tab/Tab.tsx             | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/example/src/stories/Tab/Tab.stories.tsx b/example/src/stories/Tab/Tab.stories.tsx
index 80c4370..611ebcd 100644
--- a/example/src/stories/Tab/Tab.stories.tsx
+++ b/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',
diff --git a/src/components/$Tab/Tab.tsx b/src/components/$Tab/Tab.tsx
index 6669abd..259b74f 100644
--- a/src/components/$Tab/Tab.tsx
+++ b/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}

From d428ab67f352d772d80a6b0ba99b07c96d87e174 Mon Sep 17 00:00:00 2001
From: Suhyun Park <me@shiftpsh.com>
Date: Fri, 24 Nov 2023 01:51:13 +0900
Subject: [PATCH 2/2] chore: bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 90b758d..25a0940 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",