From 908ae946126c10da92b46c3915bb1663be6ebb0d Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Thu, 2 Jan 2025 23:06:47 +0900
Subject: [PATCH 1/8] feat(ui): Badge

---
 packages/ui/Badge.tsx                     | 6 ++++--
 packages/ui/stories/base/Badge.stories.ts | 7 +++++++
 packages/ui/tailwind.config.ts            | 5 +++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/ui/Badge.tsx b/packages/ui/Badge.tsx
index 85b11996..71f457b9 100644
--- a/packages/ui/Badge.tsx
+++ b/packages/ui/Badge.tsx
@@ -8,12 +8,14 @@ interface Props {
 }
 
 export const Badge: FC<Props> = ({ icon, children, onClick }) => {
+  const clickable = onClick != null;
   return (
     <div
+      role={clickable ? 'button' : undefined}
       onClick={onClick}
       className={clsx(
-        'Badge bg-surface-100 border-surface-300 inline-flex gap-1 rounded-lg border px-1 py-0.5 text-sm',
-        onClick != null ? 'hover:bg-surface-50 hover:border-surface-500 cursor-pointer select-none' : '',
+        'Badge bg-badge-bg border-badge-border inline-flex gap-1 rounded-sm border px-1 py-0.5 text-xs',
+        clickable && 'hover:bg-badge-hover cursor-pointer select-none active:translate-y-px',
       )}
     >
       {icon}
diff --git a/packages/ui/stories/base/Badge.stories.ts b/packages/ui/stories/base/Badge.stories.ts
index 96d2404a..2602b3ec 100644
--- a/packages/ui/stories/base/Badge.stories.ts
+++ b/packages/ui/stories/base/Badge.stories.ts
@@ -13,3 +13,10 @@ export const Basic: Story = {
     children: 'New',
   },
 };
+
+export const Clickable: Story = {
+  args: {
+    children: 'New',
+    onClick: () => alert('clicked'),
+  },
+};
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 92a7280a..3b2f83a8 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -72,6 +72,11 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
       dot: {
         normal: blue[600],
       },
+      badge: {
+        bg: $(neutral[50], neutral[700]),
+        hover: $(neutral[100], neutral[600]),
+        border: $(neutral[500], black),
+      },
       tooltip: {
         bg: $(black, neutral[600]),
         text: white,

From e60d6e1c2d0160f7206445070e6e779e9b7eb4ab Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Thu, 2 Jan 2025 23:28:03 +0900
Subject: [PATCH 2/8] feat(ui): Button

---
 packages/ui/Button.tsx                     |  7 ++++++-
 packages/ui/stories/base/Button.stories.ts |  4 +++-
 packages/ui/tailwind.config.ts             | 22 +++++++++++++---------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/ui/Button.tsx b/packages/ui/Button.tsx
index e892e69f..cc22cc3c 100644
--- a/packages/ui/Button.tsx
+++ b/packages/ui/Button.tsx
@@ -22,18 +22,22 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
         'select-none appearance-none focus-visible:outline-none',
         'inline-flex items-center justify-center focus:ring',
         'm-0 gap-1 rounded-sm',
+        'active-enabled:translate-y-px border shadow-[0_1px_0_0_rgba(0,0,0,0.06)]',
+
         small ? 'min-h-[1.75rem] px-[0.75rem] py-0.5 text-sm' : 'px-4 py-2 text-base',
         (variant === 'default' || variant === 'detail') && [
           'bg-button-default-bg text-button-default-text',
           'hover:enabled:bg-button-default-hover-bg active-enabled:bg-button-default-active-bg',
           'disabled:text-button-default-disabled-text disabled:bg-button-default-disabled-bg',
+          'border-button-default-border',
         ],
         variant === 'danger' &&
-          'bg-button-danger-bg text-button-danger-text hover:enabled:bg-button-danger-hover-bg active-enabled:bg-button-danger-active-bg',
+          'bg-button-danger-bg text-button-danger-text hover:enabled:bg-button-danger-hover-bg active-enabled:bg-button-danger-active-bg border-button-danger-border',
         variant === 'primary' && [
           'bg-button-primary-bg text-button-primary-text',
           'hover:enabled:bg-button-primary-hover-bg active-enabled:bg-button-primary-active-bg',
           'disabled:bg-button-primary-disabled-bg disabled:text-button-primary-text',
+          'border-button-primary-border',
         ],
         variant === 'switch' && [
           'bg-button-switch-bg text-button-switch-text',
@@ -41,6 +45,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
           'border-r-1 border-r-button-switch-off-hint',
           'on:border-r-button-switch-on-hint on:bg-button-switch-on-bg on:hover:enabled:to-button-switch-bg',
           'disabled:text-button-switch-disabled-text disabled:bg-button-switch-disabled-bg',
+          'border-button-switch-border-border',
         ],
         className,
       )}
diff --git a/packages/ui/stories/base/Button.stories.ts b/packages/ui/stories/base/Button.stories.ts
index ec367ee5..c70387b1 100644
--- a/packages/ui/stories/base/Button.stories.ts
+++ b/packages/ui/stories/base/Button.stories.ts
@@ -12,7 +12,9 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Basic: Story = {
-  args: {},
+  args: {
+    disabled: false,
+  },
 };
 
 export const Small: Story = {
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 3b2f83a8..55e59fda 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -397,13 +397,14 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
           },
         },
         default: {
-          bg: $(neutral[100], neutral[700]),
+          bg: $(neutral[50], neutral[700]),
           text: $(black, white),
+          border: $(neutral[300], black),
           hover: {
-            bg: $(neutral[200], neutral[700]),
+            bg: $(neutral[100], neutral[700]),
           },
           active: {
-            bg: $(neutral[300], neutral[600]),
+            bg: $(neutral[200], neutral[600]),
           },
           disabled: {
             bg: $(neutral[400], neutral[500]),
@@ -411,32 +412,35 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
           },
         },
         danger: {
-          bg: $(red[600], red[500]),
-          text: $(white, black),
+          bg: $(red[500], red[500]),
+          text: $(white, white),
           hover: {
             bg: $(red[500], red[400]),
           },
+          border: $(red[700], red[900]),
           active: {
             bg: $(red[400], red[300]),
           },
         },
         primary: {
-          bg: brand[600],
+          bg: $(brand[600], brand[500]),
           text: white,
           hover: {
-            bg: brand[700],
+            bg: $(brand[500], brand[600]),
           },
+          border: $(brand[700], black),
           active: {
-            bg: brand[700],
+            bg: $(brand[700], brand[200]),
           },
           disabled: {
-            bg: brand[700],
+            bg: $(neutral[600], neutral[500]),
             text: neutral[300],
           },
         },
         switch: {
           bg: $(neutral[100], neutral[700]),
           text: $(black, white),
+          border: $(neutral[300], black),
           on: {
             hint: brand[400],
             bg: $(neutral[300], neutral[600]),

From 28e11d1d1e92daa3e2d01016e1f1ff6bfa699d1d Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Thu, 2 Jan 2025 23:44:47 +0900
Subject: [PATCH 3/8] feat(ui): ButtonInline

---
 packages/ui/ButtonInline.tsx   | 4 ++--
 packages/ui/tailwind.config.ts | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/ui/ButtonInline.tsx b/packages/ui/ButtonInline.tsx
index cbafd80a..7d9932af 100644
--- a/packages/ui/ButtonInline.tsx
+++ b/packages/ui/ButtonInline.tsx
@@ -15,8 +15,8 @@ export const ButtonInline = React.forwardRef<HTMLButtonElement, ButtonInlineProp
     <button
       className={clsx(
         className,
-        'bg-button-inline-bg inline-block -translate-y-[1px] rounded px-[0.5em] transition-shadow duration-100 active:translate-y-0',
-        'shadow-button-inline-border/50 active:shadow-button-inline-border/25 shadow-[0_2px_0_0] active:shadow-[0_0px_0_1px]',
+        'ButtonInline bg-button-inline-bg inline-block -translate-y-[1px] rounded-sm px-[0.3em] transition-shadow duration-100 active:translate-y-0',
+        'shadow-[0_0_0_1px_rgba(0,0,0,1),0_2px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_0_0_1px_rgba(0,0,0,1)]',
       )}
       ref={ref}
       {...props}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 55e59fda..6209339c 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -386,7 +386,6 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
       button: {
         inline: {
           bg: $(neutral[100], neutral[600]),
-          border: $(black, black),
         },
         light: {
           hover: {

From bb9e27c4585dafb36fc40b8fc0da1c620f187f39 Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Fri, 3 Jan 2025 00:15:09 +0900
Subject: [PATCH 4/8] feat(ui): Button and ButtonInline

---
 packages/ui/Button.tsx       | 13 ++++++++-----
 packages/ui/ButtonInline.tsx |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/ui/Button.tsx b/packages/ui/Button.tsx
index cc22cc3c..f793cb62 100644
--- a/packages/ui/Button.tsx
+++ b/packages/ui/Button.tsx
@@ -18,11 +18,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   return (
     <button
       className={clsx(
-        'enabled:cursor-pointer disabled:cursor-not-allowed',
+        'Button enabled:cursor-pointer disabled:cursor-not-allowed',
         'select-none appearance-none focus-visible:outline-none',
-        'inline-flex items-center justify-center focus:ring',
+        'inline-flex items-center justify-center',
         'm-0 gap-1 rounded-sm',
-        'active-enabled:translate-y-px border shadow-[0_1px_0_0_rgba(0,0,0,0.06)]',
+        'active-enabled:shadow-none active-enabled:translate-y-px border shadow-sm',
 
         small ? 'min-h-[1.75rem] px-[0.75rem] py-0.5 text-sm' : 'px-4 py-2 text-base',
         (variant === 'default' || variant === 'detail') && [
@@ -31,8 +31,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
           'disabled:text-button-default-disabled-text disabled:bg-button-default-disabled-bg',
           'border-button-default-border',
         ],
-        variant === 'danger' &&
-          'bg-button-danger-bg text-button-danger-text hover:enabled:bg-button-danger-hover-bg active-enabled:bg-button-danger-active-bg border-button-danger-border',
+        variant === 'danger' && [
+          'bg-button-danger-bg text-button-danger-text hover:enabled:bg-button-danger-hover-bg',
+          'active-enabled:bg-button-danger-active-bg border-button-danger-border',
+        ],
+
         variant === 'primary' && [
           'bg-button-primary-bg text-button-primary-text',
           'hover:enabled:bg-button-primary-hover-bg active-enabled:bg-button-primary-active-bg',
diff --git a/packages/ui/ButtonInline.tsx b/packages/ui/ButtonInline.tsx
index 7d9932af..e26d00cb 100644
--- a/packages/ui/ButtonInline.tsx
+++ b/packages/ui/ButtonInline.tsx
@@ -16,7 +16,7 @@ export const ButtonInline = React.forwardRef<HTMLButtonElement, ButtonInlineProp
       className={clsx(
         className,
         'ButtonInline bg-button-inline-bg inline-block -translate-y-[1px] rounded-sm px-[0.3em] transition-shadow duration-100 active:translate-y-0',
-        'shadow-[0_0_0_1px_rgba(0,0,0,1),0_2px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_0_0_1px_rgba(0,0,0,1)]',
+        'shadow-[0_0_0_1px_rgba(0,0,0,0.2),0_2px_0_0_rgba(0,0,0,0.06)] active:shadow-[0_0_0_1px_rgba(0,0,0,1)]',
       )}
       ref={ref}
       {...props}

From f22139c50d94ab387fdad6f95f9c45a8bac444a4 Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Fri, 3 Jan 2025 00:15:23 +0900
Subject: [PATCH 5/8] feat(ui): FloatingBox

---
 packages/ui/tailwind.config.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 6209339c..98264115 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -96,14 +96,14 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
         active: $(blue[500], blue[200]),
         decoration: $(blue[400], blue[800]),
       },
-      bg: $(neutral[50], neutral[800]),
+      bg: $(neutral[50], neutral[700]),
       floating: {
         bg: $(neutral[50], neutral[900]),
       },
       card: {
-        bg: $(white, neutral[900]),
-        border: $(neutral[200], neutral[800]),
-        shadow: $(neutral[100], neutral[900]),
+        bg: $(white, neutral[800]),
+        border: $(neutral[200], neutral[500]),
+        shadow: $(neutral[100], black),
       },
       errors: {
         bg: $(red[50], red[900]),
@@ -191,10 +191,10 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
         other: $(neutral[300], neutral[600]),
       },
       select: {
-        bg: $(neutral[50], neutral[700]),
-        border: $(neutral[100], neutral[700]),
+        bg: $(neutral[50], neutral[600]),
+        border: $(neutral[100], neutral[500]),
         hover: {
-          border: $(neutral[200], neutral[600]),
+          border: $(neutral[200], neutral[400]),
         },
         open: {
           border: $(lime[500], blue[500]),
@@ -396,11 +396,11 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
           },
         },
         default: {
-          bg: $(neutral[50], neutral[700]),
+          bg: $(neutral[50], neutral[600]),
           text: $(black, white),
           border: $(neutral[300], black),
           hover: {
-            bg: $(neutral[100], neutral[700]),
+            bg: $(neutral[100], mix(neutral[500], neutral[600], 0.5)),
           },
           active: {
             bg: $(neutral[200], neutral[600]),
@@ -427,9 +427,9 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
           hover: {
             bg: $(brand[500], brand[600]),
           },
-          border: $(brand[700], black),
+          border: $(brand[700], brand[600]),
           active: {
-            bg: $(brand[700], brand[200]),
+            bg: $(brand[700], brand[400]),
           },
           disabled: {
             bg: $(neutral[600], neutral[500]),

From 9f2af48357ce4e79e1792606c56a01b18a483743 Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Fri, 3 Jan 2025 00:16:46 +0900
Subject: [PATCH 6/8] feat(ui): Kbd

---
 packages/ui/tailwind.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 98264115..437d0772 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -52,9 +52,9 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
         system: $(themeColor.light, themeColor.dark),
       },
       kbd: {
-        bg: $(white, neutral[700]),
+        bg: $(white, neutral[800]),
         text: $(black, white),
-        shadow: $(neutral[200], neutral[800]),
+        shadow: $(neutral[400], neutral[900]),
       },
       brand,
       green: $(green, revert(green)),

From 0c522a5cde1843a8586bdc915f95d40f443c074a Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Fri, 3 Jan 2025 00:20:08 +0900
Subject: [PATCH 7/8] feat(ui): Select

---
 packages/ui/tailwind.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 437d0772..78f0f171 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -191,10 +191,10 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
         other: $(neutral[300], neutral[600]),
       },
       select: {
-        bg: $(neutral[50], neutral[600]),
-        border: $(neutral[100], neutral[500]),
+        bg: $(neutral[100], neutral[600]),
+        border: $(neutral[300], neutral[500]),
         hover: {
-          border: $(neutral[200], neutral[400]),
+          border: $(neutral[500], neutral[400]),
         },
         open: {
           border: $(lime[500], blue[500]),

From c3ef5d427b6cf69e8867dcb3bd9fa9034e3f5b15 Mon Sep 17 00:00:00 2001
From: uonr <dev@yuru.me>
Date: Fri, 3 Jan 2025 00:24:01 +0900
Subject: [PATCH 8/8] feat(ui): TooltipBox

---
 packages/ui/TooltipBox.tsx     | 2 +-
 packages/ui/tailwind.config.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/TooltipBox.tsx b/packages/ui/TooltipBox.tsx
index d6fcf8f2..ddcf57cb 100644
--- a/packages/ui/TooltipBox.tsx
+++ b/packages/ui/TooltipBox.tsx
@@ -17,7 +17,7 @@ export const TooltipBox = forwardRef<HTMLDivElement, Props>(
           ref={ref}
           className={
             defaultStyle
-              ? 'TooltipBox bg-tooltip-bg text-tooltip-text shadow-tooltip-shadow/50 rounded-sm px-2 py-1 text-sm shadow-[1px_2px_0_0]'
+              ? 'TooltipBox border-tooltip-border bg-tooltip-bg text-tooltip-text shadow-tooltip-shadow/50 rounded-sm border px-2 py-1 text-sm shadow-[3px_4px_0_0]'
               : className
           }
           {...props}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 78f0f171..6914f5c1 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -78,7 +78,8 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
         border: $(neutral[500], black),
       },
       tooltip: {
-        bg: $(black, neutral[600]),
+        bg: $(neutral[600], neutral[600]),
+        border: black,
         text: white,
         shadow: $(neutral[500], black),
       },